有的时候，我们会遇到这种情况，图表显示的数据中格式或数值相关较大，无法在一个Y轴上直观显示出来，这时候就要用到双Y轴，将数据根据不同情况区分展示。
比如数据结果集中有数量和百分比，如果在同一个Y轴上显示，百分比对应的指标将一直在贴近X轴的地方显示，无法直观看到该指标的变化趋势，这时候可以在右侧增加一个Y轴，用来标识百分比，这样该指标曲线更直观。
- 增加一个Y坐标
yAxis: [
{
type: 'value',
name: '用例数(个)'
},
{
type: 'value',
name: '百分比（%）'
}
]
- 指定 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轴。
-
这时候执行一下，可以看到已经有两个Y轴进行显示了，且指定的两个指标是根据右侧的Y轴统计数据的。
image.png
由于两个Y坐标的刻度不一样，看上去会比较凌乱，需要处理两边刻度保持一致。
- 方案思路：求数据的最大最小值，计算出合适的刻度值，使两边保持一致
//计算最大值
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;
}
- 分别取两边的Y轴对应的最大最小值
// 分别取两边的Y轴对应数组中的最大最小值
Max1 = getMax(totalCaseCount, executeCaseCount, successCaseCount);
Min1 = getMin(totalCaseCount, executeCaseCount, successCaseCount);
Max2 = getMax(executionRate, passRate);
Min2 = getMin(executionRate, passRate);
- 设置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
}
]
-
效果图
image.png
