vue中使用echarts，根据不同的搜索条件显示图表

Question

代码如下， 其中页面的表单使用的iviewui

<Input v-model="search" placeholder="Enter something..." style="width: 300px" />
<Button type="primary" @click="handleSearch()">搜索</Button>


<div ref="chartBar" style="height:300px;"></div>


  mounted () {
    this.$nextTick(() => {
      this.getData()
    })
  },
  methods: {
    getData () {
      this.$get( //该方法是封装过的axios
        'data.json',//这里是接口数据
        { keywords: this.search },//参数是搜索条件，初始search为''
        response => {
          this.barDataHandle(response.data)
        }
      )
    },
    barDataHandle (data) {
       //此处将后端返回的数据处理为echarts中需要的数据，省略
      this.chartBar('按课程', this.$refs.chartBar, legendData, courses, seriesData)
    },
    chartBar (subtext, chartBar, legendData, xAxisData, seriesData) {
      // 基于准备好的dom，初始化echarts实例
      let bar = echarts.init(chartBar)
      // 绘制图表
      bar.setOption({
        title: {
          text: '图对比',
          subtext: subtext
        },
        legend: {
          top: 30,
          data: legendData
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: seriesData
      })
    },
    handleSearch () {
      //此处获取到搜索输入的值search
      this.getData()
    }
  }

进入页面时，获取后端接口返回的数据，echarts图表显示是正常的，如上图。

点击搜索后，接口传了搜索条件的参数重新获取数据了，但是，echarts图没有重新渲染，该怎么办？

Answer 1

  let el = echarts.init(document.getElementById("id"));
  el .clear();这句加上。意思是每次画图之前，先把之前的清理掉，管它之前有木有