echarts图表中Y(y)轴间距固定，等间距，刻度固定，设置最大值、最小值

最新推荐文章于 2025-03-31 19:22:02 发布

Э时间行者于我

最新推荐文章于 2025-03-31 19:22:02 发布

阅读量1.9w

点赞数 3

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_45094682/article/details/132181303

版权

echarts 专栏收录该内容

18 篇文章

订阅专栏

本文讲述了在ECharts图表中如何正确设置Y轴的间距（如2.5,5,7.5,10,12.5），刻度固定以及指定最大值和最小值。特别强调了使用`interval`属性而非仅依赖`min`和`max`，以及如何通过`boundaryGap`和自定义`axisLabel`实现间距固定和标签显示控制。

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

echarts图表中Y(y)轴间距固定，等间距，刻度固定，设置最大值、最小值
echarts

正确的写法`interval: 2.5`指定刻度间隔,我的间距`2.5 、5、7.5、10、12.5`,所以需要改成这种。如果你是

yAxis: {
   name: '退款率%',
   type: 'value',
   min: 2.5,
   max: 12.5,
   interval: 2.5 // 指定刻度间隔
 },

如果你是从最小0开始，到最大值100，间距为20，则可以设置成以下写法

yAxis: {
   name: '退款率%',
   type: 'value',
   min: 0,
   max: 100,
   interval: 20 // 指定刻度间隔
 },

以下是我刚开始的写法，是错误写法哦。

以为设置最小值和最大值就可以了，但其实不然。

yAxis: {
  name: '退款率%',
  type: 'value',
  min: 2.5,
  max: 12.5
},

后面查完之后又改成这种的，但也不对,注意这是不对的，避免踩坑

yAxis: {
  name: '退款率%',
  type: 'value',
  min: 2.5,
  max: 12.5,
  boundaryGap: [0, 0.01],
  axisTick: {
    show: true, // 显示刻度
    interval: 2.5 // 指定刻度间隔
  },
  axisLabel: {
    formatter: function(value, index) {
      // 自定义标签的显示格式
      if (value === 2.5 || value === 5 || value === 7.5 || value === 10 || value === 12.5) {
        return value.toFixed(1); // 只显示指定的刻度值，保留一位小数
      } else {
        return ''; // 非指定刻度值不显示标签
      }
    }
  }
}