1. Initialize theechartsIt is best to clear the last instance before doing so, otherwise the browser will continue to consume more memory and eventually the browser will crash. And timer in particularsetTimeout,setIntervalWhen used together.
/** * @description: render map * @param {type} null
     * @return: null
     */
    loadEchart () {
      Echarts.registerMap('wuxi', wxMap)
      let that = this
      centerMapChart && centerMapChart.dispose() && centerMapChart.clear()
      centerMapChart = Echarts.init(that.$refs.wuxiCharts)
      
Copy the code
  1. vueComponents in thebeforeDestroyIn the hook, you’d better clear it tooechartsExample, the reason is also to clear unnecessary memory in time.
 beforeDestroy () {
    centerMapChart && centerMapChart.dispose() && centerMapChart.clear()
    centerMapChart = null
  },
Copy the code

Centermapchart.clear () will not be executed.

  1. TypeError: Cannot read property 'getWidth' of nullWhen you get this error, it’s probably because you wrote it this way when you emptied.
centerMapChart.dispose()
centerMapChart.clear()
centerMapChart = null
Copy the code

Analysis: After dispose() is executed, the current instance has been cleared. If clear() is executed, an error is reported.

A. clear() Description: Empty the painting content, after the instance is available, because it is not to release the sample resources, we need to dispose() B. Dispose () description: To release the graph instance, the instance is no longer available after the release.Copy the code
  1. During a demonstration of a large visualization project, a map made with Echarts crashed a few minutes after opening the page. I use DevTools to look at memory, and the memory keeps increasing until I get close to 1 GB and the page crashes. The page crash was solved by clearing the map example. Friends with similar problems can also try to solve it.

  1. There is another optimization point, initializationvueWhen you instantiate, it will putdataEach variable is set to reactive, sodataWhen a variable has a particularly large default value, especiallyechatArrays and objects in S will slow initialization, burden the browser, take up memory,(VUE recurses active for each attribute), some variables that do not require responsiveness should not be hungdataDefine a variable by yourself. As follows: