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

最新推荐文章于 2024-05-28 17:26:43 发布

花名时礼

最新推荐文章于 2024-05-28 17:26:43 发布

阅读量1.8k

点赞数

分类专栏：前端零碎知识

本文链接：https://blog.csdn.net/tyrant_forever/article/details/107712935

版权

前端零碎知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题：

当对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>