Echarts double Y-axis left and right splitLine dividing line can not overlap double Y-axis keep Y-axis dividing line equal

option = {
  xAxis: {
    type: 'category',
    axisLabel: {
      rotate: '45'
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value'
    }
  ],
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [500, 200, 260, 150, 160, 80, 160],
      type: 'line',
      yAxisIndex: 1,
    }
  ]
};

As shown in the above code below, the left and right dividing lines of the double Y axis do not coincide:

 Solution:

Add min (minimum value of coordinate axis scale), max (maximum value of coordinate axis scale), and interval (mandatory setting of coordinate axis division interval) attributes to yAxis. Calculate the maximum value and minimum value according to the value and round it up. If the value is large, it can be rounded up to a hundred or a thousand. By default, it is divided into 5 parts. code show as below:

let data1 = [150, 230, 224, 218, 135, 147, 260];
let data2 = [465, 200, 260, 151, 160, 80, 160];
let min1 = 0,
  max1 = 100,
  min2 = 0,
  max2 = 100;
max1 = Math.ceil(Math.max.apply(null, data1) / 10) * 10; // 最大值向上取整十位数
max2 = Math.ceil(Math.max.apply(null, data2) / 10) * 10; // 最大值向上取整十位数
option = {
  ......
  yAxis: [
    {
      min: min1,
      max: max1,
      interval: (max1 - min1) / 5,
      minInterval: 1, // 自动计算的坐标轴最小间隔大小 设置成1保证坐标轴分割刻度显示成整数
      type: 'value'
    },
    {
      min: min2,
      max: max2,
      interval: (max2 - min2) / 5,
      type: 'value'
    }
  ],
  series: [
    {
      data: data1,
      type: 'line'
    },
    {
      data: data2,
      type: 'line',
      yAxisIndex: 1
    }
  ]
};

Effect: