Apache Echarts 自学笔记 5. 概念篇 - 【图表容器及大小】 5.2 响应容器大小的变化

深藏阁楼爱情的钟 2024-03-27 16:46 62阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][f441a992e8894ee2ad620c6965ab9321.png_pic_center]
> 
> 如侵立删

##### 5. 概念篇 - 【图表容器及大小】 #####

###### 5.2 响应容器大小的变化 ######

###### 5.2.1 监听图表容器的大小并改变图表大小 ######

在有些场景下，我们会希望当容器大小改变时，图表的大小也相应地改变。【肯定的】

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，我们希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 `resize` 事件获取浏览器大小改变的事件，然后调用 [`echartsInstance.resize`][echartsInstance.resize]

![在这里插入图片描述][95a9d79e001341e992191490f05f3401.png_pic_center]

改变图表的大小。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图表容器及大小 - 响应容器大小的变化</title>
    </head>
    <style>
        #main,
        html,
        body {
          
            width: 100%;
        }
    
        #main {
          
            height: 400px;
        }
    </style>
    <body>
    <div id="main">
    
    </div>
    
    <script src="../../js/echarts.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        window.addEventListener('resize', function () {
          
            myChart.resize();
        });
    </script>
    </body>
    </html>

渲染效果

![在这里插入图片描述][a58ff517322c47f6b96629546533dc6b.png_pic_center]

###### 5.2.2 为图表设定特定的大小 ######

除了直接调用 `resize()` 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图表容器及大小 - 响应容器大小的变化</title>
    </head>
    <style>
        #main,
        html,
        body {
          
            width: 100%;
        }
    
        #main {
          
            height: 400px;
        }
    </style>
    <body>
    <div id="main">
    
    </div>
    
    <script src="../../js/echarts.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.resize({
          
            width: 800,
            height: 400
        });
    </script>
    </body>
    </html>

渲染效果

![在这里插入图片描述][cc9208588bd848aaa983bf6273c2de53.png_pic_center]

> 【注意】阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。

###### 5.2.3 容器节点被销毁以及被重建时 ######

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。

本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

正确的做法是，在图表容器被销毁之后，调用 [`echartsInstance.dispose`][echartsInstance.dispose] 销毁实例，在图表容器重新被添加后再次调用 [echarts.init][] 初始化。

> 【注意】在容器节点被销毁时，总是应调用 [`echartsInstance.dispose`][echartsInstance.dispose] 以销毁实例释放资源，避免内存泄漏。

[f441a992e8894ee2ad620c6965ab9321.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/64f0ff4c2e5c4e4d8cba84835ee5af68.png
[echartsInstance.resize]: https://echarts.apache.org/api.html#echartsInstance.resize
[95a9d79e001341e992191490f05f3401.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/869cabe32ea847fca803d8a5c094210e.png
[a58ff517322c47f6b96629546533dc6b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/171a1acb800c40dea4a83edfe6d38473.png
[cc9208588bd848aaa983bf6273c2de53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/99526414a09e4088a8147ef645569be6.png
[echartsInstance.dispose]: https://echarts.apache.org/api.html#echartsInstance.dispose
[echarts.init]: https://echarts.apache.org//api.html#echarts.init