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 自适应报表的主要内容,如果未能解决你的问题,请参考以下文章