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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110229.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

xiaowugui666 2019-08-19 17:10 評(píng)論0 收藏0