百度图表echarts双Y轴时，如何让左右两边刻度保持一致

如下图，左右两边的Y轴线不在同一刻度上。

充电费及服务费堆积图.png

1.计算出Y轴左右两边最大值Max1与Max2

let spaceNum = 10; //间隔数（刻度）
function calMax(arr) {
    //计算最大值
    let maxA = Math.max(...arr); // 最大值A
    let maxint = Math.ceil(maxA / spaceNum); //最大平均值（向上取整）= 最大值A / 间隔数
    let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数  （注：最大值B>最大值A）
    return Math.max(maxB, 10); // 为了防止maxB数据为0时，Y轴不显示，给个默认最大值10
}
let Max1, Max2;
Max1 = calMax([40,60,30,30,30]);
Max2 = calMax([0.2,0.12,0.18,0.8,0.28]);

2.设置Y轴

yAxis: [
    {
        name: '费用（单位：万元）',
        type: 'value',
        min: 0,
        max: 0,
        interval: 0,
        axisLabel: {
            //formatter: '{value} 万元'
        }
    },
    {
        type: 'value',
        name: '环比上升率%',
        min: 0,
        max: 0,
        interval: 0,
        axisLabel: {
            //formatter: '{value} %'
        }
    }
]

yAxis[0].max = Max1;//设置左侧最大值
yAxis[1].max = Max2;//设置右侧最大值

//注：左右Y轴的最大值，必须同时平均N（10）份，才能保持刻度在同一水平线上
yAxis[0].interval = Max1 / spaceNum;//设置左侧刻度间隔距离，平均为10份
yAxis[1].interval = Max2 / spaceNum;//设置右侧刻度间隔距离，平均为10份

//另一种更加完善的写法（推荐）
yAxis: [
  {
    type: "value",
    name: "用量",
    splitLine: { show: true, lineStyle: { color: "#003a87" } },
    nameTextStyle: {
      color: "#a4a7aa",
      fontSize: "0.12rem",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#003a87",
      },
    },
    axisLabel: {
      color: "#a4a7aa",
      fontSize: "0.12rem",
    },
    //下面才是左右刻度等分的核心代码（interval、min、max）
    interval: 100,
    min: (value) => value.min > 0 ? 0 : value.min,
    max: (value) => {
      //刻度分割成5等份。注意：yAxis[0]下标，vue2的箭头函数的this指向实例（vue3语法不是用this）
      let { max, min } = value;
      if (min < 0) max = max - min;
      let interval = Math.ceil(max / 5); //向上取整(五分之一)
      if (interval != this.option.yAxis[0].interval) {
        //没这个条件，会进入死循环
        this.option.yAxis[0].interval = interval;
      }
      return min < 0 ? interval * 5 + min : interval * 5;
    },
  },
  {
    type: "value",
    name: "环比",
    splitLine: { show: true, lineStyle: { color: "#003a87" } },
    nameTextStyle: {
      color: "#a4a7aa",
      fontSize: "0.12rem",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#003a87",
      },
    },
    axisLabel: {
      color: "#a4a7aa",
      fontSize: "0.12rem",
    },
    //下面才是左右刻度等分的核心代码（interval、min、max）
    interval: 100,
    min: (value) => value.min > 0 ? 0 : value.min,
    max: (value) => {
      //刻度分割成5等份。注意：yAxis[1]下标，vue2的箭头函数的this指向实例（vue3语法不是用this）
      let { max, min } = value;
      if (min < 0) max = max - min;
      let interval = Math.ceil(max / 5); //向上取整(五分之一)
      if (interval != this.option.yAxis[1].interval) {
        //没这个条件，会进入死循环
        this.option.yAxis[1].interval = interval;
        //this.option.dataZoom.start = this.$refs.JEcharts.myChart.getOption().dataZoom[0].start; //Vue解决修改yAxis后dataZoom位置重置的问题
      }
      return min < 0 ? interval * 5 + min : interval * 5;
    },
  },
],

修改后效果图如下：

充电费及服务费堆积图.png

上面的代码也稍有不足的地方：如果一个数组，所有值都小于1，Y轴刻度将为最大值10【Math.max(maxB, 10)】，这样数据就展示就不够明显。代码可以根据业务自己再优化，上面的代码兼容到小1的情况，逻辑就会稍复杂些。