关于eCharts的随着屏幕的自适应

最新推荐文章于 2024-07-26 15:20:05 发布

qq_50823208

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量888

点赞数 1

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_50823208/article/details/121910910

版权

这篇博客介绍了如何使用HTML、CSS和JavaScript实现ECharts图表的响应式布局。通过监听窗口resize事件，动态调整图表容器尺寸，确保在不同屏幕尺寸下图表能正常显示。同时，展示了如何在窗口大小变化时调用ECharts的resize方法，以适应屏幕尺寸的变化。

摘要由CSDN通过智能技术生成

1.html代码

也就是echarts的载体

 <div id="cake"></div>
 <div id="line"></div>

2.css代码

这是自己设置盒子的大小，根具自己的需求改变大小

   #cake{
        width: 400px;
        height: 300px;
    }
   #line{
       width: 400px ;
       height: 300px ;
   }

3.js代码

实时获取屏幕大小调整盒子大小

      (function () {
                            $(window).resize(function () {
                                let line = $("#line");
                              
                                let cake = $("#cake");
                                let scWidth = $(window).width();
                                if (scWidth < 1320) {

                                  
                                    $(line).css({ width: "280px", height: "250px" });
                                    $(cake).css({ width: "250px", height: "300px" })
                                }
                                else if (scWidth > 1320) {

                                   
                                    $(line).css({ width: "400px", height: "300px" });
                                    $(cake).css({ width: "400px", height: "300px" })
                                }
                            })

                        })()

根据盒子大小调整图表大小

 let rChart = document.getElementById("cake");
 let caChart = echarts.init(rChart);
 let lChart = document.getElementById("line");
 let chart = echarts.init(lChart);
window.addEventListener("resize", function () {
        
       
        chart.resize();
        caChart.resize();
    });