[JavaScript知识库]echarts 双y轴 刻度线出现重复

由于左右数据量或者计数方式不一致 导致左右刻度线不统一
直接写个案例
// data 1 2 3 4 为左边的数据 5是右边的数据
let data1 = [0, 7686, 11603],
data2 = [9513, 0, 5550],
data3 = [0, 0, 0],
data4 = [];
data5 = [12023, 10312, 200111.4, 21333, 1312, 10023, 5];

let Min1 = this.calMin([data1, data2, data3, data4,])，
   	 Min2 = this.calMin([data5]),
	 Max1 = this.addMax([data1, data2, data3, data4])，
	 Max2 = this.calMax([data5]);

// 计算最大值
calMax = (arr: any) => {
let max = 0;
arr.forEach((el: any) => {
if (!(el === undefined || el === ‘’ || el.length === 0)) {
el.forEach((el1: any) => {
if (!(el1 === undefined || el1 === ‘’ || el.length === 0)) {
if (max < el1) {
max = el1;
}
}
});
}
});
let maxint = Math.ceil(max / 9.5); // 不让最高的值超过最上面的刻度
let maxval = maxint * 10; // 让显示的刻度是整数
return maxval;
};

//计算最小值
calMin = (arr: any) => {
let min = 0;
arr.forEach((el: any) => {
if (!(el === undefined || el === ‘’ || el.length === 0)) {
el.forEach((el1: any) => {
if (!(el1 === undefined || el1 === ‘’ || el.length === 0)) {
if (min > el1) {
min = el1;
}
}
});
}
});
let minint = Math.floor(min / 10);
let minval = minint * 10; // 让显示的刻度是整数
return minval;
};

// 最大值相加
addMax = (arr: any) => {
let max = 0;
arr.forEach((el: any) => {
if (el.length !== 0) {
max += Math.max(…el);
}
});
let maxint = Math.floor(max / 10);
let maxval = maxint * 10; // 让显示的刻度是整数
return maxval;
};

然后在
yAxis: [
{ min: Min1,
max: Max1,
splitNumber: 5,
interval: (Max1 - Min1) / 5,},
{
min: Min2,
max: Max2,
splitNumber: 5,
interval: (Max2 - Min2) / 5 || 1,
}
]
里写 因为是双y轴数组里肯定是俩对象,默认是第一个左边 第二个右边。
这样加进去最后展示的刻度线就一致了