Apache Echarts 自学笔记 2. 快速上手

太过爱你忘了你带给我的痛 2024-03-27 15:43 64阅读 0赞

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

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

##### 2. 快速上手 #####

###### 2.1 获取 Apache ECharts ######

以从 [jsDelivr][] CDN 上获取为例：[https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/][https_cdn.jsdelivr.net_npm_echarts_5.4.1_dist]

今天是2023年2月10日，echarts 最新版本为5.4.1。

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

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

下载下来，直接右击“链接另存为 ”就行

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

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

###### 2.2 引入 Apache ECharts ######

新建一个index.html 文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Echarts快速入门</title>
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    
    
    </body>
    </html>

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

没有报错，继续

###### 2.3 绘制一个简单的图表 ######

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Echarts快速入门</title>
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    
    <div id="main" style="width: 600px;height: 400px;"></div>
    
    
    <script>
        // 基于准备好的 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>

浏览器渲染效果：

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

这样第一个图表就诞生了！

[3ff3826bbdd74d39a1843706aa79cd33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a37d4dd09625423796c09786d8686e07.png
[jsDelivr]: https://www.jsdelivr.com/package/npm/echarts
[https_cdn.jsdelivr.net_npm_echarts_5.4.1_dist]: https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/
[886288ed41984364981a570c73962fee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3bca6343332d4ee4af2cbd6e64944772.png
[e1187d9ae4274c149512c18c7637771a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f034f4b3210145eeaf5e461837b8028a.png
[591781bf239a499cb0481e857ba4be7a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ff46aecff1b54ec68d1ab680fd35d60b.png
[dc3f074b063c43b0b09dbc80513a11df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1266db30f32d419e9bca15d731dc4e11.png
[81b61234f3b54ab7bdb9178083db1f30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ed7a1419b1c943379db0c38395ba3027.png
[522eb09074774738bb669079eebf5eac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1f7b1d72f4494937b8d70634df00ecc8.png