原地址：https://blog.csdn.net/shiyanfangye/article/details/81910218
解決方式：myCharts.off('click')
最近寫(xiě)vue項(xiàng)目時(shí)用到echarts做個(gè)小功能，點(diǎn)擊餅狀圖的每一塊，生成新的柱狀圖，同時(shí)要給柱狀圖綁定點(diǎn)擊事件，彈出每一條柱狀數(shù)據(jù)詳情。
做完后發(fā)現(xiàn)一個(gè)問(wèn)題，第一次點(diǎn)擊柱狀圖時(shí)點(diǎn)擊事件只觸發(fā)一次，點(diǎn)擊餅狀圖第二次生成柱狀圖后，柱狀圖的點(diǎn)擊事件就會(huì)觸發(fā)兩次，以此類推……最后越來(lái)越多。
代碼如下：
```
// 畫(huà)餅狀圖
drawPie() {
? ? ? ? let myCharts = Echarts.init(document.getElementById('pie'))
? ? ? ? let option = {
? ? ? ? ? title: {
? ? ? ? ? ? text: '所有會(huì)員',
? ? ? ? ? ? left: 'center'
? ? ? ? ? },
? ? ? ? ? tooltip: {
? ? ? ? ? ? trigger: 'item'
? ? ? ? ? },
? ? ? ? ? legend: {
? ? ? ? ? ? bottom: 10,
? ? ? ? ? ? left: 'center',
? ? ? ? ? ? data: ['注冊(cè)會(huì)員', '超級(jí)合伙人', '超級(jí)合伙人-戰(zhàn)略合作', '網(wǎng)點(diǎn)']
? ? ? ? ? },
? ? ? ? ? series: [
? ? ? ? ? ? {
? ? ? ? ? ? ? type: 'pie',
? ? ? ? ? ? ? center: ['50%', '50%'],
? ? ? ? ? ? ? selectedMode: 'single',
? ? ? ? ? ? ? data: this.allMember
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? ? myCharts.setOption(option)
? ? ? ? // 點(diǎn)擊餅狀圖的每一塊生成新的數(shù)據(jù)
? ? ? ? myCharts.on('click', (params) => {
? ? ? ? ? this.getData(params.name)
? ? ? ? })
? ? ? }
// 獲取數(shù)據(jù),數(shù)據(jù)時(shí)請(qǐng)求接口動(dòng)態(tài)獲取的
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)
? ? ? ? })
? ? ? }
// 畫(huà)柱狀圖
drawTopten(name, val) {
? ? ? ? let myCharts = Echarts.init(document.getElementById('bar'))
? ? ? ? myCharts.off('click') // 這里很重要！?。?/p>
? ? ? ? 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)
? ? ? ? }) // 這些都是自己做的一些數(shù)據(jù)處理，可以忽略
? ? ? ? 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事件，就會(huì)疊加觸發(fā)
? ? ? ? })
? ? ? ? myCharts.setOption(option)
? ? ? }
```
其中重點(diǎn)就是，在畫(huà)觸發(fā)點(diǎn)擊事件的柱狀圖時(shí)，首先要加上一個(gè)off事件： myCharts.off('click')
看過(guò)其他的clear方法，或者在setOption時(shí)加上第二個(gè)參數(shù)true其實(shí)都是沒(méi)用的。
