关于echarts:echarts的自适应问题窗口自适应侧边栏自适应eltab中的自适应

52次阅读

共计 703 个字符,预计需要花费 2 分钟才能阅读完成。

一、echart 的图表提供了一个 resize 函数,当 resize 函数被触发时,图表会进行重绘。
二、罕用的浏览器,窗口自适应。
(1) 将搁置图表的容器 div 的宽设置为 100%,不固定写死,height 能够依据需要设置为 vh 或者 px 都行。

<div id="hh" style="width:100%;height:400px;"/>

(2) 对浏览器窗口大小进行监听

window.addEventListener('resize',function(){this.mychart.resize()        // 当浏览器窗口大小发生变化时,图表能够进行自适应 

})
三、侧边栏收起或者关上导致的搁置图表的容器 div
利用 vuex 依据侧边栏的收起或者关上触发 echart 的 resize 办法

"$store.state.app.sidebar.opened"(){setTimeout(()=>{this.myChart.resize()
  },300)
}

四、el-tab 切换时图表自适应宽度会变成 100px 压缩不自适应。
起因是 el-tab 的时候,其余不显示的 tab 下的 div 此时的 display 为 none,在点击 tab 切换时候,div 还未渲染实现,图表在执行 js 初始化的时候找不到这个元素,所以主动将 ”100%” 转成了 ”100″,最初计算出来的图表就成了 100px。
1、解决办法:

<div id="hh" style="width:100%;height:400px;" v-if="activeName==='hh'"/>

2、解决办法:

<div id="hh" style="width:100%;height:400px;" :lazy='true'/> 

正文完
 0