文章目錄

• 前言

---

前言

柱形圖折線圖合并demo（含圖例）

option = {xAxis: {type: 'category',data: [2001, 2002, 2003, 2004, 2005],axisTick: {show: false}},yAxis: {type: 'value',interval: 10,// scale: true,max: 300,min: 0,splitLine: {show: true,lineStyle: {type: 'dashed',color: 'DimGray'}}},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {//grid 組件離容器上下左右側的距離// left: "3%",// right: "3%",// top: 35,// bottom: "3%",// containLabel: true,},legend: [// 柱狀圖(總產值){top: '0%',left: '10%',textStyle: {// 圖例文字樣式color: '#fff',fontSize: 10,fontFamily: 'PingFangSC-Regular, PingFang SC;'},itemStyle: {color: '#429DFF'},itemWidth: 10, // 圖例圖形的寬度itemHeight: 7, // 圖例圖形的高度data: [{name: '總產值', // 圖例文字內容icon: 'rect' // 圖例圖形的形狀，有多個可選值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，}]},// 折線圖(企業個數){top: '0%',right: '10%',textStyle: {// 圖例文字樣式color: '#fff',fontSize: 14,fontFamily: 'PingFangSC-Regular, PingFang SC;'},itemStyle: {color: 'red'},itemWidth: 10, // 圖例圖形的寬度itemHeight: 2, // 圖例圖形的高度data: [{name: '企業個數', // 圖例文字內容icon: 'rect' // 圖例圖形的形狀，有多個可選值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，}]}],series: [{name: '總產值',data: [50, 10, 90, 200, 250],barWidth: 10,type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(66, 157, 255, 0.8)' },{ offset: 1, color: 'rgba(66, 157, 255, 0)' }])}},{name: '企業個數',type: 'line',data: [50, 10, 90, 200, 250],lineStyle: {normal: {color: 'red', //折線的顏色width: '2' //折線粗細}},itemStyle: {normal: {color: '#fff', //拐點顏色borderColor: '#429DFF' //拐點邊框顏色}}}] };

總結

以上是生活随笔為你收集整理的Echarts柱形图折线图合并demo（含图例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。