四、適應(yīng)容器
上面說過,圖表的容器必須固定寬高付翁,這確實是一個比較反人類的設(shè)定
為了解決這個問題,需要給圖表容器外面再加一個容器晃听,而這個外容器的寬高可以適應(yīng)頁面百侧。上面的
就是這樣的外容器
letchartBox =document.getElementsByClassName('charts')[0]letmyChart=document.getElementById('myChart')//用于使chart自適應(yīng)高度和寬度,通過窗體高寬計算容器高寬functionresizeCharts() {myChart.style.width= chartBox.style.width+'px'myChart.style.height= chartBox.style.height+'px'}//設(shè)置容器高寬resizeCharts()
letmainChart
=echarts.init(myChart)mainChart.setOption(options)
當頁面加載的時候,將外容器的寬高能扒,賦給圖表容器
但這只是解決了頁面加載時的自適應(yīng)問題
如果在頁面加載之后佣渴,仍需要圖表自適應(yīng)寬高,就需要用到 echarts 的媒體查詢