echarts中双y轴刻度线对齐的问题

最新推荐文章于 2024-07-08 17:44:16 发布

原创最新推荐文章于 2024-07-08 17:44:16 发布 · 5.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在Echarts中处理双Y轴刻度线对齐的问题，关键在于设置splitNumber保持段数一致，确保max值大于等于数据最大值，并通过interval强制设定坐标轴分割间隔，以实现刻度线的比例平衡，从而达到对齐效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

splitNumber设置分割的段数，必须一致
设置的max一定是大于或等于数据最大值，计算找出数据中最大值向上取整
interval强制设置坐标轴分割间隔，控制两边刻度比例一样才能保持刻度线对齐

// consumption 和 throughputList 是API返回的数据
yAxis: [{
        // name: '左轴',
        type: 'value',
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.ceil(Math.max(...consumption)) / 5),
        max:Math.ceil(Math.ceil(Math.max(...consumption)) / 5) * 5,
        splitLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      {
        // name: '右轴',
        type: 'value',
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.ceil(Math.max(...throughputList)) / 5),
        max: Math.ceil(Math.ceil(Math.max(...throughputList)) / 5) * 5,
        splitLine: {
          lineStyle: {
            color: '#ccc'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#000'
          }
        }
      }
    ],

如图所示
在这里插入图片描述