Container change / changing window re-rendering echarts

  Are met using the sidebar menu contraction / expansion, echarts container size change, but echarts not re-adaptation container. Alternatively, window window does not change with the change but echarts for both echarts without adaptation, sharing under their own approach.

The core method is: monitor the echarts container size change factors and window change window resize () method to call echarts instance. (Methods VUE frame code sample)

A: Why can not adaptive:

 　　  ECharts not bound resize event, change the size of the display area inside did not know when the container size changes need to manually invoke resize achieve adaptive effect.

Two: echarts container size change, re-rendering.

          Roadmap: sidebar menu navigation menu using elementUI achieve contraction / expansion is based on the collapse of the boolean value, so we collapse into property values getSidebarFold vuex, listening getSidebarFold value changes to call resize echarts instance () method.

computed: { 
    ... mapGetters ({ 
      getSidebarFold: 'getSidebarFold' 
    }) 
  }, 
  Watch: { 
 / * monitor changes getSidebarFold solve echarts container changes, re-render setTimeout time must be set, and not too short * / 
    getSidebarFold () { 
      setTimeout (() => {
         the this .resizeHandle () 
      }, 500 ) 
    } 

  },    
  Mounted () { 
    the this .bar = echarts.init ( the this . $ refs.bar)
     the this .bar.setOption ( the this .barOption) 

    the this .line echarts.init = ( the this . $ refs.line)
    this.line.setOption(this.lineOption)
  },
  methods: {
    resizeHandle () {
      this.bar.resize()
      this.line.resize()
    }
  }

 

Three: window window is resized, re-rendering echarts.

        Roadmap: listening window change window, call resize (), and when the component is destroyed, clean out the monitoring.

   Mounted () {
     the this .bar = echarts.init ( the this . $ refs.bar)
     the this .bar.setOption ( the this .barOption) 

    the this .line = echarts.init ( the this . $ refs.line)
     the this .line.setOption ( the this .lineOption)
     / * listening window changes: step adaptively changes a window * / 
    window.addEventListener ( 'a resize', the this .resizeHandle) 
  }, 
  () Destroyed { 
    / * when the three-component adaptive step change when the window is canceled , scaling function is an anonymous function, and still in the event listener list, 
    and therefore anonymous functions and external variables used in anonymous functions will not be cleaned up after the cancellation of the component. 
     So you want to manually clean up * / 
    window.removeEventListener ( 'of a resize',the this .resizeHandle) 
  }, 
  Methods: { 
    / * adaptive step two calls echart of a resize () when the window is changed * / 
    resizeHandle () { 
      the this .bar.resize ()
       the this .line.resize () 
    } 
  }