vue echart自适应解决办法

• Z时代
• 2024-01-10
• 分类：技术分享

看图说明，vue加载echart，有时候会溢出父系的div

大概代码就是：

<div id="yourEchart" :styles="{width:'100%',height:'300px'}" ></div>

vue页面加载后视图会溢出去。原因就是echart赶在dom还没加载好就先加载了。
所以必须加个时间：

  mounted() {
// 首次加载防止echart画布溢出指定div
setTimeout(() => {
this.drawChart() //在`methods`里echart视图代码存放函数名
}, 100)
// 监听窗口echart自适应浏览器变化大小
window.addEventListener('resize', () => {
clearTimeout(this.timer)  //清零
this.timer = setTimeout(() => {
this.yourEchart.resize()
}, 500)
})
}

说明：timer需要在data里注明下：

data() {
return{
timer: '',
}}

回答

看了半天，自问自答？

大哥说话太逗了！哈哈！

以上是 vue echart自适应解决办法 的全部内容， 来源链接： utcz.com/a/40479.html