容器改變/窗口改變重新渲染echarts

  是否遇見使用側邊欄菜單收縮/展開，echarts容器大小變化，但是echarts不重新自適應容器。或者，window窗口改變但是echarts不隨着改變，針對這兩種echarts不自適應的情況，分享下自己處理方法。

方法核心是：監聽使echarts容器大小發生變化的因素及window窗口改變去調用echarts實例的resize()方法。（方法以VUE框架代碼為示例）

一：為什么不能自適應：

 　　  ECharts沒有綁定resize事件，顯示區域大小發生改變內部並不知道，在容器大小發生改變時需要手動調用resize達到自適應的效果。

二：echarts容器大小改變，重新渲染。

          處理思路：側邊欄菜單使用elementUI的導航菜單實現，收縮/展開是根據collapse的boolean值，所以我們把collapse屬性值getSidebarFold放到vuex，監聽getSidebarFold值的變化去調用echarts實例的resize()方法。

computed: {
    ...mapGetters({
      getSidebarFold: 'getSidebarFold'
    })
  },
  watch: {
 /* 監聽getSidebarFold變化，解決echarts容器變化，重新渲染 setTimeout時間必須設置，且不能太短 */
    getSidebarFold () {
      setTimeout(() => {
        this.resizeHandle()
      }, 500)
    }

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

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

 

三：window窗口大小改變，重新渲染echarts。

        處理思路：監聽window窗口變化，調用resize(),並在組件銷毀時，清理掉監聽。

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

    this.line = echarts.init(this.$refs.line)
    this.line.setOption(this.lineOption)
    /* 窗口變化時自適應 步驟一:監聽窗口變化 */
    window.addEventListener('resize', this.resizeHandle)
  },
  destroyed () {
    /* 窗口變化時自適應 步驟三 組件被注銷時，縮放函數是匿名函數，且仍然在事件監聽列表中，
    因此匿名函數和匿名函數中用到的外部變量在組件注銷后均不會被清理。
     所以要手動清理 */
    window.removeEventListener('resize', this.resizeHandle)
  },
  methods: {
    /* 窗口變化時自適應 步驟二 調用echart的 resize() */
    resizeHandle () {
      this.bar.resize()
      this.line.resize()
    }
  }