使用echart时的重复点击事件

最新推荐文章于 2023-12-07 16:03:14 发布

原创最新推荐文章于 2023-12-07 16:03:14 发布 · 764 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts

笔记专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在使用ECharts时，点击事件导致的多次请求问题。通过解除事件绑定避免重复请求，确保每次点击只触发一次事件，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：我在做项目的时候用到的是echarts，有时候给它设置点击事件刷新列表，但是有时候出现列表反复来回跳转显示的情况，查看后台原来这时候是发出了多次请求，因为请求有响应时间所以短时间内点击图形两个部分出现列表来回响应显示的情况。
提问：当我们给echarts设置点击事件后，为什么点击echarts的图形有时候会发出一次请求，而有时候却是发出多次请求？

废话太多，直接看代码：

   var myChart = echarts.init(document.getElementById('chart-box'));
       myChart .setOption(option);
       myChart .on('click',function (params) {//点击事件
           				initTale();//初始化表格，自己的业务
            });

上面是解决问题前的代码。

   var myChart = echarts.init(document.getElementById('chart-box'));
       myChart.off('click');
       myChart.setOption(option);
       myChart.on('click',function (params) {//点击事件
           				initTale();//初始化表格，自己的业务
            });

这是解决后的。
有什么不一样？
其实就是多了一段 myChart .off(‘click’)，这才是重点，我们每次绑定事件前都要解除事件防止重复绑定，而我们发出多次请求就是因为重复绑定了点击事件。
有人会问那为什么有时候只会请求有一次呢？哈哈，那当然是第一次初始化绑定事件的时候了，大家可以试一下，如果不加这段代码你去点几次就会让echarts初始化绑定几次事件也就是说会请求几次。
参考