Echarts related learning links

  1. Liverpoolfc.tv: echarts.apache.org/examples/zh…
  2. Example: www.makeapie.com/explore.htm…

Render the Echarts step

  1. The introduction of
Import * as echarts from 'echarts' // How to import echarts after update 5.0.1Copy the code
  1. Written in secondary packaging components
<div :id="id" :style="style" :key="keyValue"></div> { style(){ return{ height:this.height, width:this.width } } },Copy the code
  1. Initialize the
let myEcharts = echarts.init(document.getElementById(this.id)) var option = {... } // Myecharts.clear () myecharts.setoption (option);Copy the code

Scenario: Page A, page B jumps to the details page from page A. A has charts, but B does not

  1. Monitoring width and height (key)
Mounted () {this.initData() window.adDeventListener ('resize',this.resize,true)},Copy the code

The problem: When you switch to another page without Echarts chart and change the width, the listener still exists and the corresponding DOM element is not heard. As a result, when you go back, the echarts chart has the default minimum width and height of 100px, as shown in the figure below:Therefore, bound listening events need to be unbound before leaving the page

  1. Cancel listening (key)

Cause: Otherwise, it is easy to cause memory leakage.

Since keep-alive is used in the page, it has no effect to cancel listening in deStoryed ()

deactivated(){
    let that = this
    window.removeEventListener('resize',that.resize,true)
}
Copy the code

Call here as external function enclosing the resize (), different from: window. The removeEventListener (‘ resize, function () {myChart. The resize (); }) The removed event must be the same as the bound event, otherwise the removal will fail.

Common bugs or warnings

  1. The timer didn’t go off

Timer in the initialization of the init echarts, which is with the dom, even if the dom deleted, but the timer is still there, so the memory still have this dom solution: manually delete the timer and dom

this.timer = setTimeout(function(){
 that.initCharts();
},500)

clearTimeout(this.timer);

Copy the code
  1. There is a chart instance already initialized on the dom.

Scenario: In the same page there are many select boxes, etc., every click needs to re-render echarts diagram solution:

if(document.getElementById(this.id) == null){
 	return
 }
 echarts.dispose(document.getElementById(this.id))
Copy the code

Matters needing attention

Avoid using global variables. 2. Unbind bound events