echarts双y轴对齐

前提概要：之前写过计算方式，对一手数据进行计算得出间隔数，然后确定max,min,interval，但是一旦包含加上markline，stack，yAxisIndex等影响，就会很麻烦，而且数据正负值，0-1之内小数等实在计算太过麻烦，于是直接准备在echart自身计算出的间隔，最大值，最小值的基础上进行二次更新，应该适用于很多场景，不过不确定性能的影响

说明：先自行调initChart，然后再调用reDraw

initChart () {
	// 这里按你的来
    this.chart = this.$echarts.init(this.$refs.hcLineBarChart)
    let option= {...}
    this.chart.setOption(option, true)
    // 如果有两个y轴
    if (hasTwoY) { this.reDraw() }
},

// 保证双y轴对齐
 reDraw() {
    const option = this.chart.getOption()
    const splitInfo = option.yAxis.reduce((pre, next, index) => {
      // 在setOption之后，执行以下代码
      // 获取y轴刻度最值
      const y = this.chart.getModel().getComponent('yAxis', index).axis.scale._extent
      // 当前y轴刻度最小值
      const currentMin = y[0]
      // 当前y轴刻度最大值
      const currentMax = y[1]
      // y轴间隔
      const yInterVal = this.chart.getModel().getComponent('yAxis', index).axis.scale._interval
      const distance = currentMax - currentMin
      const splitNumber = (distance) / yInterVal
      // 第一个y轴存在值
      if (index === 0 && splitNumber !== 0) {
        pre.splitNumber = splitNumber
      	// 第一个轴存在值，且第二个轴也存在值，且两个轴的分隔数不同
      } else if (pre.splitNumber !== 0 && splitNumber !== 0 && splitNumber !== pre.splitNumber) {
        // 需要修改第二个轴，然后进行重绘
        pre.needRedraw = true
        // 以第一个轴的间隔数为标准，对第二个轴添加修改
        const maxNum = Math.ceil(splitNumber / pre.splitNumber) * yInterVal * pre.splitNumber
        next.min = currentMin
        next.max = maxNum   currentMin
        next.interval = Math.ceil(splitNumber / pre.splitNumber) * yInterVal
        }
        return pre
    }, { splitNumber: 0, needRedraw: false })
    // 需要重绘
    if (splitInfo.needRedraw) {
      this.chart.setOption(option, true)
    }

这篇好文章是转载于：学新通技术网