實現ECharts雙Y軸左右刻度線一致的例子
阿新 • • 發佈:2020-05-18
不一致的情況如下圖:
修改成一致的情況如下圖:
程式碼如下:
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軸刻度線重合
效果如圖:
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軸左右刻度線一致的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。