echarts柱形图设置数据交互

要设置数据交互，可以使用 echarts 的 dataZoom 组件和 tooltip 组件。

首先，需要在 echarts 的 option 中配置 dataZoom 组件。例如：

option = {
  ...
  dataZoom: {
    type: 'slider',
    start: 0,
    end: 100
  },
  ...
}

这会在图表下方添加一个滑块，用于缩放数据。

接下来，需要在 option 中配置 tooltip 组件。例如：

option = {
  ...
  tooltip: {
    trigger: 'axis'
  },
  ...
}

这会启用 tooltip 组件，并将其触发方式设置为坐标轴轴线触发。

然后，可以在 series 中指定每个系列的数据。例如：

option = {
  ...
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [100, 200, 300, 400, 500]
    }
  ],
  ...
}

这会创建一个名为“销量”的柱形图系列，并将其数据设置为 [100, 200, 300, 400, 500]。

最后，将 option 传递给 echarts 实例的 setOption 方法即可。例如：

var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);

这样就可以在页面中显示柱形图，并且支持数据交互了。当用户拖动滑块时，数据会自动缩放，当用户将鼠标悬停在柱形上时，会显示该柱形的具体数值。