Apache Echarts 自学笔记 5. 概念篇 - 【图表容器及大小】 5.1 初始化

r囧r小猫 2024-03-27 16:46 38阅读 0赞

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

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

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

之前快速上手里面，我们使用接口 `echarts.init` 接口来初始化了ECharts。

官网建议我们先把这个接口函数的参数看明白，再继续阅读，OK看看 [https://echarts.apache.org/zh/api.html\#echarts.init][https_echarts.apache.org_zh_api.html_echarts.init]

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

[echarts.][] [init][https_echarts.apache.org_zh_api.html_echarts.init] ：创建一个 ECharts 实例，返回 [echartsInstance][]，不能在单个容器上初始化多个 ECharts 实例。

下面，就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。

###### 5.1 初始化 ######

###### 5.1.1 在 HTML 中定义有宽度和高度的父容器（推荐） ######

通常来说，需要在 HTML 中先定义一个 `<div>` 节点，并且通过 CSS 使得该节点具有宽度和高度。

初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `opts.height` 将其覆盖。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图表容器及大小 - 初始化</title>
    </head>
    <body>
    <div id="main" style="width: 600px;height: 400px;">
    
    </div>
    
    <script src="../../js/echarts.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
    </script>
    </body>
    </html>

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

【注意】使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。

###### 5.1.2 指定图表的大小 ######

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图表容器及大小 - 初始化</title>
    </head>
    <body>
    <div id="main">
    
    </div>
    
    <script src="../../js/echarts.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'), null, {
          
            width: 600,
            height: 200
        });
    </script>
    </body>
    </html>

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

[b17205438a974d9abff07c573e0b145b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b4fe712b86ac4572a4d5f0ddcd22ebe0.png
[https_echarts.apache.org_zh_api.html_echarts.init]: https://echarts.apache.org/zh/api.html#echarts.init
[29db0300bce14d53a20cb4e993973fbb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/53879763b8604fa997eb5d06dddee6c0.png
[echarts.]: https://echarts.apache.org/zh/api.html#echarts
[echartsInstance]: https://echarts.apache.org/zh/api.html#echartsInstance
[9bb1fed7003a4625956381ce00ddaa81.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/997a6730ca934b3c924267fd334b0df6.png
[66307041a7a14fc989108165d230d710.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/64d3e71ad05b43a5a82eba7fd2eb3f7f.png