echarts柱状图自适应宽高多图表

来源：互联网发布：说好的不谈感情梁知编辑：程序博客网时间：2024/04/27 03:02

我做的是一个页面多个图表，然后所有图表都需要自适应，首先是建了一个数组，来放这些图表对象。这是关键，不同的图表一定区分开对象。下面开始贴代码：

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();      };

希望对大家有所帮助。

阅读全文

0 0

echarts柱状图自适应宽高 多图表

echarts柱状图自适应宽高多图表