双Y轴设置零点刻度统一

最新推荐文章于 2025-03-02 15:03:27 发布

aliven1

最新推荐文章于 2025-03-02 15:03:27 发布

阅读量1.5k

点赞数

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/aliven1/article/details/128557722

版权

echarts 专栏收录该内容

33 篇文章

订阅专栏

在Echarts中，当需要展示不同量程的数据时通常使用多个Y轴。为了确保数据对比的准确性，文章提供了一个方法来同步这些轴的刻度。通过设置每个Y轴的max和min，计算它们的绝对最大值并乘以1.2以预留一些空间，然后使用ceil和floor函数确保刻度的一致性。

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

在这里插入图片描述

echarts中通常用多个Y轴来表示不同量程的相关数据，由于量程不同数据不一致多个坐标的刻度也会有所不同，但根据用户需求，有时需要将两个刻度保持一致方便数据展示，具体实现方法如下：

//此处为简略方法，多y轴都加上max和min配置
 yAxis:[
 {
    max: value => {
          const {max, min} = value;
          const absMax = Math.max(Math.abs(max), Math.abs(min));
          return Math.ceil(absMax * 1.2);
      },
    min: value => {
          const {max, min} = value;
          const absMax = Math.max(Math.abs(max), Math.abs(min));
          return Math.floor(-absMax * 1.2);
      }
 }
 ]