We usually use dynamic data. ecarts will "friendly" segment the vertical axis for analysis when processing these data. However, it is easy to cause trouble in multi vertical axis. Because of the large difference between the two data, it is not easy to see the number of vertical axis segments. Even if split num is set, it will segment itself when it thinks it is good.

There's no way. I can only write down the fixed number of segments. I choose fixed 5 segments because I can divide and cannot divide. I didn't try it. Someone can share it if they try.

First of all, we need to fix the maximum and minimum values. The minimum value is generally 0. The specific requirements can also be changed. Then we need a function evaluation.

// data1 is an array of data passed from the back end. Expand to take the maximum value, turn it into a string, and then expand to take the first digit, so as to round up the maximum value
let maxArr1 =[...Math.max(...data1).toString()];
 
//Multiply the digit of 10 by the largest digit and reduce it to the first power, for example, 3243, get the first digit "3", turn it into the digit 3, add one, make it 4, and then make it 10 ^ (4-1), then take 4000 to make the maximum value of the vertical axis, avoid taking dataMax directly, so that the largest piece of data is a pillar of the sky, which is not good-looking                
let num1 = (Number(maxArr1[0])+1)* Math.pow(10,maxArr1.length-1);

//Second ordinate                  
let maxArr2 =[...Math.max(...data2).toString()];// data2 is an array of data passed from the back end
                  
let num2 = (Number(maxArr2[0])+1)*Math.pow(10,maxArr2.length-1);// Same operation
                 
this.option.yAxis[0].interval =num1/5;// 5 copies at intervals
                  
this.option.yAxis[0].max = num1; // Assigned maximum
                  
this.option.yAxis[1].interval =num2/5; // 5 copies at intervals
                  
this.option.yAxis[1].max = num2;// Assigned maximum

The other problems we encountered are the max and interval set in front of options. In vue, our Max depends on the data transferred in the background, so it can't be defined in front of the data return. How can we not request this data before return? Because the parameters that need to be transferred in the request need to be taken from the data, and I can't get the data in the return before return.  

data(){
// You can define some global variables here. option can be used directly or you can get the return data through this. But you can't get the calculated data. Anyway, I didn't get it
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:'air temperature',
              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:'Water volume',
              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:'air temperature',
              type:'bar',
              data:[],
            },
            {
              name:'Water volume',
              type:'line',
              yAxisIndex: 1,
              data:[]
            }
          ],
          tooltip:{}
        },

}
}

So you can set it directly when you need to set it. Pay attention to getting the background data first.

Welcome to correct mistakes