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

Posted 2020-10-20 QGuo

网上所有，先调用.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

 

1

//将原先div清空。

2

$("#demoDiv").html(‘<div id="dotubiaoPie" style="height: 350px; margin-top: 10px;"></div>‘);

3

var mychart3 = echarts.init(document.getElementById(‘dotubiaoPie‘));

4

mychart3.clear();//只是清理画布，而不会删除 生成的元素节点

5

mychart3.setOption(option);

6

mychart3.on(‘click‘, function (params) {//绑定事件

7

    $("#timeTablePie tbody").html("<tr id=‘realTimeTableTbodyPie‘ style=‘display:none‘> </tr>");

8

    pieTable(params.name);

9

}

来自为知笔记(Wiz)