vue问题之被复用的vue文件（用vue-echarts实现），数据有缓存

一、问题

当多个路由复用同一个模板，此时在这几个路由间切换，被复用的模板有数据缓存问题。
如一个路由页面出现的图表有5个柱状图，在另一个路由页面出现的图表是7个柱状图，且数据项都不同，
问题：在另一个路由页面会先出现第一个路由页面的5个柱状图，再加载应有的7个柱状图

二、解决方法

在vue渲染之前，清空echarts——series——data的数据、echarts——yAxis——data的数据
数据在获取后台数据之前清空，数据获取后，重新添加图表应有的数据

// clear data
BarByYAxisList.series[0].data = []
BarByYAxisList.yAxis.data = []

_this.axios.get(urlJson)
  .then(response => {
    if (response.data) {
      let tmpyAxisData = []
      // 设置图标title
      BarByYAxisList.title.text = '今日不同报警类别排行'
      // 整理图标所需的series与yAxis数据
      _this.historyChart(response.data, tmpyAxisData, _this)
    }
  }).catch(function (response) {
    console.log('failure in getting data of Rank by alarm item')
  })