docs/docs/cn/data-visualization/guide/chart-events.md
在事件编辑器编写 JS,通过 ECharts 实例 chart 注册交互行为,实现联动。例如跳转到新页面、打开弹窗下钻分析等。
chart.on(eventName, handler)chart.off(eventName, handler) 或 chart.off(eventName) 清理同名事件注意: 安全考虑,强烈建议注册事件前先进行解绑!
常用的有 params.data,params.name 等
chart.off('click');
chart.on('click', (params) => {
const { seriesIndex, dataIndex } = params;
// 高亮当前数据点
chart.dispatchAction({ type: 'highlight', seriesIndex, dataIndex });
// 取消其它高亮
chart.dispatchAction({ type: 'downplay', seriesIndex });
});
chart.off('click');
chart.on('click', (params) => {
const order_date = params.data[0]
// 方式1、应用内部跳转,不强制刷新页面,体验更好(推荐),只需相对路径path
ctx.router.navigate(`/new-path/orders?order_date=${order_date}`)
// 方式2、跳转外部页面,需要完整链接
window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`
// 方式3、新标签页打开外部页面,需要完整链接
window.open(`https://www.host.com/new-path/orders?order_date=${order_date}`)
});
chart.off('click');
chart.on('click', (params) => {
ctx.openView(ctx.model.uid + '-1', {
mode: 'dialog',
size: 'large',
defineProperties: {}, // 注册上下文变量,供新弹窗使用
});
});
新打开的弹窗中使用图表声明的上下文变量 ctx.view.inputArgs.XXX
建议:
chart.off('event'),避免多次绑定导致重复执行或内存增长。dispatchAction、setOption),避免阻塞渲染。