Echarts双Y轴左右刻度不一致

根据项目需要,echarts实现双Y轴图表。因为两边数据不同,所以会出现左右Y轴刻度不一致。

增长率暂时是0,在X轴上,懒得改了。
修改之前:
左右刻度不一致
修改之后:
左右刻度一致
根据数据找出最大值,分为6份向上取整,得到的每份就是间隔。

  // dataArr1、dataArr2同series中需要传入的两个数组
  // 最大值 / 6 后向上取整=最大间隔
  // 最大间隔 * 6 = 最大值;
  let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
  let intervalY2 = Math.ceil(Math.max(...dataArr2) / 6);
  // 因为暂时没数据。可设置为 0 时默认间隔,此处为 1
  intervalY1 = intervalY1 == 0 ? 1 : intervalY1;
  intervalY2 = intervalY2 == 0 ? 1 : intervalY2;

不想Y轴的数据顶天的话可以将interval*1.5或interval+10
解决思路: 1、将interval增大, 2、将max值增大(下面代码注释)

yAxis: [
   {
       name: "增长率",
       type: "value",
       axisTick: {
           show: false,
       },
       axisLine: {
           show: false,
       },
       axisLabel: {
           formatter: "{value}%",
       },
       min: 0,
       // 不想数据=max,可手动更改interval*7 或 (interval*6)+ 20
       max: intervalY1 * 6, // 最大值
       splitNumber: 6, // 坐标轴的分割段数(预估值)
       interval: intervalY1, // 强制设置坐标轴分割间隔。
   },
   {
       name: "人数",
       type: "value",
       axisLine: {
           show: false,
       },
       axisTick: {
           show: false,
       },
       axisLabel: {
           formatter: "{value}人",
       },
       min: 0,
       // 不想数据=max,可手动更改interval*7 或 (interval*6)+ 20
       max: intervalY2 * 6,  // 最大值
       splitNumber: 6, // 坐标轴的分割段数(预估值)
       interval: intervalY2, // 强制设置坐标轴分割间隔。
   },
],
  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值