Echats 绘制双Y轴且两边刻度保持一致

有的时候，我们会遇到这种情况，图表显示的数据中格式或数值相关较大，无法在一个Y轴上直观显示出来，这时候就要用到双Y轴，将数据根据不同情况区分展示。
比如数据结果集中有数量和百分比，如果在同一个Y轴上显示，百分比对应的指标将一直在贴近X轴的地方显示，无法直观看到该指标的变化趋势，这时候可以在右侧增加一个Y轴，用来标识百分比，这样该指标曲线更直观。

1. 增加一个Y坐标

yAxis: [
        {
            type: 'value',
            name: '用例数(个)'
        },
        {
            type: 'value',
            name: '百分比（%）'
        }
]

2. 指定 series 下的项对应哪一个Y轴，不指定时默认是第1个Y轴，即 yAxisIndex=0

series: [
                {
                    name: '总用例数',
                    type: 'line',
                    data: totalCaseCount
                },
                {
                    name: '实际执行用例数',
                    type: 'line',
                    data: executeCaseCount
                },
                {
                    name: '执行通过用例数',
                    type: 'line',
                    data: successCaseCount
                },
                {
                    name: '用例执行率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: executionRate
                },
                {
                    name: '用例通过率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: passRate
                }
            ]

yAxisIndex: 1 表示对应第2个Y轴。

3. 这时候执行一下，可以看到已经有两个Y轴进行显示了，且指定的两个指标是根据右侧的Y轴统计数据的。

   
   image.png
   

   由于两个Y坐标的刻度不一样，看上去会比较凌乱，需要处理两边刻度保持一致。

4. 方案思路：求数据的最大最小值，计算出合适的刻度值，使两边保持一致

//计算最大值
    function getMax(arr) {
        let max = Math.max(...arr);
        let maxint = Math.ceil(max / 9.5); // 不让最高的值超过最上面的刻度
        let maxval = maxint * 10; // 让显示的刻度是整数
        
        // 为了防止数据为0时，Y轴不显示，给个最大值
        if(maxval == 0){ maxval = 1 } 
        return maxval;
    }
 
    //计算最小值
    function getMin(arr) {
        let min = Math.min(...arr);
        let minint = Math.floor(min / 10);
        let minval = minint * 10;//让显示的刻度是整数
        return minval;
    }

5. 分别取两边的Y轴对应的最大最小值

 // 分别取两边的Y轴对应数组中的最大最小值
Max1 = getMax(totalCaseCount, executeCaseCount, successCaseCount);
Min1 = getMin(totalCaseCount, executeCaseCount, successCaseCount);
Max2 = getMax(executionRate, passRate);
Min2 = getMin(executionRate, passRate);

6. 设置Y轴刻度比例，需要设置min、max、splitNumber（分割段数）、interval（分割间隔）

yAxis: [
  {
    type: 'value',
    name: '用例数(个)',
    min:    Min1,
    max:    Max1,
    splitNumber: 5,
    interval: (Max1 - Min1) / 5
  },
  {
    type: 'value',
    name: '百分比（%）',
    min:   Min2,
    max:   Max2,
    splitNumber: 5,
    interval: (Max2 - Min2) / 5
  }
]

7. 效果图

   
   image.png