You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在ECharts中通过代码控制笔刷的选中与取消选中?

程序化控制ECharts Brush选中/取消选中的解决方案

我刚好也踩过这个坑——一开始找遍了示例没看到brush相关的dispatchAction用法,后来才发现官方文档里其实有明确的定义,现在把具体实现方法分享给你:

一、程序化选中指定柱状图

你可以通过brush类型的dispatchAction来主动触发选中操作,核心是通过areas参数定义选中范围,针对直方图场景,有两种常用方式:

方式1:通过数据索引选中指定柱子

如果你明确知道要选中哪些柱子的索引,直接用dataIndex指定就行:

// 假设你的ECharts实例是chart
chart.dispatchAction({
    type: 'brush',
    action: 'brush', // 表示执行选中操作
    brushType: 'rect', // 要和你配置的brush.brushType保持一致,比如lineX、rect等
    areas: [
        {
            dataIndex: [0, 2, 3] // 这里填你要选中的柱子对应的data索引数组
        }
    ]
});

方式2:通过坐标范围选中区间内的柱子

如果需要选中x轴某一段区间的所有柱子,可以用coordRange指定坐标范围:

chart.dispatchAction({
    type: 'brush',
    action: 'brush',
    brushType: 'lineX', // 对应横向刷选的brush类型
    areas: [
        {
            coordRange: [15, 45], // x轴上的数值区间,根据你的直方图数据调整
            xAxisIndex: 0, // 作用的x轴索引,默认0,多轴场景需要指定
            yAxisIndex: 0
        }
    ]
});

二、一键取消所有brush选中状态

完全不需要依赖removeOnClicksingle模式的限制,直接用action: 'clear'就能清空所有选中状态:

chart.dispatchAction({
    type: 'brush',
    action: 'clear' // 执行清除操作
});

几个关键注意点

  • brushType必须和你在ECharts配置项中brush.brushType的取值一致,否则会无效;
  • 如果是多坐标系或者多图表的场景,记得通过xAxisIndex/yAxisIndex指定作用的坐标轴;
  • 官方文档里的brush相关action在「动作与事件」分类下的brush模块,里面还有更多细节可以参考。

内容的提问来源于stack exchange,提问作者miro marchi

火山引擎 最新活动