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

 

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)