Recently, ECharts has been used to write Vue projects, and the requirements are as follows: click on the column, get the data from the server, and then re-render the histogram.

After doing this, I found a bug: from the second click, each click will send multiple requests to the server, instead of one click at a time.

Analysis shows that after ECharts renders, the bar graph is bound with a Click event. But it is not unbound. When a subsequent click is made to re-render, multiple clicks are performed, resulting in multiple requests.

The solution

When rendering ECharts, unbind the click event first, and then bind the click event.

Code implementation

<template>
  <div>
    <span @click="update" class="btn">Update the data</span>
    <div ref="chartBox" style="height: 300px;"></div>
 <p>Data Display:</p>  <template v-if="obj.name">  <span>{{ obj.name }}</span>  （<span style="color: red; font-weight: 700;">{{ obj.value }}</span  >) </template>  <template v-else>Temporarily no data</template>  </div> </template>  <script> import echarts from "echarts";  export default {  name: "MoreClick". data() {  return {  data: [143.185]. obj: {}  };  },  watch: {  data: {  deep: true. handler(newVal) {  this.draw();  }  }  },  mounted() {  this.draw();  },  methods: {  update() {  this.data = [100.90];  this.obj = {};  },  draw() {  var options = {  xAxis: {  data: ["apple"."orange"]  },  yAxis: {},  series: [  {  type: "bar". barWidth: 50. data: this.data  }  ]  };   var dom = this.$refs.chartBox;  var myChart = echarts.init(dom);  myChart.setOption(options);   myChart.off("click"); // Unbind   myChart.on("click", params => {  console.log("click", params);   this.obj = {  name: params.name,  value: params.value  };  });  }  } }; </script> Copy the code

Sample code download

Can copy the code to run to check the use effect, also can to making: https://github.com/Jackyyans/code123 download, more examples will be continuously updated, welcome the attention.