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