vue动态计算ECharts图形双Y轴的值

为什么会有这个插件

最近在做项目的时候使用了ECharts图表，其中有一个图是双柱形图，需要有两个Y轴。
那么问题就来了，ECharts自适应的Y轴最大值，很有可能导致左右两边Y轴值的个数不同。
例如我左边的纵坐标值为[0,10,20,30,...,70]总共8个,但是我右边Y轴的值可能是[0,1,2,3,4,5,6]总共7个
这样我的图表展示的纵坐标值就对应不上了，左边纵坐标的个数会比右边多一个。如果间距小差距不会很明显。
如果图表的纵向间距很大的话，差距就会很明显了。为了解决这一问题，使图表更美观，左右两边纵坐标的值始终相互对应，
便有了这个方法，自己动态的计算纵坐标的值，不使用ECharts自适应的。具体操作如下。
（有觉得我问题描述还不太懂的同学，请自己多测试一些双柱形图。主要是这个作者还没学会怎么在这贴效果图T^T）

操作步骤

npm i cfx-count-yaxis

在main.js引入

import countYaxis from "cfx-count-yaxis"
Vue.use(countYaxis)

在需要使用的地方调用$countYAxis(参数一，参数二)

  export default {
    name: "home",
    data(){
      return{
        maxNum:'',
      }
    },
    created(){
      //注意这里传的两个参数是你两个数据分别的最大值
      //因为是双Y轴的图表，那么数据也应该是有两组，两组中各自选择一个最大的值传入这个方法
      this.maxNum  = this.$countYAxis(100.9776565,12)
      console.log(this.maxNum)
    },
  };

返回的值

返回的值是一个对象
例如上述例子的返回值是:
{ leftMax : 110 , rightMax : 20 }
leftMax指的是左边Y轴的最大值
rightMax指的是右边Y轴的最大值

拿到了这两个纵坐标的最大值怎么在图表使用呢？

• 把左右轴的最大值分别赋值给图表的左右纵坐标ECharts配置项 yAxis.max
• 例如 this.AXIS_OPTION.yAxis.max = leftMax (AXIS_OPTION 是我自定义的图表配置项的对象名字，这里不多说了，我这默认大家都会了，不会的请点这EChart教程。vue项目推荐使用Vue-ECharts)。
• 使用 yAxis.interval 强制设置坐标轴分割间隔
• 例如 this.AXIS_OPTION.yAxis.interval = leftMax / 5 （这里是强制Y轴只分成五个间隔）

git地址

地址 我太懒了稍后再补上，不接受反驳，别问，问就是太懒了还在补的路上

英文版：别问为啥没得，问就是作者四级都没过。