一开始是参照了这个链接实现echarts双y轴0刻度对齐进行的改造,但是发现放到项目里,会出现其中一个y轴刻度不显示的情况。
然后又参照了这个链接Echarts的双y轴0刻度对齐问题,这个方法也有个问题,是以0为分界线,实现0上和0下等分的情况,若值都是大于0的话,是无需0下部分的。
![](https://i-blog.csdnimg.cn/blog_migrate/f681070bd265839a3473a0a7d2c37150.png)
上面两种都不能有效解决问题,所以只能自己写了
第一步:分别找出双y轴的最大最小值
const max1 = Math.max(1, ...data1) || 1;
const min1 = Math.min(0, ...data1) || 0;
const max2 = Math.max(1, ...data2) || 1;
const min2 = Math.min(0, ...data2) || 0;
第二步:计算两组数据范围的比值(相当于比例尺)
const ratio = (max1 - min1) / (max2 - min2);
第三步:两组数据对阶,然后确定应当使用哪一组的数据作为最大值或最小值
if (max1 < max2 * ratio) {
y1Max = max2 * ratio;
y2Max = max2;
} else {
y1Max = max1;
y2Max = max1 / ratio;
}
if (min1 < min2 * ratio) {
y1Min = min1;
y2Min = min1 / ratio;
} else {
y1Min = min2 * ratio;
y2Min = min2;
}
第四步:给y轴分别设置最大最小值(乘以1.2是为了最大最小值不在顶格的位置)
yAxis: [
{
...
max: (y1Max * 1.2).toFixed(0),
min: (y1Min * 1.2).toFixed(0),
...
},
{
...
max: (y2Max * 1.2).toFixed(0),
min: (y2Min * 1.2).toFixed(0),
...
}
],
最终实现的效果图
![](https://i-blog.csdnimg.cn/blog_migrate/3fbc5355491cd08867f33170be091619.png)