echarts横向柱状图滚动

你可以使用 echarts 中的 dataZoom 组件来实现横向柱状图的滚动效果。首先，确保你已经引入了 echarts 库。

接下来，你可以按照以下步骤进行操作：

1. 创建一个容器元素，用于放置你的图表。

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

2. 在 JavaScript 中，初始化 echarts 实例，并指定容器元素。

var chart = echarts.init(document.getElementById('chartContainer'));

3. 定义你需要展示的数据。

var data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
  // 其他数据...
];

4. 创建一个横向柱状图的配置对象。

var option = {
  xAxis: {
    type: 'value',
    max: // 设置横轴最大值，根据你的数据进行调整
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name)
  },
  series: [{
    type: 'bar',
    data: data.map(item => item.value),
    barWidth: 20 // 设置柱状图的宽度
  }],
  dataZoom: [{
    type: 'slider', // 使用滑动条进行缩放
    orient: 'horizontal', // 设置为横向滚动
    start: 0, // 默认显示的初始范围的起始位置
    end: 6 // 默认显示的初始范围的结束位置
  }]
};

在以上代码中，`start` 和 `end` 可以根据你的需求进行调整。

5. 将配置对象应用到图表中，并渲染图表。

chart.setOption(option);

现在，你的横向柱状图就可以进行滚动了。可以通过拖动滑动条来查看更多的数据。