因為我是將echarts封裝好後，父元件只要傳遞值就可以進行渲染。

但是點選多次資料請求的時候echarts會多次渲染。如果試過

clear() 與setOption(this.options,true)沒用之後。可以試一下下面的方法。

首先是在父元件中對資料進行請求，在賦值之前，先清空。

data裡定義的三組echarts資料

在axios傳送請求後

先清空再賦值。

補充知識：vue.js使用vue-echarts給柱形圖繫結點選事件

我就廢話不多說了，大家還是直接看程式碼吧~

<template>
 <div class="echarts">
 <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
 <button @click="doRandom">Random</button>
 </div>
</template>
 
<script type="text/babel">
 import IEcharts from 'vue-echarts-v3/src/full.js';
 export default {
 name: 'view',components: {
  IEcharts
 },props: {
 },data: () => ({
  loading: true,bar: {
  title: {
   text: 'ECharts Hello World'
  },tooltip: {},xAxis: {
   data: ['Shirt','Sweater','Chiffon Shirt','Pants','High Heels','Socks']
  },yAxis: {},series: [{
   name: 'Sales',type: 'bar',data: [5,20,36,10,20]
  }]
  }
 }),methods: {
  doRandom() {
  const that = this;
  let data = [];
  for (let i = 0,min = 5,max = 99; i < 6; i++) {
   data.push(Math.floor(Math.random() * (max + 1 - min) + min));
  }
  that.loading = !that.loading;
  that.bar.series[0].data = data;
  },onReady(instance) {
  console.log(instance);
  },onClick(event,instance,echarts) {
  console.log(arguments);
  }
 }
 };
</script>
 
<style scoped>
 .echarts {
 width: 400px;
 height: 400px;
 }
</style>

以上這篇在vue中實現清除echarts上次保留的資料(親測有效)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。