12

echarts的自适应问题（窗口自适应，侧边栏自适应，el-tab中的自适应）

 3 years ago
source link: https://segmentfault.com/a/1190000040581962
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

echarts的自适应问题（窗口自适应，侧边栏自适应，el-tab中的自适应）

发布于 今天 02:40

一、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'/>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK