echarts 绑定事件重复执行问题。

最新推荐文章于 2023-02-22 15:43:14 发布

原创最新推荐文章于 2023-02-22 15:43:14 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种解决前端开发中事件重复绑定导致的问题的方法。通过清空原有元素再重新生成的方式来避免事件的重复触发，特别适用于使用ECharts生成动态图表的场景。

网上所有，先调用.off 方法后再调用.on 绑定事件。

无效果，查看api未发现off方法，于是采用，先删除原先元素，后重新生成的方式。

场景描述。

用户查询时，每次结果都对应一张饼图。该张饼图绑定click事件。当我多次查询后发现，绑定的事件重复执行了多次。

查看页面元素后发现，每次都在对应的位置生成了新的一张图。

解决方案：将原先div清空，后重新生成。

//将原先div清空。
$("#demoDiv").html('<div id="dotubiaoPie" style="height: 350px; margin-top: 10px;"></div>');
var mychart3 = echarts.init(document.getElementById('dotubiaoPie'));
mychart3.clear();//只是清理画布，而不会删除 生成的元素节点
mychart3.setOption(option);
mychart3.on('click', function (params) {//绑定事件
    $("#timeTablePie tbody").html("<tr id='realTimeTableTbodyPie' style='display:none'> </tr>");
    pieTable(params.name);
}

      绑定事件
     

           x
          

             
           
//将原先div清空。
$("#demoDiv").html('<div id="dotubiaoPie" style="height: 350px; margin-top: 10px;"></div>');
var mychart3 = echarts.init(document.getElementById('dotubiaoPie'));
mychart3.clear();//只是清理画布，而不会删除 生成的元素节点
mychart3.setOption(option);
mychart3.on('click', function (params) {//绑定事件
    $("#timeTablePie tbody").html("<tr id='realTimeTableTbodyPie' style='display:none'> </tr>");
    pieTable(params.name);
}

来自为知笔记(Wiz)