博客

当echart有两个Y轴时，会出现数据不同时，Y轴出现不对称分割的情况，如下图

而我们要实现的效果为：

双Y轴的时候，数据不一样也能实现等分切割线的样式

具体实现代码如下

//使用的是基于简单封装过的echart文件，因为
//在setOption，初始化绘制图表时，接收外部传入的option。基于这个option来自定义name
 
this.myChart.setOption(this.setgraphic(option)) 
 
 
setgraphic(obj){
      if (Array.isArray(obj.yAxis)) {
        obj.yAxis.forEach((res, index) => {
            //有两条Y轴的时候才需要等分
          if (obj.yAxis.length > 1) {
            res.max = (val) => {
              if (val.max) {
                return this.formatNumber(val.max)
              }
            }
            res.min = (val) => {
              if (val.min) {
                return val.min < 0 ? this.formatNumber(val.min) : 0
              }
            }
            //适配用dataset的方式渲染数据
            if (obj.hasOwnProperty('dataset')) {
              this.sameKeyList(obj)
            }
            // 左侧的Y轴有着yAxisIndex为1而Y轴最多有两条
            // index为0时，则为bar类型
            let barData = obj.series.filter((e) => {
              if (index == 0 ? !e.yAxisIndex : e.yAxisIndex) {
                return e.data ? e.data : e.dataSeries
              }
            })
            //处理成5等分
            res.interval =
              this.formatNumber(
                Math.max(
                  ...barData.map((item) =>
                    Math.max(...(item.data ? item.data : item.dataSeries))
                  )
                )
              ) / 5
          }
        })
      }
    return obj
}
//找到离最大或者最小值最近的整数
formatNumber(num) {
      num = Math.floor(num)
      if (num > -10 && num < 10) {
        return 10
      } else {
        const sign = num < 0 ? -1 : 1
        const absNum = Math.abs(num)
        const firstDigit = Number(String(absNum)[0])
        return (
          sign *
          Number(`${firstDigit + 1}0${'0'.repeat(String(absNum).length - 2)}`)
        )
      }
    },
   
  sameKeyList(data) {
      data.dataset.dimensions.forEach((e) => {
        let arr = []
        data.dataset.source.forEach((i) => {
          arr.push(i[e])
        })
        let index = data.series.findIndex((item) => {
          return item.name == e
        })
        if (index > -1) {
          data.series[index].dataSeries = arr
        }
      })
      //  const keys = Object.keys(data.v);
    },

处理的具体思路是为，先找到当前echart数据中的最大最小值，离最大或者最小值最近的整数位，最后进行等分