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

在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
    }
  ]
}

效果如下： 

视频演示