1. 程式人生 > >Echarts雙Y軸折線圖和柱形圖混合

Echarts雙Y軸折線圖和柱形圖混合

柱形圖和折線圖混合使用,並且使用雙y軸座標
具體程式碼如下

option ={
    color: ['#009CFF', '#FF072F'],  //設定多個顏色值時代表的是圖例顏色
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
      },
      legend: {
        right: '5%',
        bottom: '0',
        data: ['產品(輛)', '排名'],
        textStyle: {
          fontSize: 14
, fontWeight: 'normal', }, }, grid: { left: '15%', bottom: '40%', top: '8%', }, xAxis: [ { type: 'category', data: industryName, textStyle: { fontWeight: 'normal', }, axisLabel: { textStyle: { fontSize: 12
, fontWeight: 'normal', }, rotate: '45', }, }, ], yAxis: [ //當有兩個y軸時,設定兩個{}{}來承載y軸的值 { type: 'value', min: 0, axisLabel: { textStyle: { fontSize: 14, fontWeight: 'normal'
, }, }, splitLine: { show: false }, //y軸網格線,一般都會隱藏,x軸亦是如此 }, { type: 'value', axisLabel: { textStyle: { fontSize: 14, fontWeight: 'normal', }, }, splitLine: { show: false }, inverse: true, }, ], series: [ //對應折線圖和柱形圖,進行資料載入 { name: '產品(輛)', type: 'bar', data: industryValue, barWidth: '12', }, { name: '排名', type: 'line', yAxisIndex: 1, data: industryPM, label: { normal: { show: false, }, }, lineStyle: { normal: { width: 1, }, }, }, ], }

這裡寫圖片描述