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

Posted 2022-10-21 liangsf

  是否遇见使用侧边栏菜单收缩/展开，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()