vue-echarts 双Y轴保持Y轴分割线等分

当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数据中的最大最小值,离最大或者最小值最近的整数位,最后进行等分

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值