原地址：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其實都是沒用的。
