echarts 实现双y轴0刻度对齐

一开始是参照了这个链接实现echarts双y轴0刻度对齐进行的改造,但是发现放到项目里,会出现其中一个y轴刻度不显示的情况。

效果图:y轴没有展示

然后又参照了这个链接Echarts的双y轴0刻度对齐问题,这个方法也有个问题,是以0为分界线,实现0上和0下等分的情况,若值都是大于0的话,是无需0下部分的。

效果图:无需0下部分

上面两种都不能有效解决问题,所以只能自己写了

第一步:分别找出双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),
        ...
    }
],

最终实现的效果图

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值