ECharts3中的圖表大小自適應
阿新 • • 發佈:2018-11-26
最近在寫一個地圖類的應用,用的是echarts的圖表,然而一上來就一臉懵逼,如果父級容器的height/width屬性設定為百分比的形式,那麼echarts就會warning,且不能正常的生成圖表。所以div容器的高度寬度必須指定為px,這設計不知道是為啥。
google到的解決方案如下
- 新增window.onresize=myCharts.resize在setOption之後
我新增後圖表的高度被壓縮到了min-height,很奇怪,於是自己採用瞭如下解決方案,直接貼程式碼了。
var worldMapContainer = document.getElementById('WorldMap'); //用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬 var resizeWorldMapContainer = function () { worldMapContainer.style.width = window.innerWidth+'px'; worldMapContainer.style.height = window.innerHeight+'px'; }; //設定容器高寬 resizeWorldMapContainer(); // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(worldMapContainer); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'], height: worldMapContainer.style.height, width: worldMapContainer.style.width }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); //用於使chart自適應高度和寬度 window.onresize = function () { //重置容器高寬 resizeWorldMapContainer(); myChart.resize(); };
此時,worldMapContainer的高寬已經無所謂了,因為我們已經在js中設定了div容器高寬。
這個方法可以在使ECharts在高度和寬度上均自適應,如若遇到什麼坑,之後再補充。
2017-9-26更新
- 如果是需要圖表跟隨容器自適應的話,將上述
window.innerWidth
和window.innerHeight
替換為容器元素的container.clientWidth
和container.clientHeight
即可。其根本原理就是通過JavaScript來重新整理圖表寬高而非直接css自適應(因為ECharts不支援)
2018-5-27更新
很高興能幫到大家,博主2016年下半年在準備考研所以就沒再更新了,隨後就用OneNote記筆記了。不過現在部落格也要繼續更新了,大家有什麼問題可以直接評論,或者發郵件到 [email protected]
轉載:https://blog.csdn.net/u012043416/article/details/51912011