Echarts 自适应报表

Posted aichitudousien

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts 自适应报表相关的知识,希望对你有一定的参考价值。

@

概述

在单个echarts报表实例中使用resize来进行自适应,多个报表就不能这么使用了。

代码

$_resizeHandler() 
      return debounce(() => 
        if (this.chart) 
          this.chart.resize()
        
      , 100)()
    

完整代码

此代码直接使用mixin混入即可,封装了报表自适应和报表销毁功能,在每一个报表组件中引入就好。

import  debounce  from \'@/utils/common\'

export default 
  data() 
    return 
      $_sidebarElm: null,
      chart: null,
      dataEmpty: false,
    
  ,
  watch: 
    data(newVal) 
      if (!this.chart) 
        this.$_init();
       else 
        this.setData(newVal);
      
    ,
  ,
  mounted() 
    this.$nextTick(() => 
      this.$_init();
    );
    this.$_initResizeEvent()
  ,
  beforeDestroy() 
    this.$_disposeChart()
    this.$_destroyResizeEvent()
  ,
  activated() 
    this.$_initResizeEvent()
  ,
  deactivated() 
    this.$_destroyResizeEvent()
  ,
  methods: 
    /**
     * 初始化数据
     */
    $_init() 
      if (this.data && this.data.length === 0) 
        this.dataEmpty = true;
       else 
        this.dataEmpty = false;
        this.initChart();
        this.setData(this.data);
      
    ,
    $_resizeHandler() 
      return debounce(() => 
        if (this.chart) 
          this.chart.resize()
        
      , 100)()
    ,
    $_initResizeEvent() 
      window.addEventListener(\'resize\', this.$_resizeHandler)
    ,
    $_destroyResizeEvent() 
      window.removeEventListener(\'resize\', this.$_resizeHandler)
    ,
    // 销毁报表
    $_disposeChart() 
      if (!this.chart) 
        return
      
      this.chart.dispose()
      this.chart = null
    
  


debounce函数

/**
 * 防抖函数
 * @param Funciton fn 函数
 * @param Number wait 等待时间
 * @param immediate Boolearn 是否立即执行
 */
export function debounce(fn, wait, immediate) 
  let timer
  return function() 
    if (timer) clearTimeout(timer)
    if (immediate) 
      // 如果已经执行过,不再执行
      var callNow = !timer
      timer = setTimeout(() => 
        timer = null
      , wait)
      if (callNow) 
        fn.apply(this, arguments)
      
     else 
      timer = setTimeout(() => 
        fn.apply(this, arguments)
      , wait)
    
  

vue 中使用 echarts 自适应问题

echarts 自带的自适应方法  resize()

具体用法:

let xxEcharts = this.$echarts.init(document.getElementById(‘xxx‘))
xxEcharts.setOption(xxxx)  // 参数是 echarts 的option对象
window.onresize = xxEcharts.resize
 
但是,问题来了,同一个页面使用多个echarts 的时候,window.onresize = xxEcharts.resize  只对最后一个echarts有效果
这时候换种写法
window.onresize = function(){
  xxBarChart.resize()
  xxxBarChart.resize()
  xxChart.resize()
  xxxChart.resize()
}
好了,现在所有的 echarts都可以自适应了,
然而,还没完,还是会出现各种问题,导致自适应出问题,现在我们想想,如何手动触发 resize
首先,肯定要把 echarts变量全局化。
我现在 vue的data中设置 xxEcharts : this.$echarts.init(document.getElementById(‘xxx‘))
然而报错,没办法,
再试试在计算函数中声明   
computed:{
  xxBarChart(){
    return this.$echarts.init(document.getElementById(‘myChart_ln‘))
  }
}
再试试,竟然可以了,虽然不知道原理,但是现在我们可以手动调起  this.xxBarChart.resize()了
 
 

以上是关于Echarts 自适应报表的主要内容,如果未能解决你的问题,请参考以下文章

实现echarts图表自适应

echarts的自适应问题(窗口自适应,侧边栏自适应,el-tab中的自适应)

echarts 视图自适应问题

web 报表工具如何自适应

Echarts图表自适应布局

vue 中使用 echarts 自适应问题