echarts點擊事件多次觸發解決

原地址:https://blog.csdn.net/shiyanfangye/article/details/81910218

解決方式:myCharts.off('click')

最近寫vue項目時用到echarts做個小功能,點擊餅狀圖的每一塊,生成新的柱狀圖,同時要給柱狀圖綁定點擊事件,彈出每一條柱狀數據詳情。

做完后發現一個問題,第一次點擊柱狀圖時點擊事件只觸發一次,點擊餅狀圖第二次生成柱狀圖后,柱狀圖的點擊事件就會觸發兩次,以此類推……最后越來越多。

代碼如下:

```

// 畫餅狀圖

drawPie() {

? ? ? ? let myCharts = Echarts.init(document.getElementById('pie'))

? ? ? ? let option = {

? ? ? ? ? title: {

? ? ? ? ? ? text: '所有會員',

? ? ? ? ? ? left: 'center'

? ? ? ? ? },

? ? ? ? ? tooltip: {

? ? ? ? ? ? trigger: 'item'

? ? ? ? ? },

? ? ? ? ? legend: {

? ? ? ? ? ? bottom: 10,

? ? ? ? ? ? left: 'center',

? ? ? ? ? ? data: ['注冊會員', '超級合伙人', '超級合伙人-戰略合作', '網點']

? ? ? ? ? },

? ? ? ? ? series: [

? ? ? ? ? ? {

? ? ? ? ? ? ? type: 'pie',

? ? ? ? ? ? ? center: ['50%', '50%'],

? ? ? ? ? ? ? selectedMode: 'single',

? ? ? ? ? ? ? data: this.allMember

? ? ? ? ? ? }

? ? ? ? ? ]

? ? ? ? }

? ? ? ? myCharts.setOption(option)

? ? ? ? // 點擊餅狀圖的每一塊生成新的數據

? ? ? ? myCharts.on('click', (params) => {

? ? ? ? ? this.getData(params.name)

? ? ? ? })

? ? ? }

// 獲取數據,數據時請求接口動態獲取的

getData (name) {

? ? ? ? let url = '/api/user/top/role?roleId=' + name

? ? ? ? this.$root.loading.show()

? ? ? ? this.$http.get(url).then(res => {

? ? ? ? ? this.$root.loading.hide()

? ? ? ? ? if (res.data.success) this.chartsData = res.data.data.content

? ? ? ? ? else this.$message.error()

? ? ? ? ? this.drawBar(name, this.chartsData)

? ? ? ? })

? ? ? }

// 畫柱狀圖

drawTopten(name, val) {

? ? ? ? let myCharts = Echarts.init(document.getElementById('bar'))

? ? ? ? myCharts.off('click') // 這里很重要?。?!

? ? ? ? let x = []

? ? ? ? let y1 = []

? ? ? ? let y2 = []

? ? ? ? let idList = []

? ? ? ? val.forEach(e => {

? ? ? ? ? x.push(e.name)

? ? ? ? ? y1.push(e.invitationNum)

? ? ? ? ? y2.push(e.totalMoney / 100)

? ? ? ? ? idList.push(e.id)

? ? ? ? }) // 這些都是自己做的一些數據處理,可以忽略

? ? ? ? let option = {

? ? ? ? ? title: {

? ? ? ? ? ? text: name + '前十用戶',

? ? ? ? ? ? left: 'center'

? ? ? ? ? },

? ? ? ? ? tooltip: {

? ? ? ? ? ? trigger: 'axis',

? ? ? ? ? ? axisPointer: {

? ? ? ? ? ? ? type: 'shadow'

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? legend: {

? ? ? ? ? ? bottom: 10,

? ? ? ? ? ? left: 'center',

? ? ? ? ? ? data: ['推廣用戶', '總收益/元']

? ? ? ? ? ? // selectedMode: false

? ? ? ? ? },

? ? ? ? ? toolbox: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? orient: 'vertical',

? ? ? ? ? ? left: 'right',

? ? ? ? ? ? top: 'center'

? ? ? ? ? },

? ? ? ? ? calculable: true,

? ? ? ? ? xAxis: [

? ? ? ? ? ? {

? ? ? ? ? ? ? type: 'category',

? ? ? ? ? ? ? name: '昵稱',

? ? ? ? ? ? ? axisTick: {show: false},

? ? ? ? ? ? ? data: x

? ? ? ? ? ? }

? ? ? ? ? ],

? ? ? ? ? yAxis: [

? ? ? ? ? ? {

? ? ? ? ? ? ? type: 'value'

? ? ? ? ? ? }

? ? ? ? ? ],

? ? ? ? ? series: [

? ? ? ? ? ? {

? ? ? ? ? ? ? name: '推廣用戶',

? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? barGap: 0,

? ? ? ? ? ? ? data: y1

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? name: '總收益/元',

? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? data: y2

? ? ? ? ? ? }

? ? ? ? ? ]

? ? ? ? }

? ? ? ? myCharts.on('click', (e) => {

? ? ? ? ? alert(111) // 如果不加off事件,就會疊加觸發

? ? ? ? })

? ? ? ? myCharts.setOption(option)

? ? ? }

```

其中重點就是,在畫觸發點擊事件的柱狀圖時,首先要加上一個off事件: myCharts.off('click')

看過其他的clear方法,或者在setOption時加上第二個參數true其實都是沒用的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,628評論 1 45
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,424評論 0 10
  • 我們總是試圖用最快的方法,去完成某個任務。然而總是在不停的找新的方法(一直找到疲憊),而忘了事情的根本(所帶來的樂趣)。
    你大爺的3閱讀 162評論 0 0
  • 重寫你的自我評語 我擁有自信是在參加工作三四年之后。從上學時代到剛工作那幾年,整個人都是自卑的,在選拔上新崗位后,...
    麗麗_8228閱讀 185評論 0 1
  • 效率問題 2016年7月2日 在你動手之前,你通常擁有的只是一個大體的想法而已。這個想法的價值通常非常有限,真正重...
    觀察者_王動閱讀 196評論 5 0