如何让echarts图表随着浏览器窗口的大小变化而变化

最新推荐文章于 2023-07-25 01:10:32 发布

原创最新推荐文章于 2023-07-25 01:10:32 发布 · 1.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端知识整理集册

本文介绍了如何使Echarts图表随着浏览器窗口大小变化自动调整尺寸。首先，通过设置图表宽高为浏览器大小的50%实现基本的缩放。接着，针对页面中存在多个图表的情况，分别讨论了同一JS内和不同JS间多个图表的响应式策略，强调了为每个图表实例设置唯一名称的重要性，以及利用窗口变化监听来调用resize()方法的必要性。

1、页面标签适应浏览器

2.当页面之中只有一个echarts图表的时候
如下,首先简单设置一个宽度和高度都为浏览器大小的50%的柱状图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
  <style>
        *{
            margin:0px;
            padding: 0px;
        }
        body,html{
        width:100%;
        height:100%;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 50%;height:50%;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

此时实现图表缩放只需添加以下代码

window.addEventListener("resize", function () {
    myChart.resize();
});

2.如果页面中有多个echarts图表并都写在了一个JS中的时候，此时需监听浏览器窗口的变化，为每一个echarts实例添加resize()方法。

window.addEventListener("resize", function () {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
    myChart4.resize();
});

3.如果页面中有多个echarts图表，并且每个图表都写在了不同JS里面，通过外部引用的方式，引入到页面中的。
例如：test1.js中这样写

  var myChart = echarts.init(document.getElementById('main1'));
    ...此处省略
  myChart.setOption(option);
 window.addEventListener("resize",function(){   
    myChart.resize();
});

test2.js中这样写

  var myChart = echarts.init(document.getElementById('main2'));
    ...此处省略
  myChart.setOption(option);
 window.addEventListener("resize",function(){   
    myChart.resize();
});

也就是说不同JS中的Echarts实例名字相同，这样看似没毛病，因为在不同JS中它们互不影响啊，但事实是只有页面上最后一个JS引入的Echarts图表的大小能够随浏览器的大小变化而变化。
解决此种情况的方法很简单，只需要在不同的JS中创建的Echarts实例名称不同就行了。
例如：将test2.js中改成

  var myChartTwo = echarts.init(document.getElementById('main2'));
    ...此处省略
  myChartTwo.setOption(option);
 window.addEventListener("resize",function(){   
    myChartTwo.resize();
});

标签

#监听窗口变化