echarts生成图表超出父容器问题解决
前端vue开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况
·
- 问题描述:
前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况。
情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况。 - 原因:
一般不是因为图表绘制的方法调用问题,而是绘制渲染时机出现了问题,我们知道,vue渲染页面需要时间,要在页面调用echarts.init(),并且给图表设置配置项chart.setOption(option)。
调用echarts api生成图表的时机发生在mounted这个生命周期。在页面echarts绘制完成之后进行操作,发现有可能会出现元素虽然挂载了,但是布局还未完成的情况。这就导致图表元素显示超出父级容器很多,同时地,F12可以看到echarts元素的宽高度发生了明显的变化。
为什么会出现这种情况?父级元素还没有layout的时候,图表就开始生成,这个时候宽度和高度就不受默认布局的影响,而是会找到一个已经布局的大的父级元素作为父级,等真正的父级layout完毕,就超出了图表本身的父级容器。 - 解决:
这其实是一个异步问题通过延迟加载来解决,可设置一个简单的超时函数setTimeOut(callback,timeout)
,等父容器设置完宽高布局完成之后图表加载。
export default {
name: 'ehlPie',
data() {
return {
echart: null,
options: {
//省略。。。。
},
}
},
mounted() {
setTimeout(() => {
this.init()
}, 20)
},
methods: {
init() {
this.echart = this.$echarts.init(document.getElementById(this.tag))
this.echart.setOption(this.change(), { lazyMode: true })
window.addEventListener(
'resize',
() => {
setTimeout(() => {
this.echart && this.echart.resize()
}, 100)
},
false,
)
},
},
</script>
一般而言,在使用vue或者react都会容易出现这个问题,原因是我们的模板文件不是一开始就生在html页面中,而是需要经过人为渲染,渲染需要时间,图表生成的时机有可能会早于父级元素layout的时机,尤其当我们使用自适应布局的时候会出现。
更多推荐
所有评论(0)