SoFunction
Updated on 2024-12-19

Example of realizing consistent left and right tick marks on the dual Y-axis of ECharts

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.