echarts的自适应问题(窗口自适应,侧边栏自适应,el-tab中的自适应)
一、echart的图表提供了一个resize函数,当resize函数被触发时,图表会进行重绘。
二、常用的浏览器,窗口自适应。
(1) 将放置图表的容器div的宽设置为100%,不固定写死,height可以根据需求设置为vh或者px都行。
(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、解决方法:
【echarts的自适应问题(窗口自适应,侧边栏自适应,el-tab中的自适应)】2、解决方法:
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 宽容谁
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河