解決echarts點擊事件調(diào)用n次的問題

kviccn 發(fā)布于2019-08-26 18:27 / 1023人閱讀

摘要：我發(fā)現(xiàn)接口請求次數(shù)會依次增加，比如第一次點擊會調(diào)用一次，第二次點擊會調(diào)用兩次，第三次會調(diào)用四次，依次增加。解決點擊事件調(diào)用次的問題清除畫布調(diào)用在渲染點擊事件之前先清除點擊事件為時，觸發(fā)點擊事件訂單

最近項目中有關(guān)于echarts的一些需求，為了完善需求我也是被坑了不少。在給echarts點擊事件調(diào)接口的時候。我發(fā)現(xiàn)接口請求次數(shù)會依次增加，比如第一次點擊會調(diào)用一次，第二次點擊會調(diào)用兩次，第三次會調(diào)用四次，依次增加。這完全是個大bug啊。于是我開始查詢各種資料尋求解決辦法。但是都沒有一個準(zhǔn)確的解決方法，最終我結(jié)合了幾個人的解決辦法進(jìn)行了一次整合。終于，讓我開心了一回。bug也不會重復(fù)出現(xiàn)。為了我以后不再跳進(jìn)這個坑，進(jìn)行一次總結(jié)。

   // 解決點擊事件調(diào)用n次的問題
        // 1、清除畫布
        myChart.clear()
        // 2、調(diào)用setOption
        myChart.setOption(option)
        ///3、在渲染點擊事件之前先清除點擊事件
        myChart.off("click")
        // triggerEvent為true時，觸發(fā)點擊事件
        myChart.on("click", function (params) {
            // console.log(params)
            if (params.value === "訂單") {
                console.log(params.value)
            }
        })

GPU云服務(wù)器云服務(wù)器點擊事件鼠標(biāo)點擊事件綁定點擊事件點擊事件回調(diào)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110229.html

相關(guān)文章

使用Echarts中遇到值得記錄的小案例（一）

摘要：說到這里可能會有點繞，里的也是一個對，高亮為，取消為，和里的表現(xiàn)效果恰恰相反。需求部分在開發(fā)項目的時候遇到一個需求，就是如何保證echarts圖表里至少顯示一個圖例的數(shù)據(jù)（也就是最后一個圖例不能變成unselected的狀態(tài)）下圖是最初加載時的畫面showImg(https://segmentfault.com/img/bVbeDxo?w=1543&h=513); 不想出現(xiàn)圖例都被...

wind3110991 2019-08-23 10:36 評論0 收藏0
使用Echarts中遇到值得記錄的小案例（一）

摘要：說到這里可能會有點繞，里的也是一個對，高亮為，取消為，和里的表現(xiàn)效果恰恰相反。需求部分在開發(fā)項目的時候遇到一個需求，就是如何保證echarts圖表里至少顯示一個圖例的數(shù)據(jù)（也就是最后一個圖例不能變成unselected的狀態(tài)）下圖是最初加載時的畫面showImg(https://segmentfault.com/img/bVbeDxo?w=1543&h=513); 不想出現(xiàn)圖例都被...

codeGoogle 2019-08-02 11:07 評論0 收藏0
Rxjs入門實踐-各種排序算法排序過程的可視化展示

摘要：整個數(shù)據(jù)流序列 Rxjs入門實踐-各種排序算法排序過程的可視化展示這幾天學(xué)習(xí)下《算法》的排序章節(jié)，具體見對排序的總結(jié),想著做點東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念，重點介紹如何用響應(yīng)式編程的思想來實現(xiàn)功能在線演示地址源碼效果圖 showImg(https://segmentfault...

piglei 2019-08-21 17:11 評論0 收藏0
Rxjs入門實踐-各種排序算法排序過程的可視化展示

摘要：整個數(shù)據(jù)流序列 Rxjs入門實踐-各種排序算法排序過程的可視化展示這幾天學(xué)習(xí)下《算法》的排序章節(jié)，具體見對排序的總結(jié),想著做點東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念，重點介紹如何用響應(yīng)式編程的思想來實現(xiàn)功能在線演示地址源碼效果圖 showImg(https://segmentfault...

荊兆峰 2019-08-01 17:49 評論0 收藏0
前端模塊化開發(fā)demo之攻擊地圖

摘要：最終自定義事件封裝在上面的鏈接中看到，不僅應(yīng)用層頁面的按鈕可以切換地圖維度，直接點擊地圖里的中國區(qū)域也能切換地圖，同時又能通知到應(yīng)用層頁面的按鈕改變狀態(tài)。前言很早以前寫過一篇用RequireJS包裝AjaxChart，當(dāng)時用Highcharts做圖表，在其上封裝了一層ajax，最后只是簡單套用了一下requireJS。由于當(dāng)時自己才接觸模塊化，理解層面還太淺，后來經(jīng)過其他項目的磨練...

xiaowugui666 2019-08-19 17:10 評論0 收藏0