echarts 实现双y轴刻度对齐

需求：需要做一个图标，左右两侧各一个y轴。不确定刻度最大值，拿到数据时动态计算

当echarts做成双y轴，不做处理时，会出现刻度不均匀，如下图

处理后如图

解决方案： 步骤一：确定等分数SPLIT_NUMBER

const SPLIT_NUMBER=7

步骤二：获取数据中的最大值max，找到大于或等于max的并且能整除SPLIT_NUMBER数用于设置y轴的max。

/**
 *
 * @param { number } num1 数据中的最大值
 * @param { number } num2 等分数
 */
function getMax(num1, num2){
  if (!num1 || !num2) {
    return 0;
  }
  num1 = Math.ceil(num1);
  num2 = Math.ceil(num2);

  if (num1 % num2 === 0) {
    return num1;
  }

  for (let i = num1; ; i++) {
    if (i % num2 === 0) {
      return i;
    }
  }
};

步骤三：设置每一份间距：distance=第二步中找到的数/SPLIT_NUMBER

完整代码

function getMax(num1, num2){
  if (!num1 || !num2) {
    return 0;
  }
  num1 = Math.ceil(num1);
  num2 = Math.ceil(num2);

  if (num1 % num2 === 0) {
    return num1;
  }

  for (let i = num1; ; i++) {
    if (i % num2 === 0) {
      return i;
    }
  }
};
// 分成几等分
const SPLIT_NUMBER=7

function run() {
      // 需要动态计算最大值
    let leftArr = [5,50,60,2,80,111];
    let rightArr = [120,56,30,54,78,10];

    const leftMaxVal = getMax(Number(Math.max(...leftArr) || 100), SPLIT_NUMBER);

    let distanceLeft = leftMaxVal / SPLIT_NUMBER;

    const rightMaxVal = getMax(
      Number(Math.max(...rightArr) || 100),
      SPLIT_NUMBER,
    );
    let distanceRight = rightMaxVal / SPLIT_NUMBER;
  option = {
      title: {
        text: '双y轴',
      },
      color: ['#3960f4', '#faa101'],
      legend: {
        data: ['y1', 'y2'],
        right: '15%',
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: [
        {
          type: 'value',
          id: 0,
          splitNumber: SPLIT_NUMBER,
          interval: distanceLeft,
          min: 0,
          max: leftMaxVal,
        },
        {
          nameLocation: 'end',
          type: 'value',
          splitNumber: SPLIT_NUMBER,
          interval: distanceRight,
          id: 1,
          min: 0,
          max: rightMaxVal,
        },
      ],
      series: [
        {
          name: 'y1',
          barMaxWidth: 25, //柱状图的宽度
          yAxisIndex: 0, //对应y轴的那一组坐标
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
          type: 'bar',
          data:leftArr
        },
        {
          name: 'y2',
          yAxisIndex: 1,
          type: 'line',
          data:rightArr
        },
      ],
    };
  myChart.setOption(option);
}