echarts柱状图怎么加筛选

### 如何在 ECharts 柱状图中实现数据筛选功能

为了实现在 ECharts 中的数据筛选功能，可以利用 `dataZoom` 组件来提供可视化的区域缩放和滑动条工具。这允许用户通过拖拽选择特定范围内的数据进行查看。

#### 利用 dataZoom 实现柱状图中的数据筛选

下面是一个简单的例子展示如何配置 `dataZoom` 来支持柱状图上的交互式过滤：

option = {
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130]
    }],
    dataZoom: [
        {   // Inside zoom
            type: 'inside', 
            start: 0, 
            end: 100 
        }, 
        {   // Slider zoom
            type: 'slider', 
            start: 0, 
            end: 100 
        }
    ]
};

此代码片段定义了一个具有两个不同类型的 `dataZoom` 的图表选项对象：一个是内部滚动 (`type:'inside'`) ，另一个是带有手柄的滑块 (`type:'slider'`) 。这两个组件都设置为覆盖整个 X 轴的数据范围 (从 0% 开始到 100%) [^1]。

当用户操作这些控件时，ECharts 将自动更新显示的内容以反映新的视窗位置或大小变化。对于更复杂的场景，还可以考虑结合外部输入框或其他 UI 控制器来进行精确的选择，并通过编程方式调整 `startValue` 和 `endValue` 属性值来同步多个关联图表之间的状态一致性[^2]。