Examples of clear and dispose usage in Echarts

When using ECharts in Vue, in order to avoid resource leakage when uninstalling components, you need to manually release the ECharts instance when the component is destroyed.You can use the clear or dispose method to release the instance.

• The clear method is to clear the cached graphics, but it will not release other resources occupied by the instance, such as container DOM and bound events.
• The dispose method is to completely release all resources occupied by the ECharts instance, including DOM, events, timers, etc.

Generally speaking, using the dispose method will be more thorough and safer. It is recommended to use the dispose method to release the ECharts instance when component is destroyed.The sample code is as follows:

//Use ECharts in Vue componentsimport echarts from 'echarts'
export default {
  name: 'EchartsDemo',
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    //Create an ECharts instance     = (this.$el)
    ()
  },
  beforeDestroy() {
    //Destroy the ECharts instance    ()
     = null
  },
  render(h) {
    return h('div')
  }
}

Note: When using the dispose method, you need to empty the instance first, otherwise it may cause memory leaks.

Attachment: The difference between echarts]clear and dispose and usage scenarios

clear and dispose are methods provided by echarts to solve memory overflow.

Memory overflow: When the memory required during the program run exceeds the remaining memory of the current application system, it causes memory overflow, which is intuitively manifested as - stuck.

So as long as you use echarts, it is best to clear or dispose.

()It is clearing the current instance, and all components and charts in the instance will be removed.

()It is a destroyed instance, and the instance can no longer be used after it is destroyed.

I thinkclearanddisposeJust likev-showandv-if

clearSimilar tov-show, it just re-draws the chart

disposeSimilar tov-if, it cleans up the echarts object and then rebuilds the echarts object

If even the chart container is destroyed, then it needs to be called()Destroy instance

Use scenarios: When the data of the echarts chart is dynamically updated and then rendered, even if we use watch to monitor the data changes and have obtained the updated data, the chart has not been rendered accordingly.

Solution: Clear or dispose, which one should be used, please consider the specific code writing method

Summarize

This is the end of this article about the usage of clear() and dispose() in Echarts. For more related contents of Echarts, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!