使用echarts遇到的几个问题初始化echarts前最好要先清掉上一次的实例，不然浏览器占用的内存会不断增加，最终可能

初始化echarts前最好要先清掉上一次的实例，不然浏览器占用的内存会不断增加，最终可能是浏览器崩溃了。特别是和定时器setTimeout,setInterval配合使用时。

/**
     * @description: 渲染地图
     * @param {type} null
     * @return: null
     */
    loadEchart () {
      Echarts.registerMap('wuxi', wxMap)
      let that = this
      centerMapChart && centerMapChart.dispose() && centerMapChart.clear()
      centerMapChart = Echarts.init(that.$refs.wuxiCharts)

vue组件在beforeDestroy勾子中，最好也要清掉echarts实例，原因也是为了及时清空不必要占用的内存。

 beforeDestroy () {
    centerMapChart && centerMapChart.dispose() && centerMapChart.clear()
    centerMapChart = null
  },

这里的centerMapChart.clear()不会执行，3的报错是这里写的有问题。

TypeError: Cannot read property 'getWidth' of null遇到报这个错，可能是因为清空时，你这样写了。

centerMapChart.dispose()
centerMapChart.clear()
centerMapChart = null

分析：执行完dispose()之后，当前实例已经被清掉，再执行clear()会被报错。

附：

a.  clear()
描述：
清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()
b.  dispose()
描述：
释放图表实例，释放后实例不再可用。

在演示一个大屏可视化项目时，用的echarts做的地图，打开页面几分钟之后，页面崩了。我用devtools看memory，内存在不断的增加，增加到接近1g时，页面就崩了。通过清地图的实例解决了这个页面奔溃的问题。遇到同类问题的小伙伴也可以尝试解决一下。

还有一个优化点，初始化vue实例的时候，会把data中的变量每一个都设置成响应式的，所以data中变量有特别大的默认值时，特别是echats里的数组、对象，会使初始化变慢，加重浏览器负担，占用内存，（vue会递归active每一个属性），一些不需要响应式的变量就不要挂在data里了，自己定义一个变量。如下：