echarts图表在Vue中双纵轴刻度不齐

我们一般都是用的动态数据，ecarts在处理纵轴数值的时候，所以在处理这些数据时会"友好"的将纵轴分段便于分析。然而在多纵轴中容易引起麻烦，因为两个的数据差异较大，导致纵轴分段数不易很难看，即使设置了splitNum,它也会在它认为好的情况下，自顾自的进行分段。

那没办法了，我只能把它写死固定分段数，我选择固定5段，因为能整除，不能整除的情况我没有试，有人试了可以来分享一下。

首先我们需要固定最大和最小值，最小值一般是0，具体需求也可以变动，那我们就需要一个函数求值。

// data1是后端传的数据数组，展开取最大值，转为字符串，再展开取第一位数字，这样来对最大值向上取整
// 如果是小数的话 let maxArr1 = Math.max(...data1).toString().split('.')[0],根据需要判断;
let maxArr1 =[...Math.max(...data1).toString()];
 
//最大位加以，乘上10的位数减一 次幂，比如3243，取得第一位 "3" ,转为数字3，加一，为4，再成10^(4-1),就取到4000，来做纵轴最大值，避免直接取dataMax,使最大那条数据一柱擎天，不好看                
let num1 = (Number(maxArr1[0])+1)* Math.pow(10,maxArr1.length-1);

//第二个纵坐标轴                  
let maxArr2 =[...Math.max(...data2).toString()];// data2是后端传的数据数组
                  
let num2 = (Number(maxArr2[0])+1)*Math.pow(10,maxArr2.length-1);// 同样操作
                 
this.option.yAxis[0].interval =num1/5;// 间隔为5份
                  
this.option.yAxis[0].max = num1; // 赋值最大值
                  
this.option.yAxis[1].interval =num2/5; // 间隔为5份
                  
this.option.yAxis[1].max = num2;// 赋值最大值

其中还遇到的问题，就是从网上查的，都是在options前设置的max,和interval，而在vue中我们的max依赖于后台传的数据，所以无法在data的return前定义，那怎么不再return前请求这个数据的，因为请求需要传的参数要从data中拿啊，在return前拿不到return中的数据我也很无奈。 

data(){
// 在这里可以定义一些全局变量，option可以直接使用，也可以通过this.数据看来获取return的数据，但不能拿到computed的数据，反正我是没拿到
return{
option8 : {
         
          grid: {
            left:50,
            right:10,
            top:'20%',
            height:'50%'
          },
          legend: {
           
          },
          xAxis: {
            data: [] ,
            silent: false,
            splitLine: {show: false},
            splitArea: {show: false},
            axisTick: {
              alignWithLabel: true 
            },
            axisLine: {
              onZero: true,
              lineStyle:{
                color:'#16707a'
              }
            },
            axisLabel:{
              // interval: 0,
              color:'#009aa1',
              margin: 15,
            },
          },
          yAxis: [
            {
              type:'value',
              name:'气温',
              max:null,
              min:0,
              interval:null,
              nameTextStyle:{
                color:'red'
              },
              axisLabel:{
                color:'blue',
                margin:15,
              },
              axisLine: {
                onZero: true,
                lineStyle:{
                  color:'green'
                }
              },
              splitLine:{
                lineStyle:{
                  color:'rgba(34,152,158,0.3)',
                  type:'dotted'
                }
              }
            },
            {
              type:'value',
              name:'水量',
              max:null,
              min:0,
              interval:null,
              nameTextStyle:{
                color:'yellow'
              },
              axisLabel:{
                color:'pink',
                margin:15,
              },
              axisLine: {
                onZero: true,
                lineStyle:{
                  color:'purple'
                }
              },
              splitLine:{
                show:false
              }
            },
          ],
          series: [
            {
              name:'气温',
              type:'bar',
              data:[],
            },
            {
              name:'水量',
              type:'line',
              yAxisIndex: 1,
              data:[]
            }
          ],
          tooltip:{}
        },

}
}

于是就直接在需要设置的时候直接设置，注意先拿到后台数据在设置。

效果：

欢迎指正错误