四、适应容器
上面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定
为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的
就是这样的外容器
letchartBox =document.getElementsByClassName('charts')[0]letmyChart=document.getElementById('myChart')//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽functionresizeCharts() {myChart.style.width= chartBox.style.width+'px'myChart.style.height= chartBox.style.height+'px'}//设置容器高宽resizeCharts()
letmainChart
=echarts.init(myChart)mainChart.setOption(options)
当页面加载的时候,将外容器的宽高,赋给图表容器
但这只是解决了页面加载时的自适应问题
如果在页面加载之后,仍需要图表自适应宽高,就需要用到 echarts 的媒体查询