【Echarts】当页面宽度改变时如何使图表宽度自适应

问题:

当对echats不作任何处理时,图表宽度不会自适应,如图所示(变绿的区域为echarts选中的div)。

加载完后:

 收缩浏览器页面之后:

 

解决方法:

编写js函数,当页面大小变化时重新加载图表的大小。

代码实现:

    window.onresize = function () {
       myChart.resize();
    }

附:完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
    <style>
        .class1 {
            width: 90%;
            height: 800px;
            background: green;
        }

    </style>
</head>
<body>
<div id="main" class="class1"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 60],
            type: 'line',
            areaStyle: {}
        }]
    };
    myChart.setOption(option);
    window.onresize = function () {
       myChart.resize();
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/tyrant_forever/article/details/107712935
今日推荐