The inconsistencies are shown below:
Modified to be consistent as shown below:
The code is as follows:
yAxis : [ { type : 'value', name : 'Number of people', //splitLine:{show:false}, axisLabel : { formatter: '{value} classifier for individual things or people, general, catch-all classifier', textStyle:{color: '#A23400'}//#A23400 purple }, axisLine:{ lineStyle:{color:'#A23400',width:'1'} // y-axis axis color #A23400 black } }, { type : 'value', name : 'Number of visits', //splitLine:{show:false}, axisLabel : { formatter: qfamtter, textStyle:{color: '#00AEAE'}//#00AEAE blue }, axisLine:{ lineStyle:{color:'#00AEAE',width:'1'} //y-axis axis color #00AEAE black }, min: 0, max: Max2*2, splitNumber: 6, interval: (Max2*2 - 0) / 6 }
Which needs to be added:
min: 0, max: Max2*2, splitNumber: 6, interval: (Max2*2 - 0) / 6
The left Y-axis is divided into 6 segments by default, so you need to divide the right Y-axis into 6 segments as well.
BONUS: jquery array to get the maximum value and the most value of the method, just for reference
// Calculate the maximum value function cal_Max(a) { //debugger a=$.grep(a,function(n,i){return i>0;}); var maxval = (null, a); return maxval; } // Calculate the minimum value function calMin(a) { a=$.grep(a,function(n,i){return i>0;}); var minval = (null, a) return minval; }
Additional knowledge:echarts Two y-axis display line charts and make the two y-axis scales overlap
The effect is shown in the picture:
y-axis scales do not coincide with the case:
The code is as follows, the specific data processing will not be shown one by one, just look at the drawing part:
drawGraphChart() { // The specific data format can be found in: /examples/?c=multiple-y-axis // Handle the maximum of the two y-axes => To make the scales of the two y-axes coincide perfectly // After taking the maximum data from the left and right y-axis, we rounded them up to the final y-axis value to make sure that both values are divisible by 10. const maxY1 = parseInt(((...maxData1) + 2000) / 1000) * 1000 const maxY2 = parseInt(((...maxData2) + 10) / 10) * 10 = this.$(('drawChart')) // var color = ['#d14a61', '#5793f3'], // This color corresponds to the color of the y-axis, so if you draw fewer curves, you can directly use the two colors to distinguish which axis scale the line is drawn according to const option = { title: { left: 20, text: 'Trend charts' }, xAxis: { type: 'category', // boundaryGap: false, // data completely fills the x-axis data: // x-axis time }, legend: { type: 'scroll', right: 120, top: 0, left: '65%', bottom: 0, data: legendTankNum // Legend }, grid: { left: '6%', right: '6%', top: '14%' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, yAxis: [ { type: 'value', name: 'Volume', min: 0, max: maxY1, // Maximum left y-axis value // The scales of the two y-axes must be divisible by the same number in order to coincide. interval: (maxY1 / 10), // Spacing is divided into 10 equal parts position: 'left', // y-axis on the left // The color of the y-axis and the color of the curve drawn on the y-axis scale. // axisLine: { // lineStyle: { // color: color[0] // } // }, axisLabel: { formatter: '{value} L' } }, { type: 'value', name: 'Temperature', min: 0, max: maxY2, // Maximum right y-axis value interval: (maxY2 / 10), // Spacing is divided into 10 equal parts position: 'right', // y-axis on the right // 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 Graph data is not overlaid (option, true) }
The above example of this realization of the ECharts dual Y-axis left and right scales consistent is all that I have shared with you, I hope to be able to give you a reference, and I hope you will support me more.