关于 eCharts 多次渲染导致点击事件调用多次的bug的解决方案

不怕麻烦的鹿丸

已于 2022-06-01 11:27:34 修改

阅读量1.3k

点赞数 4

分类专栏： echart 文章标签： echarts javascript ecmascript

于 2020-03-20 17:34:40 首次发布

本文链接：https://blog.csdn.net/qq_31851435/article/details/104994904

版权

echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原理就是：每次要渲染eChart之前，都去手动把eChart对象之前绑定的所有click事件清除掉，然后再重新绑定新的click事件，这样就不会导致渲染多次，多次绑定相同的click事件了。

const myChart = echarts.init(document.getElementById('myChart'));

// 清除画布
myChart.clear();

// 调用setOption，配置eChart参数
myChart.setOption(option);

// 在渲染click事件之前先清除之前绑定的旧的click事件
myChart.off('click');

// 重新绑定新的click事件
myChart.on('click', function (params) {
    if (params.value === 'xx') {
       // do something
    }
});