快捷導(dǎo)航

vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題

更新時(shí)間：2024年06月12日 17:34:25 作者：浩星

這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

vue中使用echarts圖，并且使用他的點(diǎn)擊事件就會(huì)發(fā)現(xiàn)一個(gè)問題，第一次我echarts圖的點(diǎn)擊事件是生效的而且正常的，但是一旦重新渲染這個(gè)echarts圖以后，就會(huì)出現(xiàn)再重新渲染一次，（相當(dāng)于2次渲染echarts圖），點(diǎn)擊事件會(huì)被調(diào)用2次，第二次重新渲染，點(diǎn)擊事件就會(huì)被調(diào)用3次，這個(gè)問題。

問題展示

（我這里是調(diào)用后臺(tái)，我的日歷刷新一次時(shí)間，就會(huì)重新渲染一次我的echarts圖）

正常點(diǎn)擊事件

（前，點(diǎn)擊一次調(diào)用一次后臺(tái)）

異常

（當(dāng)我選了日歷以后，重新渲染echarts圖，再點(diǎn)擊的時(shí)候，重新渲染幾次，點(diǎn)擊多幾次）

解決辦法

再渲染echarts圖前加

this.myChart.off('click') // 這里很重要??！解決重復(fù)點(diǎn)擊

this.myChart = echarts.init(this.$refs.chart);
          this.myChart.off('click') // 這里很重要！！解決重復(fù)點(diǎn)擊
          this.myChart.setOption({

封裝組件源碼

<template>
  <div class="echarts" ref="chart"></div>
</template>
 
<script>
  const echarts = require('echarts');
  export default {
    props:{
      data:{//echarts數(shù)據(jù)
        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;//單位
        /**
         * 處理數(shù)據(jù)
         */
        // 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;
 
        /**
         * 獲取數(shù)據(jù)內(nèi)部最大值，+100來設(shè)置背景圖高度
         */
        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') // 這里很重要?。〗鉀Q重復(fù)點(diǎn)擊
          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:{//網(wǎng)格線
                　　　　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>