vue中echarts点击事件点击一次多次触发

前言：

        vue中使用echarts图，并且使用他的点击事件就会发现一个问题，第一次我echarts图的点击事件是生效的而且正常的，但是一旦重新渲染这个echarts图以后，就会出现再重新渲染一次，（相当于2次渲染echarts图），点击事件会被调用2次，第二次重新渲染，点击事件就会被调用3次，这个问题。

问题展示：(我这里是调用后台，我的日历刷新一次时间，就会重新渲染一次我的echarts图)

正常点击事件（前，点击一次调用一次后台）：

异常（当我选了日历以后，重新渲染echarts图，再点击的时候，重新渲染几次，点击多几次）

解决办法：

再渲染echarts图前加：  this.myChart.off('click') // 这里很重要！！解决重复点击

this.myChart = echarts.init(this.$refs.chart);
          this.myChart.off('click') // 这里很重要！！解决重复点击
          this.myChart.setOption({

封装组件源码：

<template>
  <div class="echarts" ref="chart"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    props:{
      data:{//echarts数据
        type:Array,
        default:()=>[]
      },
      Params:Object,
    },
    data () {
      return {
        name:'柱图',
        myChart:null,
      };
    },
    components: {},
    mounted() {
      this.initCharts(this.data);
    },
    watch:{
      data(val){
          this.initCharts(val);
      }
    },

    methods: {
      initCharts(data){
        if(data.length==0){
          return;
        }
        let unit = this.Params.unit;//单位
        /**
         * 处理数据
         */
        // let dataAxis = ['10.24', '10.25', '10.26', '10.27', '10.28', '10.29', '今日'];
        // let Ydata =  [220, 182, 191, 234, 290, 330, 310];
        let dataAxis = [];
        let Ydata = [];
        data.forEach(item => {
          dataAxis.push(item.date);//日期
          Ydata.push(item.value);//积分
        });
        let maxLengthVal = Ydata.length-1;

        /**
         * 获取数据内部最大值，+100来设置背景图高度
         */
        var max = Ydata.reduce( (a,b)=> b > a ? b : a );//获取最大值
        var dataShadow = [];
        var yMax;
        if(max<100){
          yMax = max+30;
        }else if(max>100 && max<500){
          yMax = max+100;
        }else{
           yMax = max+200;
        }
        for (var i = 0; i < Ydata.length; i++) {
            dataShadow.push(yMax);
        }

          this.myChart = echarts.init(this.$refs.chart);
          this.myChart.off('click') // 这里很重要！！解决重复点击
          this.myChart.setOption({
              xAxis: {
                  data: dataAxis,
                  axisLabel: {
                      inside: true,
                      textStyle: {
                          color: '#000',
                          fontSize:'100%'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      show: false
                  },
                  position: "top",
                  z:10

              },
              yAxis: {
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                       show: false
                  },
                  splitLine:{//网格线
                　　　　show:false
                　}
              },
              dataZoom: [
                  {
                      type: 'inside'
                  }
              ],
              series: [
                  { // For shadow
                      type: 'bar',
                      itemStyle: {
                          normal: {color: '#F6FBFE'},
                          emphasis: {color: 'rgba(255,188,117,.3)'}
                      },
                      barGap:'-100%',
                      barCategoryGap:'40%',
                      data: dataShadow,
                      animation: false
                  },
                  {
                      type: 'bar',
                      label: {
                          normal: {
                              show: true,
                              position: 'top',
                              color:'#000',
                              fontSize:'100%',
                              formatter: function (params) {
                                  return params.value+unit;
                              },
                          },
                      },
                      itemStyle: {
                          normal: {
                              // color: new echarts.graphic.LinearGradient(
                              //     0, 0, 0, 1,
                              //     [
                              //         {offset: 0, color: '#FF3405'},
                              //         {offset: 0.5, color: '#FF6A47'},
                              //         {offset: 1, color: '#FF9076'}
                              //     ]
                              // )
                              color: function(params) {
                                        if(params.dataIndex == maxLengthVal){
                                          return new echarts.graphic.LinearGradient(
                                              0, 0, 0, 1,
                                              [
                                                  {offset: 0, color: '#FF3405'},
                                                  {offset: 0.5, color: '#FF6A47'},
                                                  {offset: 1, color: '#FF9076'}
                                              ]
                                          );
                                        };
                                        return  new echarts.graphic.LinearGradient(
                                              0, 0, 0, 1,
                                              [
                                                  {offset: 0, color: '#FFBD77'},
                                                  {offset: 0.5, color: '#FF9F38'},
                                                  {offset: 1, color: '#FF8505'}
                                              ]
                                          );
                                    }
                          },
                          emphasis: {
                              color: new echarts.graphic.LinearGradient(
                                  0, 0, 0, 1,
                                  [
                                      {offset: 0, color: '#FF3405'},
                                      {offset: 0.5, color: '#FF6A47'},
                                      {offset: 1, color: '#FF9076'}
                                  ]
                              )
                          }
                      },
                      data: Ydata
                  }
              ]

           })
        this.myChart.on('click',(params)=>{
             let name = '';
             data.forEach(item=>{
               if(item.date == params.name){
                 name = item.dateYear
               }
             })
              this.$emit('echartsClick',name);
           });
      },

    },
  }

</script>
<style lang='less' scoped>
  .echarts{
    width: 100%;
    height:100%;
  }
</style>