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

最新推荐文章于 2024-06-01 10:47:21 发布

绿箩

最新推荐文章于 2024-06-01 10:47:21 发布

阅读量7.9k

点赞数

分类专栏： js 文章标签： echarts图表自适应

本文链接：https://blog.csdn.net/qq_26212731/article/details/74456599

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

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

希望对大家有所帮助。