Solve the misalignment problem of dual coordinate axis segmentation in Echarts

1. Processing function

/**
 * @Description 刻度最大值
 * @date 2023-08-30
 * @param {any} isNaN(maxValue/1
 * @returns {any}
 */
export const getYAxisMax = (maxValue): number => {
  if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
    return 10;
  }
  const max: any = Math.ceil(maxValue) + '';
  const itemValue: any = Math.ceil(max / 5) + '';
  const mins = Math.ceil(itemValue / Math.pow(10, itemValue.length - 1));
  const item: any = mins * Math.pow(10, itemValue.length - 1) + '';
  // item 需要是5的整数倍
  const res = Math.ceil(item / 5) * 5 * 5;
  return res;
};

2. Complete options

export const getOption= (chartData) => {
  const color: string[] = ['#C1EEFC', '#92B8E5', '#2AB84A'];
  const intervalMax = getYAxisMax(Math.max.apply(null, chartData.oKCellCountData));

  return {
    color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: ['总电芯', 'OK电芯数', '工序良率'],
      icon: 'circle',
    },
    grid: {
      left: '5%',
      right: '5%',
      top: 50,
      bottom: 40,
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.xAxisData,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          rotate: 20, // 顺时针旋转 30 度
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量（个）',
        // min: 0,
        // max: 250,
        axisLabel: {
          formatter: '{value}',
        },
        interval: intervalMax / 5,
        max: intervalMax,
      },
      {
        type: 'value',
        name: '良率（%）',
        min: 0,
        max: 100,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '总电芯',
        type: 'bar',
        barWidth: 12, // 设置柱子的宽度
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置单个数值
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + '个';
          },
        },
        data: chartData.totalCellsData,
      },
      {
        name: 'OK电芯数',
        type: 'bar',
        barWidth: 12, // 设置柱子的宽度
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置单个数值
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + '个';
          },
        },
        data: chartData.oKCellCountData,
      },
      {
        name: '工序良率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          },
        },
        data: chartData.processYieldData,
      },
    ],
  };
};