参考地址:https://blog.csdn.net/qq_40845885/article/details/82108525
问题:双Y轴,刻度不一样,会出现两边的Y轴线不在同一刻度上,类似下图
解决思路:求数据的最大最小值,计算出合适的刻度值,两边保持一致
1、计算最大最小值得函数
//计算最大值
function calMax(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 calMin(arr) {
let min = Math.min(...arr);
let minint = Math.floor(min / 10);
let minval = minint * 10;//让显示的刻度是整数
return minval;
}
2、取最大最小值
// currentData是我的两组数据(柱状图和折线图)
let Max1,Min1,Max2,Min2;
if(currentData){
Max1 = calMax(currentData.value[0]);
Min1 = calMin(currentData.value[0]);
Max2 = calMax(currentData.value[1]);
Min2 = calMin(currentData.value[1]);
}
3、设置Y轴
yAxis: [
{
name: "单位:(人)",
type: 'value',
min:Min1,
max:Max1,
splitNumber: 5,
interval: (Max1 - Min1) / 5
},
{
type: 'value',
min:Min2,
max:Max2,
splitNumber: 5,
interval: (Max2 - Min2) / 5
}
],
4、效果图
(由于折线图数据为0,所以图中折线效果不明显,实际是没啥问题)