ECharts 柱状图表x轴数据拥挤，可添加滑动块配置数据区域缩放

MCodeWhite

已于 2024-10-13 16:36:05 修改

阅读量1.9k

点赞数 13

文章标签： echarts 前端 javascript

于 2024-04-25 22:52:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51464657/article/details/138201606

版权

本文详细介绍了如何在ECharts图表的初始化option中添加数据区域缩放功能，包括滑块和内置模式，并提供了配置代码示例和实际效果展示。

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

在echarts初始化option中加入配置

dataZoom: [
  {
    type: 'slider', //指定数据区域缩放的类型为滑块。这意味着在图表下方会显示一个滑块，用户可以通过拖动滑块来调整数据视图的范围                   
    start: 0, //表示缩放区域的起始位置是数据的 0% 位置。
    end: 30, //表示缩放区域的结束位置是数据的 30% 位置
  },
  {
    type: 'inside', //指定数据区域缩放的类型为内置,可用鼠标滚轮缩放数据
    start: 0,
    end: 30
  }
]

配置代码：

const option = {
  title: {
    text: '产品名称'
  },
  legend: {
    data: ['产品'],
    top: 'top',
    itemStyle: {
      //color: 'red'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: this.name,
      axisLabel: {
        fontSize: 12,
        interval: 0,
        rotate: 30
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 5，
      axisLabel: {
        formatter: '{value}'
      },
      axisLine: {show: true}
    },
  ],
  series: [
    {
      name: '产品名称',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: this.brandCount
    },
  ],
  //这里配置
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 30,
    },
    {
      type: 'inside',
      start: 0,
      end: 30
    }
  ]
}

效果如下：

视频演示