最近写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其实都是没用的。