echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题

echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题

1、遇到的问题

双Y轴刻度不对齐以及x轴不在底部问题

2、解决方法

1）解决x轴线不在底部问题

在axisLine里面设置onZero属性

2）解决对齐问题

问题描述：

1、这里已经强制设置了min max 以及interval为5但是人不对齐
发现是最大值和倒数第二个值间隔不均匀导致的
所以这里的max要通过计算来获取
2、这里柱子对应左侧y轴 两条折线对应右侧y轴
所以这里要求出两条折线的最大值和最小值进而比较出最终的最小值和最大值

解决方案

上代码

for(let i = 0; i < rs8.length;i++){
                xData.push(rs8[i].NAME);
                yData1.push(rs8[i].DATA1);
                yData2.push(rs8[i].DATA5);
                yData3.push(rs8[i].DATA6);
            }
            
            ymin1 = Math.min(...yData1);  
            yMax1 = Math.max(...yData1);                   
            interval1 = Math.ceil((yMax1 - ymin1)/5);

            var y2 = Math.max(...yData2);
            var y3 = Math.max(...yData3);
            var y22 = Math.min(...yData2);
            var y33 = Math.min(...yData3);
            yMax2 = Math.max(...[y2,y3]);
            ymin2 = Math.min(...[y22,y33]);           
            interval2 = Math.ceil((yMax2 - ymin2)/5);

            yMax11 = ymin1 + interval1*5;
            yMax22 = ymin2 + interval2*5;
            barLineOption.xAxis[0].data = xData;
            barLineOption.yAxis[0].min = ymin1;
            barLineOption.yAxis[0].max = yMax11;
            barLineOption.yAxis[0].interval = interval1;

            barLineOption.yAxis[1].min = ymin2;
            barLineOption.yAxis[1].max = yMax22;
            barLineOption.yAxis[1].interval = interval2;

这里的yMax11 和yMax22是通过计算获取的

最终效果

最终解决了 但是代码看着很杂乱 也没有想到别的解决方法 如果有小伙伴看到然后还有更好的解决方法 可以告知一下哦。