vue页面echarts卡顿问题

1.在vue中使用echarts使用setOption更新加载图形很慢

  在vue中使用echarts和绘制柱状图，图例很多，但是只有100多条，但是绘制很慢。

this.myChart.setOption(this.option)

  因为是在data中定义了myChart属性，在script中定义一个变量用来接收myChart，就可以解决这个问题,原因变量定义在data里，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢

var myChart
myChart.setOption(this.option)

2.点击切换其他组件统计图时，出现了让人难以忍受的卡顿，有好几次都网页直接崩溃

  原因：
  每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃

  解决方法：
  在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源，我也试过使用dispose()方法，但是dispose销毁这个图例，图例是不存在了，但图例的resize()方法会启动，则会报没有resize这个方法，而clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了

  beforeDestroy () {
    myChart.clear()
  },

   if (myChart != null) {
      myChart.dispose()
    }