1. 程式人生 > 程式設計 >實現ECharts雙Y軸左右刻度線一致的例子

實現ECharts雙Y軸左右刻度線一致的例子

不一致的情況如下圖:

實現ECharts雙Y軸左右刻度線一致的例子

修改成一致的情況如下圖:

實現ECharts雙Y軸左右刻度線一致的例子

程式碼如下:

yAxis : [
          {
            type : 'value',name : '人數',//splitLine:{show:false},axisLabel : {
              formatter: '{value} 個',textStyle:{color: '#A23400'}//#A23400 purple
            },axisLine:{
               lineStyle:{color:'#A23400',width:'1'} //y軸座標軸顏色 #A23400 black
            }
          },{
            type : 'value',name : '人次',axisLabel : {
              formatter: qfamtter,textStyle:{color: '#00AEAE'}//#00AEAE blue
            },axisLine:{
               lineStyle:{color:'#00AEAE',width:'1'} //y軸座標軸顏色 #00AEAE black
            },min: 0,max: Max2*2,splitNumber: 6,interval: (Max2*2 - 0) / 6
          }

其中需要加:

            min: 0,interval: (Max2*2 - 0) / 6

左邊Y軸默認了分成6段,所以要把右邊Y軸也分成6段。

附加:jquery 陣列獲取最大值和最值的方法,僅供參考

//計算最大值
 function cal_Max(a) {
    //debugger
    a=$.grep(a,function(n,i){return i>0;});
    var maxval = Math.max.apply(null,a);
    return maxval;
   }
 
 //計算最小值
 function calMin(a) {
  a=$.grep(a,i){return i>0;});
  var minval = Math.min.apply(null,a)
  return minval;
 }

補充知識:echarts 兩個y軸展示折線圖,並使兩個y軸刻度線重合

效果如圖:

實現ECharts雙Y軸左右刻度線一致的例子

y軸刻度不重合情況:

實現ECharts雙Y軸左右刻度線一致的例子

程式碼如下,具體的資料處理就不再一一展示,只看畫圖部分:

  drawGraphChart() {
   // 具體的資料格式可以參考: https://echarts.baidu.com/examples/editor.html?c=multiple-y-axis
   // 處理兩個y軸的最大值 => 為使兩個y軸的標度線完全重合
   // 拿到左右兩個y軸的最大資料之後 給他們分別取整成為最終 y軸上展示的值 也是為了能夠確保兩個值都能整除10
   const maxY1 = parseInt((Math.max(...maxData1) + 2000) / 1000) * 1000
   const maxY2 = parseInt((Math.max(...maxData2) + 10) / 10) * 10
   this.myChart = this.$echarts.init(document.getElementById('drawChart'))
   // var color = ['#d14a61','#5793f3'],// 這個顏色和y軸的顏色對應,如果畫的曲線較少,可以直接用兩種顏色區分線是按照哪個座標軸的刻度畫的
   const option = {
    title: {
     left: 20,text: '趨勢圖'
    },xAxis: {
     type: 'category',// boundaryGap: false,// 資料完全填充x軸
     data: this.toRepeatTimeArr // x軸時間
    },legend: {
     type: 'scroll',right: 120,top: 0,left: '65%',bottom: 0,data: legendTankNum // 圖例
    },grid: {
     left: '6%',right: '6%',top: '14%'
    },tooltip: {
     trigger: 'axis',axisPointer: {
      type: 'cross'
     }
    },yAxis: [
     {
      type: 'value',name: '體積',max: maxY1,// 左側y軸最大值
      // 兩個y軸的刻度必須整除一個相同的數才能重合
      interval: Math.ceil(maxY1 / 10),// 間距等分為10等分 
      position: 'left',// y軸在左側
      // y軸的顏色和按y軸刻度畫的曲線的顏色
      // axisLine: {
      //  lineStyle: {
      //   color: color[0]
      //  }
      // },axisLabel: {
       formatter: '{value} L'
      }
     },{
      type: 'value',name: '溫度',max: maxY2,// 右側y軸最大值
      interval: Math.ceil(maxY2 / 10),// 間距等分為10等分
      position: 'right',// y軸在右側
      // axisLine: {
      //  lineStyle: {
      //   color: color[1]
      //  }
      // },axisLabel: {
       formatter: '{value} °C'
      }
     }
    ],toolbox: {
     right: 80,top: -5,feature: {
      saveAsImage: {}
     }
    },// {name: '--',type: 'line',data:[0,0···]}
    series: allRealData
   }
   // true 圖資料不疊加
   this.myChart.setOption(option,true)
  }

以上這篇實現ECharts雙Y軸左右刻度線一致的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。