echarts柱狀圖自適應寬高 多圖表
阿新 • • 發佈：2019-01-29
我做的是一個頁面多個圖表，然後所有圖表都需要自適應，首先是建了一個數組，來放這些圖表物件。這是關鍵，不同的圖表一定區分開物件。下面開始貼程式碼：
1、html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖表自適應</title> <link rel="stylesheet" href="css/bootstrap2-3-1.min.css"> <script src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap2-3-2.min.js"></script> <script src="js/echarts.min.js"></script> <style> .wrap{ height: 300px; } </style> </head> <body> <div class="container-fluid"> <div class="row-fluid wrap"> <div class="span4" ><div id="main1" style="width: 600px;height:400px;"></div></div> <div class="span4" ><div id="main2" style="width: 600px;height:400px;"></div></div> <div class="span4" ><div id="main3" style="width: 600px;height:400px;"></div></div> </div> </div> </body> </html>
這是用bootstrap簡單做的一個自適應的頁面。
2、js程式碼部分：
var resizeChartsContainer = function (e) { var main = document.getElementById(e); main.style.width = main.parentNode.clientWidth+'px'; main.style.height = main.parentNode.clientHeight+'px'; }; //初始化容器高寬 // resizeChartsContainer('main1'); // resizeChartsContainer('main2'); // resizeChartsContainer('main3'); var myChart=[]; for(var i=0;i<3;i++){ // 圖表沒有繪製之前初始化容器高寬 resizeChartsContainer('main'+(i+1)); // 開始繪製圖表 myChart[i] = echarts.init(document.getElementById('main'+(i+1))); var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart[i].setOption(option); } alert(myChart); //當頁面發生變化是重置圖表容器的寬高 window.onresize = function () { //重置容器高寬 for(var i = 0;i<myChart.length;i++){ resizeChartsContainer('main'+(i+1)); myChart[i].resize(); } // resizeChartsContainer('main1'); // resizeChartsContainer('main2'); // resizeChartsContainerr('main3'); // myChart[0].resize(); // myChart[1].resize(); // myChart[2].resize(); };
希望對大家有所幫助。