多个Echarts图表浏览器自适应问题

最新推荐文章于 2023-01-10 10:22:20 发布

会飞的猪0629

最新推荐文章于 2023-01-10 10:22:20 发布

阅读量968

点赞数 1

文章标签：浏览器 echarts 自适应

本文链接：https://blog.csdn.net/liyy_sd/article/details/71728349

版权

刚入手echarts，整理echarts发现它不能随着浏览器的改变而改变，若想适应，只能刷新。
网友们提出的方案中：window.onresize = myChart.resize; 实践发现，只能适用于最后一个echarts图表，若有多个则无法实现。
若是想实现多个echarts图表自适应浏览器，不妨试试以下办法，举个栗子：

<body>
    <div id="first" style="width: 80%;height: 400px;"></div>
    <div id="second" style="width: 50%;height: 400px;"></div>
    <script>
        function resize() {
            var myEcharts = echarts.init(document.getElementById("first"));
            var option={ …… };
            myEcharts.setOption(option);

            var otherEcharts = echarts.init(document.getElementById("second"));
            var optionnn={ …… };
            otherEcharts.setOption(optionnn);

            window.addEventListener("resize",function() {
                myEcharts.resize();
                otherEcharts.resize();
            });
        }
        resize();
    </script>
</body>

即添加一段代码：

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

希望大家多多批评哈~

会飞的猪0629

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
多个Echarts图表浏览器自适应问题

刚入手echarts，整理echarts发现它不能随着浏览器的改变而改变，若想适应，只能刷新。网友们提出的方案中：window.onresize = myChart.resize; 实践发现，只能适用于最后一个echarts图表，若有多个则无法实现。若是想实现多个echarts图表自适应浏览器，不妨试试以下办法，举个栗子：<body> <div id="first" style="
复制链接

扫一扫