不一緻的情況如下圖：bzp免費資源網
bzp免費資源網
修改成一緻的情況如下圖：bzp免費資源網
bzp免費資源網
代碼如下：bzp免費資源網
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 : '人次',
//splitLine:{show:false},
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
}
其中需要加：bzp免費資源網
min: 0,
max: Max2*2,
splitNumber: 6,
interval: (Max2*2 - 0) / 6
左邊Y軸預設了分成6段，是以要把右邊Y軸也分成6段。bzp免費資源網
附加：jquery 數組擷取最大值和最值的方法，僅供參考bzp免費資源網
//計算最大值
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,function(n,i){return i>0;});
var minval = Math.min.apply(null, a)
return minval;
}
補充知識：echarts 兩個y軸展示折線圖，并使兩個y軸刻度線重合bzp免費資源網
效果如圖：bzp免費資源網
bzp免費資源網
y軸刻度不重合情況：bzp免費資源網
bzp免費資源網
代碼如下，具體的資料處理就不再一一展示，隻看畫圖部分：bzp免費資源網
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: '體積',
min: 0,
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: '溫度',
min: 0,
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,0···]}
series: allRealData
}
// true 圖資料不疊加
this.myChart.setOption(option, true)
}