codecamp

ECharts 添加选框事件

events.brush   |   Event


选框添加事件。即发出 brush action 得到的事件。

events.brushselected   |   Event


对外通知当前选中了什么。

参见 区域选择

这个事件,在 setOption 时不会发出,在其他的 dispatchAction 时,或者用户在界面中创建、删除、修改选框时会发出。

事件参数内容为:

{
type: 'brushselected',
batch: [
{
brushIndex: number // brush 组件的id,大多数情况只使用一个 brush 组件,所以不必理会。
selected: [ // 每个系列被选中的项。
// 注意,如果某个系列不支持 brush,但是还是会在这里出现对应的项。
// 也就是说,selected 可以使用 seriesIndex 来直接找到对应的项。
{ // series 0 被选中的项
seriesIndex: number,
dataIndex: [ 3, 6, 12, 23 ] // 用这些 dataIndex,可以去原始数据中找到真正的值。
},
{ // series 1 被选中的项
seriesIndex: number,
dataIndex: []
},
...
]
},
...
]
}

事件使用方式例如:

var dataBySeries = [
[ 12, 23, 54, 6 ], // series 0 的数据
[ 34, 34433, 2223, 21122, 1232, 34 ] // series 1 的数据
];
chart.setOption({
...,
brush: {
...
},
series: [
{ // series 0
data: dataBySeries[0]
},
{ // series 1
data: dataBySeries[1]
}
]
});
chart.on('brushSelected', function (params) {
var brushComponent = params.batch[0];
var sum = 0; // 统计选中项的数据值的和
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
// 对于每个 series:
var dataIndices = brushComponent.selected[sIdx].dataIndex;
for (var i = 0; i < dataIndices.length; i++) {
var dataIndex = dataIndices[i];
sum += dataBySeries[sIdx][dataIndex];
}
}
console.log(sum); // 用某种方式输出统计值。
});

如果想避免此事件频繁触发,可以使用 brush.throttleType


ECharts 高亮事件
ECharts附录一 按需引入ECharts图表和组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }