VUE ECharts 自定义Y轴刻度数据间隔简单实现（二）

最新推荐文章于 2024-01-16 15:54:45 发布

Aku_2020

最新推荐文章于 2024-01-16 15:54:45 发布

阅读量3.1k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Aku_2020/article/details/126040032

版权

本文介绍如何在Vue项目中使用ECharts自定义Y轴的刻度数据间隔，通过设置max、min和interval属性，轻松调整Y轴的显示效果。

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

依靠对yAxis设置 max/最大值、min/设置最小值、interval/刻度间距来实现

实现效果：

实现代码为：

//数据
const emailData = [44,43,49,50,50,51,50,60,45,50,48,53];
const xzhou = ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  legend: {
    data: ['Email']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
      type: 'category',
      // boundaryGap: false, // 控制两边儿是否留白
      data: xzhou,
      splitLine:{ //坐标轴刻度相关设置。
        show :true,
      },
  }],
  yAxis: [{
      type: 'value',
      axisLine:{//坐标轴轴线相关设置
        s

最低0.47元/天解锁文章