前端控件宝典：UI组件的完整指南(40)——全国空气质量可视化【源码在文末并附解释】

刺骨的言语ヽ痛彻心扉 2023-10-16 09:11 12阅读 0赞

在当今数字时代，Web应用程序已经成为我们生活的重要组成部分。无论是社交媒体平台、电子商务网站还是在线工具，现代Web应用程序的核心是其用户界面（UI）。而用户界面的关键组成部分之一就是前端控件。

前端控件是Web开发中不可或缺的元素，它们为我们提供了构建各种交互性和功能丰富的Web应用程序的工具。无论您是一名新手前端开发者还是经验丰富的工程师，了解和掌握前端控件都是提高Web开发技能的关键。

本博客系列将带您深入探索前端控件的世界。我们将详细研究各种UI组件，从简单的按钮和表单控件到复杂的图表和地图集成，无所不包。无论您是想要提高自己的技能，还是寻找构建令人印象深刻的用户体验的方法，这个系列都将为您提供宝贵的知识。

在接下来的几篇文章中，我们将探讨不同类型的前端控件，讨论它们的用途、最佳实践和实际示例。无论您的兴趣是构建漂亮的UI、提高用户体验或学习最新的Web开发技术，这个系列都将有所帮助。

准备好探索前端控件的魅力吗？让我们开始吧！

### 一，演示地址 ###

访问网址：http://59.110.22.223:8080/Model\_qianduan/air\_quality\_baidu\_map.html

![image-20230915091433700][]

### 二、控件常识 ###

自定义控件  
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持Microsoft Visual Studio 的所有设计是特性，诸如属性窗口、可视化设计器、属性生成器和工具箱。

上面讲了用户控件，它只需要想创建页面一样，在设计器里拖拉系统控件设计界面，然后为这些控件添加必须的事件代码就可以，它纯粹就是组合。而自定义控件是“从头实现”控件的底层功能，编写一个类继承自Control，并实现INamingContainer接口，甚至重写控件的Render方法，控制控件生成的html代码，以及实现响应从浏览器传回数据的事件和处理传回的数据，它不仅叫自定义控件，也可以叫做复合控件。

自定义控件使用的时候，可以点击vs软件右边上的工具箱，在工具箱上空白处点击右键选择项–在.NET Framework组件选项卡下点击“浏览”–找到你要添加的自定义控件(.dll文件)–打开–确定。这样你就可以在工具箱中将那个自定义控件拖出来使用了。常用的控件有：分页控件、文本编辑器、水晶报表、ActiveReports等。

开发方法：  
1、自定义控件的开发，即继承如Control的积累实现服务器控件。

2、开发用户控件。

创建用户控件与创建普通asp.net web页面类似，但是还是有些不同。步骤是：

① 创建一个.ascx的文本文件。这是用户控件和asp.net web页面的第一个不同点，后者使用的扩展名为.aspx。

②在文本文件顶部添加@Control指令，并通过language属性来设置所选择的编程语言，这是用户控件和web页面的第二个不同点。（后者使用@page指令）。

③向文本文件添加HTML标记文本和asp.net服务器控件。可以添加html、body和form之外的任何html标记，这是因为用户控件不能单独使用，必须做为web页面的一部分使用。这是用户控件和web页面的第三个不同点。

### 三，源码 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Awesome-pyecharts</title>
                    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/bmap.min.js"></script>
                <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
                <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>
    
    </head>
    <body >
        <div id="a6cba4a7dcb24b2385cb0445a993ab4a" class="chart-container" style="width:1200px; height:800px; "></div>
        <script>
            var chart_a6cba4a7dcb24b2385cb0445a993ab4a = echarts.init(
                document.getElementById('a6cba4a7dcb24b2385cb0445a993ab4a'), 'white', {renderer: 'canvas'});
            var option_a6cba4a7dcb24b2385cb0445a993ab4a = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "aria": {
            "enabled": false
        },
        "color": [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc"
        ],
        "series": [
            {
                "type": "effectScatter",
                "name": "pm2.5",
                "coordinateSystem": "bmap",
                "showEffectOn": "render",
                "rippleEffect": {
                    "show": true,
                    "brushType": "stroke",
                    "scale": 2.5,
                    "period": 4
                },
                "symbolSize": 10,
                "data": [
                    {
                        "name": "\u6d77\u95e8",
                        "value": [
                            121.15,
                            31.89,
                            [
                                121.15,
                                31.89,
                                9
                            ]
                        ]
                    },
                    {
                        "name": "\u9102\u5c14\u591a\u65af",
                        "value": [
                            109.781327,
                            39.608266,
                            [
                                109.781327,
                                39.608266,
                                12
                            ]
                        ]
                    },
                    {
                        "name": "\u62db\u8fdc",
                        "value": [
                            120.38,
                            37.35,
                            [
                                120.38,
                                37.35,
                                12
                            ]
                        ]
                    },
                    {
                        "name": "\u821f\u5c71",
                        "value": [
                            122.207216,
                            29.985295,
                            [
                                122.207216,
                                29.985295,
                                12
                            ]
                        ]
                    },
                    {
                        "name": "\u9f50\u9f50\u54c8\u5c14",
                        "value": [
                            123.97,
                            47.33,
                            [
                                123.97,
                                47.33,
                                14
                            ]
                        ]
                    },
                    {
                        "name": "\u76d0\u57ce",
                        "value": [
                            120.13,
                            33.38,
                            [
                                120.13,
                                33.38,
                                15
                            ]
                        ]
                    },
                    {
                        "name": "\u8d64\u5cf0",
                        "value": [
                            118.87,
                            42.28,
                            [
                                118.87,
                                42.28,
                                16
                            ]
                        ]
                    },
                    {
                        "name": "\u9752\u5c9b",
                        "value": [
                            120.33,
                            36.07,
                            [
                                120.33,
                                36.07,
                                18
                            ]
                        ]
                    },
                    {
                        "name": "\u4e73\u5c71",
                        "value": [
                            121.52,
                            36.89,
                            [
                                121.52,
                                36.89,
                                18
                            ]
                        ]
                    },
                    {
                        "name": "\u91d1\u660c",
                        "value": [
                            102.188043,
                            38.520089,
                            [
                                102.188043,
                                38.520089,
                                19
                            ]
                        ]
                    },
                    {
                        "name": "\u6cc9\u5dde",
                        "value": [
                            118.58,
                            24.93,
                            [
                                118.58,
                                24.93,
                                21
                            ]
                        ]
                    },
                    {
                        "name": "\u83b1\u897f",
                        "value": [
                            120.53,
                            36.86,
                            [
                                120.53,
                                36.86,
                                21
                            ]
                        ]
                    },
                    {
                        "name": "\u65e5\u7167",
                        "value": [
                            119.46,
                            35.42,
                            [
                                119.46,
                                35.42,
                                21
                            ]
                        ]
                    },
                    {
                        "name": "\u80f6\u5357",
                        "value": [
                            119.97,
                            35.88,
                            [
                                119.97,
                                35.88,
                                22
                            ]
                        ]
                    },
                    {
                        "name": "\u5357\u901a",
                        "value": [
                            121.05,
                            32.08,
                            [
                                121.05,
                                32.08,
                                23
                            ]
                        ]
                    },
                    {
                        "name": "\u62c9\u8428",
                        "value": [
                            91.11,
                            29.97,
                            [
                                91.11,
                                29.97,
                                24
                            ]
                        ]
                    },
                    {
                        "name": "\u4e91\u6d6e",
                        "value": [
                            112.02,
                            22.93,
                            [
                                112.02,
                                22.93,
                                24
                            ]
                        ]
                    },
                    {
                        "name": "\u6885\u5dde",
                        "value": [
                            116.1,
                            24.55,
                            [
                                116.1,
                                24.55,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u6587\u767b",
                        "value": [
                            122.05,
                            37.2,
                            [
                                122.05,
                                37.2,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u4e0a\u6d77",
                        "value": [
                            121.473701,
                            31.230416,
                            [
                                121.48,
                                31.22,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u6500\u679d\u82b1",
                        "value": [
                            101.718637,
                            26.582347,
                            [
                                101.718637,
                                26.582347,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u5a01\u6d77",
                        "value": [
                            122.1,
                            37.5,
                            [
                                122.1,
                                37.5,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u627f\u5fb7",
                        "value": [
                            117.93,
                            40.97,
                            [
                                117.93,
                                40.97,
                                25
                            ]
                        ]
                    },
                    {
                        "name": "\u53a6\u95e8",
                        "value": [
                            118.1,
                            24.46,
                            [
                                118.1,
                                24.46,
                                26
                            ]
                        ]
                    },
                    {
                        "name": "\u6c55\u5c3e",
                        "value": [
                            115.375279,
                            22.786211,
                            [
                                115.375279,
                                22.786211,
                                26
                            ]
                        ]
                    },
                    {
                        "name": "\u6f6e\u5dde",
                        "value": [
                            116.63,
                            23.68,
                            [
                                116.63,
                                23.68,
                                26
                            ]
                        ]
                    },
                    {
                        "name": "\u4e39\u4e1c",
                        "value": [
                            124.37,
                            40.13,
                            [
                                124.37,
                                40.13,
                                27
                            ]
                        ]
                    },
                    {
                        "name": "\u592a\u4ed3",
                        "value": [
                            121.1,
                            31.45,
                            [
                                121.1,
                                31.45,
                                27
                            ]
                        ]
                    },
                    {
                        "name": "\u66f2\u9756",
                        "value": [
                            103.79,
                            25.51,
                            [
                                103.79,
                                25.51,
                                27
                            ]
                        ]
                    },
                    {
                        "name": "\u70df\u53f0",
                        "value": [
                            121.39,
                            37.52,
                            [
                                121.39,
                                37.52,
                                28
                            ]
                        ]
                    },
                    {
                        "name": "\u798f\u5dde",
                        "value": [
                            119.3,
                            26.08,
                            [
                                119.3,
                                26.08,
                                29
                            ]
                        ]
                    },
                    {
                        "name": "\u74e6\u623f\u5e97",
                        "value": [
                            121.979603,
                            39.627114,
                            [
                                121.979603,
                                39.627114,
                                30
                            ]
                        ]
                    },
                    {
                        "name": "\u5373\u58a8",
                        "value": [
                            120.45,
                            36.38,
                            [
                                120.45,
                                36.38,
                                30
                            ]
                        ]
                    },
                    {
                        "name": "\u629a\u987a",
                        "value": [
                            123.97,
                            41.97,
                            [
                                123.97,
                                41.97,
                                31
                            ]
                        ]
                    },
                    {
                        "name": "\u7389\u6eaa",
                        "value": [
                            102.52,
                            24.35,
                            [
                                102.52,
                                24.35,
                                31
                            ]
                        ]
                    },
                    {
                        "name": "\u5f20\u5bb6\u53e3",
                        "value": [
                            114.87,
                            40.82,
                            [
                                114.87,
                                40.82,
                                31
                            ]
                        ]
                    },
                    {
                        "name": "\u9633\u6cc9",
                        "value": [
                            113.57,
                            37.85,
                            [
                                113.57,
                                37.85,
                                31
                            ]
                        ]
                    },
                    {
                        "name": "\u83b1\u5dde",
                        "value": [
                            119.942327,
                            37.177017,
                            [
                                119.942327,
                                37.177017,
                                32
                            ]
                        ]
                    },
                    {
                        "name": "\u6e56\u5dde",
                        "value": [
                            120.1,
                            30.86,
                            [
                                120.1,
                                30.86,
                                32
                            ]
                        ]
                    },
                    {
                        "name": "\u6c55\u5934",
                        "value": [
                            116.69,
                            23.39,
                            [
                                116.69,
                                23.39,
                                32
                            ]
                        ]
                    },
                    {
                        "name": "\u6606\u5c71",
                        "value": [
                            120.95,
                            31.39,
                            [
                                120.95,
                                31.39,
                                33
                            ]
                        ]
                    },
                    {
                        "name": "\u5b81\u6ce2",
                        "value": [
                            121.56,
                            29.86,
                            [
                                121.56,
                                29.86,
                                33
                            ]
                        ]
                    },
                    {
                        "name": "\u6e5b\u6c5f",
                        "value": [
                            110.359377,
                            21.270708,
                            [
                                110.359377,
                                21.270708,
                                33
                            ]
                        ]
                    },
                    {
                        "name": "\u63ed\u9633",
                        "value": [
                            116.35,
                            23.55,
                            [
                                116.35,
                                23.55,
                                34
                            ]
                        ]
                    },
                    {
                        "name": "\u8363\u6210",
                        "value": [
                            122.41,
                            37.16,
                            [
                                122.41,
                                37.16,
                                34
                            ]
                        ]
                    },
                    {
                        "name": "\u8fde\u4e91\u6e2f",
                        "value": [
                            119.16,
                            34.59,
                            [
                                119.16,
                                34.59,
                                35
                            ]
                        ]
                    },
                    {
                        "name": "\u846b\u82a6\u5c9b",
                        "value": [
                            120.836932,
                            40.711052,
                            [
                                120.836932,
                                40.711052,
                                35
                            ]
                        ]
                    },
                    {
                        "name": "\u5e38\u719f",
                        "value": [
                            120.74,
                            31.64,
                            [
                                120.74,
                                31.64,
                                36
                            ]
                        ]
                    },
                    {
                        "name": "\u4e1c\u839e",
                        "value": [
                            113.75,
                            23.04,
                            [
                                113.75,
                                23.04,
                                36
                            ]
                        ]
                    },
                    {
                        "name": "\u6cb3\u6e90",
                        "value": [
                            114.68,
                            23.73,
                            [
                                114.68,
                                23.73,
                                36
                            ]
                        ]
                    },
                    {
                        "name": "\u6dee\u5b89",
                        "value": [
                            119.15,
                            33.5,
                            [
                                119.15,
                                33.5,
                                36
                            ]
                        ]
                    },
                    {
                        "name": "\u6cf0\u5dde",
                        "value": [
                            119.9,
                            32.49,
                            [
                                119.9,
                                32.49,
                                36
                            ]
                        ]
                    },
                    {
                        "name": "\u5357\u5b81",
                        "value": [
                            108.33,
                            22.84,
                            [
                                108.33,
                                22.84,
                                37
                            ]
                        ]
                    },
                    {
                        "name": "\u8425\u53e3",
                        "value": [
                            122.18,
                            40.65,
                            [
                                122.18,
                                40.65,
                                37
                            ]
                        ]
                    },
                    {
                        "name": "\u60e0\u5dde",
                        "value": [
                            114.4,
                            23.09,
                            [
                                114.4,
                                23.09,
                                37
                            ]
                        ]
                    },
                    {
                        "name": "\u6c5f\u9634",
                        "value": [
                            120.26,
                            31.91,
                            [
                                120.26,
                                31.91,
                                37
                            ]
                        ]
                    },
                    {
                        "name": "\u84ec\u83b1",
                        "value": [
                            120.75,
                            37.8,
                            [
                                120.75,
                                37.8,
                                37
                            ]
                        ]
                    },
                    {
                        "name": "\u97f6\u5173",
                        "value": [
                            113.62,
                            24.84,
                            [
                                113.62,
                                24.84,
                                38
                            ]
                        ]
                    },
                    {
                        "name": "\u5609\u5cea\u5173",
                        "value": [
                            98.289152,
                            39.77313,
                            [
                                98.289152,
                                39.77313,
                                38
                            ]
                        ]
                    },
                    {
                        "name": "\u5e7f\u5dde",
                        "value": [
                            113.23,
                            23.16,
                            [
                                113.23,
                                23.16,
                                38
                            ]
                        ]
                    },
                    {
                        "name": "\u5ef6\u5b89",
                        "value": [
                            109.47,
                            36.6,
                            [
                                109.47,
                                36.6,
                                38
                            ]
                        ]
                    },
                    {
                        "name": "\u592a\u539f",
                        "value": [
                            112.53,
                            37.87,
                            [
                                112.53,
                                37.87,
                                39
                            ]
                        ]
                    },
                    {
                        "name": "\u6e05\u8fdc",
                        "value": [
                            113.01,
                            23.7,
                            [
                                113.01,
                                23.7,
                                39
                            ]
                        ]
                    },
                    {
                        "name": "\u4e2d\u5c71",
                        "value": [
                            113.38,
                            22.52,
                            [
                                113.38,
                                22.52,
                                39
                            ]
                        ]
                    },
                    {
                        "name": "\u6606\u660e",
                        "value": [
                            102.73,
                            25.04,
                            [
                                102.73,
                                25.04,
                                39
                            ]
                        ]
                    },
                    {
                        "name": "\u5bff\u5149",
                        "value": [
                            118.73,
                            36.86,
                            [
                                118.73,
                                36.86,
                                40
                            ]
                        ]
                    },
                    {
                        "name": "\u76d8\u9526",
                        "value": [
                            122.070714,
                            41.119997,
                            [
                                122.070714,
                                41.119997,
                                40
                            ]
                        ]
                    },
                    {
                        "name": "\u957f\u6cbb",
                        "value": [
                            113.08,
                            36.18,
                            [
                                113.08,
                                36.18,
                                41
                            ]
                        ]
                    },
                    {
                        "name": "\u6df1\u5733",
                        "value": [
                            114.07,
                            22.62,
                            [
                                114.07,
                                22.62,
                                41
                            ]
                        ]
                    },
                    {
                        "name": "\u73e0\u6d77",
                        "value": [
                            113.52,
                            22.3,
                            [
                                113.52,
                                22.3,
                                42
                            ]
                        ]
                    },
                    {
                        "name": "\u5bbf\u8fc1",
                        "value": [
                            118.3,
                            33.96,
                            [
                                118.3,
                                33.96,
                                43
                            ]
                        ]
                    },
                    {
                        "name": "\u54b8\u9633",
                        "value": [
                            108.72,
                            34.36,
                            [
                                108.72,
                                34.36,
                                43
                            ]
                        ]
                    },
                    {
                        "name": "\u94dc\u5ddd",
                        "value": [
                            109.11,
                            35.09,
                            [
                                109.11,
                                35.09,
                                44
                            ]
                        ]
                    },
                    {
                        "name": "\u5e73\u5ea6",
                        "value": [
                            119.97,
                            36.77,
                            [
                                119.97,
                                36.77,
                                44
                            ]
                        ]
                    },
                    {
                        "name": "\u4f5b\u5c71",
                        "value": [
                            113.11,
                            23.05,
                            [
                                113.11,
                                23.05,
                                44
                            ]
                        ]
                    },
                    {
                        "name": "\u6d77\u53e3",
                        "value": [
                            110.35,
                            20.02,
                            [
                                110.35,
                                20.02,
                                44
                            ]
                        ]
                    },
                    {
                        "name": "\u6c5f\u95e8",
                        "value": [
                            113.06,
                            22.61,
                            [
                                113.06,
                                22.61,
                                45
                            ]
                        ]
                    },
                    {
                        "name": "\u7ae0\u4e18",
                        "value": [
                            117.53,
                            36.72,
                            [
                                117.53,
                                36.72,
                                45
                            ]
                        ]
                    },
                    {
                        "name": "\u8087\u5e86",
                        "value": [
                            112.44,
                            23.05,
                            [
                                112.44,
                                23.05,
                                46
                            ]
                        ]
                    },
                    {
                        "name": "\u5927\u8fde",
                        "value": [
                            121.62,
                            38.92,
                            [
                                121.62,
                                38.92,
                                47
                            ]
                        ]
                    },
                    {
                        "name": "\u4e34\u6c7e",
                        "value": [
                            111.5,
                            36.08,
                            [
                                111.5,
                                36.08,
                                47
                            ]
                        ]
                    },
                    {
                        "name": "\u5434\u6c5f",
                        "value": [
                            120.63,
                            31.16,
                            [
                                120.63,
                                31.16,
                                47
                            ]
                        ]
                    },
                    {
                        "name": "\u77f3\u5634\u5c71",
                        "value": [
                            106.39,
                            39.04,
                            [
                                106.39,
                                39.04,
                                49
                            ]
                        ]
                    },
                    {
                        "name": "\u6c88\u9633",
                        "value": [
                            123.38,
                            41.8,
                            [
                                123.38,
                                41.8,
                                50
                            ]
                        ]
                    },
                    {
                        "name": "\u82cf\u5dde",
                        "value": [
                            120.62,
                            31.32,
                            [
                                120.62,
                                31.32,
                                50
                            ]
                        ]
                    },
                    {
                        "name": "\u8302\u540d",
                        "value": [
                            110.88,
                            21.68,
                            [
                                110.88,
                                21.68,
                                50
                            ]
                        ]
                    },
                    {
                        "name": "\u5609\u5174",
                        "value": [
                            120.76,
                            30.77,
                            [
                                120.76,
                                30.77,
                                51
                            ]
                        ]
                    },
                    {
                        "name": "\u957f\u6625",
                        "value": [
                            125.35,
                            43.88,
                            [
                                125.35,
                                43.88,
                                51
                            ]
                        ]
                    },
                    {
                        "name": "\u80f6\u5dde",
                        "value": [
                            120.03336,
                            36.264622,
                            [
                                120.03336,
                                36.264622,
                                52
                            ]
                        ]
                    },
                    {
                        "name": "\u94f6\u5ddd",
                        "value": [
                            106.27,
                            38.47,
                            [
                                106.27,
                                38.47,
                                52
                            ]
                        ]
                    },
                    {
                        "name": "\u5f20\u5bb6\u6e2f",
                        "value": [
                            120.555821,
                            31.875428,
                            [
                                120.555821,
                                31.875428,
                                52
                            ]
                        ]
                    },
                    {
                        "name": "\u4e09\u95e8\u5ce1",
                        "value": [
                            111.19,
                            34.76,
                            [
                                111.19,
                                34.76,
                                53
                            ]
                        ]
                    },
                    {
                        "name": "\u9526\u5dde",
                        "value": [
                            121.15,
                            41.13,
                            [
                                121.15,
                                41.13,
                                54
                            ]
                        ]
                    },
                    {
                        "name": "\u5357\u660c",
                        "value": [
                            115.89,
                            28.68,
                            [
                                115.89,
                                28.68,
                                54
                            ]
                        ]
                    },
                    {
                        "name": "\u67f3\u5dde",
                        "value": [
                            109.4,
                            24.33,
                            [
                                109.4,
                                24.33,
                                54
                            ]
                        ]
                    },
                    {
                        "name": "\u4e09\u4e9a",
                        "value": [
                            109.511909,
                            18.252847,
                            [
                                109.511909,
                                18.252847,
                                54
                            ]
                        ]
                    },
                    {
                        "name": "\u81ea\u8d21",
                        "value": [
                            104.778442,
                            29.33903,
                            [
                                104.778442,
                                29.33903,
                                56
                            ]
                        ]
                    },
                    {
                        "name": "\u5409\u6797",
                        "value": [
                            125.32599,
                            43.896536,
                            [
                                126.57,
                                43.87,
                                56
                            ]
                        ]
                    },
                    {
                        "name": "\u9633\u6c5f",
                        "value": [
                            111.95,
                            21.85,
                            [
                                111.95,
                                21.85,
                                57
                            ]
                        ]
                    },
                    {
                        "name": "\u6cf8\u5dde",
                        "value": [
                            105.39,
                            28.91,
                            [
                                105.39,
                                28.91,
                                57
                            ]
                        ]
                    },
                    {
                        "name": "\u897f\u5b81",
                        "value": [
                            101.74,
                            36.56,
                            [
                                101.74,
                                36.56,
                                57
                            ]
                        ]
                    },
                    {
                        "name": "\u5b9c\u5bbe",
                        "value": [
                            104.56,
                            29.77,
                            [
                                104.56,
                                29.77,
                                58
                            ]
                        ]
                    },
                    {
                        "name": "\u547c\u548c\u6d69\u7279",
                        "value": [
                            111.65,
                            40.82,
                            [
                                111.65,
                                40.82,
                                58
                            ]
                        ]
                    },
                    {
                        "name": "\u6210\u90fd",
                        "value": [
                            104.06,
                            30.67,
                            [
                                104.06,
                                30.67,
                                58
                            ]
                        ]
                    },
                    {
                        "name": "\u5927\u540c",
                        "value": [
                            113.3,
                            40.12,
                            [
                                113.3,
                                40.12,
                                58
                            ]
                        ]
                    },
                    {
                        "name": "\u9547\u6c5f",
                        "value": [
                            119.44,
                            32.2,
                            [
                                119.44,
                                32.2,
                                59
                            ]
                        ]
                    },
                    {
                        "name": "\u6842\u6797",
                        "value": [
                            110.28,
                            25.29,
                            [
                                110.28,
                                25.29,
                                59
                            ]
                        ]
                    },
                    {
                        "name": "\u5f20\u5bb6\u754c",
                        "value": [
                            110.479191,
                            29.117096,
                            [
                                110.479191,
                                29.117096,
                                59
                            ]
                        ]
                    },
                    {
                        "name": "\u5b9c\u5174",
                        "value": [
                            119.82,
                            31.36,
                            [
                                119.82,
                                31.36,
                                59
                            ]
                        ]
                    },
                    {
                        "name": "\u5317\u6d77",
                        "value": [
                            109.12,
                            21.49,
                            [
                                109.12,
                                21.49,
                                60
                            ]
                        ]
                    },
                    {
                        "name": "\u897f\u5b89",
                        "value": [
                            108.95,
                            34.27,
                            [
                                108.95,
                                34.27,
                                61
                            ]
                        ]
                    },
                    {
                        "name": "\u91d1\u575b",
                        "value": [
                            119.56,
                            31.74,
                            [
                                119.56,
                                31.74,
                                62
                            ]
                        ]
                    },
                    {
                        "name": "\u4e1c\u8425",
                        "value": [
                            118.49,
                            37.46,
                            [
                                118.49,
                                37.46,
                                62
                            ]
                        ]
                    },
                    {
                        "name": "\u7261\u4e39\u6c5f",
                        "value": [
                            129.58,
                            44.6,
                            [
                                129.58,
                                44.6,
                                63
                            ]
                        ]
                    },
                    {
                        "name": "\u9075\u4e49",
                        "value": [
                            106.9,
                            27.7,
                            [
                                106.9,
                                27.7,
                                63
                            ]
                        ]
                    },
                    {
                        "name": "\u7ecd\u5174",
                        "value": [
                            120.58,
                            30.01,
                            [
                                120.58,
                                30.01,
                                63
                            ]
                        ]
                    },
                    {
                        "name": "\u626c\u5dde",
                        "value": [
                            119.42,
                            32.39,
                            [
                                119.42,
                                32.39,
                                64
                            ]
                        ]
                    },
                    {
                        "name": "\u5e38\u5dde",
                        "value": [
                            119.95,
                            31.79,
                            [
                                119.95,
                                31.79,
                                64
                            ]
                        ]
                    },
                    {
                        "name": "\u6f4d\u574a",
                        "value": [
                            119.1,
                            36.62,
                            [
                                119.1,
                                36.62,
                                65
                            ]
                        ]
                    },
                    {
                        "name": "\u91cd\u5e86",
                        "value": [
                            106.551556,
                            29.563009,
                            [
                                106.54,
                                29.59,
                                66
                            ]
                        ]
                    },
                    {
                        "name": "\u53f0\u5dde",
                        "value": [
                            121.420757,
                            28.656386,
                            [
                                121.420757,
                                28.656386,
                                67
                            ]
                        ]
                    },
                    {
                        "name": "\u5357\u4eac",
                        "value": [
                            118.78,
                            32.04,
                            [
                                118.78,
                                32.04,
                                67
                            ]
                        ]
                    },
                    {
                        "name": "\u6ee8\u5dde",
                        "value": [
                            118.03,
                            37.36,
                            [
                                118.03,
                                37.36,
                                70
                            ]
                        ]
                    },
                    {
                        "name": "\u8d35\u9633",
                        "value": [
                            106.71,
                            26.57,
                            [
                                106.71,
                                26.57,
                                71
                            ]
                        ]
                    },
                    {
                        "name": "\u65e0\u9521",
                        "value": [
                            120.29,
                            31.59,
                            [
                                120.29,
                                31.59,
                                71
                            ]
                        ]
                    },
                    {
                        "name": "\u672c\u6eaa",
                        "value": [
                            123.73,
                            41.3,
                            [
                                123.73,
                                41.3,
                                71
                            ]
                        ]
                    },
                    {
                        "name": "\u514b\u62c9\u739b\u4f9d",
                        "value": [
                            84.77,
                            45.59,
                            [
                                84.77,
                                45.59,
                                72
                            ]
                        ]
                    },
                    {
                        "name": "\u6e2d\u5357",
                        "value": [
                            109.5,
                            34.52,
                            [
                                109.5,
                                34.52,
                                72
                            ]
                        ]
                    },
                    {
                        "name": "\u9a6c\u978d\u5c71",
                        "value": [
                            118.48,
                            31.56,
                            [
                                118.48,
                                31.56,
                                72
                            ]
                        ]
                    },
                    {
                        "name": "\u5b9d\u9e21",
                        "value": [
                            107.15,
                            34.38,
                            [
                                107.15,
                                34.38,
                                72
                            ]
                        ]
                    },
                    {
                        "name": "\u7126\u4f5c",
                        "value": [
                            113.21,
                            35.24,
                            [
                                113.21,
                                35.24,
                                75
                            ]
                        ]
                    },
                    {
                        "name": "\u53e5\u5bb9",
                        "value": [
                            119.16,
                            31.95,
                            [
                                119.16,
                                31.95,
                                75
                            ]
                        ]
                    },
                    {
                        "name": "\u5317\u4eac",
                        "value": [
                            116.407526,
                            39.90403,
                            [
                                116.46,
                                39.92,
                                79
                            ]
                        ]
                    },
                    {
                        "name": "\u5f90\u5dde",
                        "value": [
                            117.2,
                            34.26,
                            [
                                117.2,
                                34.26,
                                79
                            ]
                        ]
                    },
                    {
                        "name": "\u8861\u6c34",
                        "value": [
                            115.72,
                            37.72,
                            [
                                115.72,
                                37.72,
                                80
                            ]
                        ]
                    },
                    {
                        "name": "\u5305\u5934",
                        "value": [
                            110,
                            40.58,
                            [
                                110,
                                40.58,
                                80
                            ]
                        ]
                    },
                    {
                        "name": "\u7ef5\u9633",
                        "value": [
                            104.73,
                            31.48,
                            [
                                104.73,
                                31.48,
                                80
                            ]
                        ]
                    },
                    {
                        "name": "\u4e4c\u9c81\u6728\u9f50",
                        "value": [
                            87.68,
                            43.77,
                            [
                                87.68,
                                43.77,
                                84
                            ]
                        ]
                    },
                    {
                        "name": "\u67a3\u5e84",
                        "value": [
                            117.57,
                            34.86,
                            [
                                117.57,
                                34.86,
                                84
                            ]
                        ]
                    },
                    {
                        "name": "\u676d\u5dde",
                        "value": [
                            120.19,
                            30.26,
                            [
                                120.19,
                                30.26,
                                84
                            ]
                        ]
                    },
                    {
                        "name": "\u6dc4\u535a",
                        "value": [
                            118.05,
                            36.78,
                            [
                                118.05,
                                36.78,
                                85
                            ]
                        ]
                    },
                    {
                        "name": "\u978d\u5c71",
                        "value": [
                            122.85,
                            41.12,
                            [
                                122.85,
                                41.12,
                                86
                            ]
                        ]
                    },
                    {
                        "name": "\u6ea7\u9633",
                        "value": [
                            119.48,
                            31.43,
                            [
                                119.48,
                                31.43,
                                86
                            ]
                        ]
                    },
                    {
                        "name": "\u5e93\u5c14\u52d2",
                        "value": [
                            86.06,
                            41.68,
                            [
                                86.06,
                                41.68,
                                86
                            ]
                        ]
                    },
                    {
                        "name": "\u5b89\u9633",
                        "value": [
                            114.35,
                            36.1,
                            [
                                114.35,
                                36.1,
                                90
                            ]
                        ]
                    },
                    {
                        "name": "\u5f00\u5c01",
                        "value": [
                            114.35,
                            34.79,
                            [
                                114.35,
                                34.79,
                                90
                            ]
                        ]
                    },
                    {
                        "name": "\u6d4e\u5357",
                        "value": [
                            117,
                            36.65,
                            [
                                117,
                                36.65,
                                92
                            ]
                        ]
                    },
                    {
                        "name": "\u5fb7\u9633",
                        "value": [
                            104.37,
                            31.13,
                            [
                                104.37,
                                31.13,
                                93
                            ]
                        ]
                    },
                    {
                        "name": "\u6e29\u5dde",
                        "value": [
                            120.65,
                            28.01,
                            [
                                120.65,
                                28.01,
                                95
                            ]
                        ]
                    },
                    {
                        "name": "\u4e5d\u6c5f",
                        "value": [
                            115.97,
                            29.71,
                            [
                                115.97,
                                29.71,
                                96
                            ]
                        ]
                    },
                    {
                        "name": "\u90af\u90f8",
                        "value": [
                            114.47,
                            36.6,
                            [
                                114.47,
                                36.6,
                                98
                            ]
                        ]
                    },
                    {
                        "name": "\u4e34\u5b89",
                        "value": [
                            119.72,
                            30.23,
                            [
                                119.72,
                                30.23,
                                99
                            ]
                        ]
                    },
                    {
                        "name": "\u5170\u5dde",
                        "value": [
                            103.73,
                            36.03,
                            [
                                103.73,
                                36.03,
                                99
                            ]
                        ]
                    },
                    {
                        "name": "\u6ca7\u5dde",
                        "value": [
                            116.83,
                            38.33,
                            [
                                116.83,
                                38.33,
                                100
                            ]
                        ]
                    },
                    {
                        "name": "\u4e34\u6c82",
                        "value": [
                            118.35,
                            35.05,
                            [
                                118.35,
                                35.05,
                                103
                            ]
                        ]
                    },
                    {
                        "name": "\u5357\u5145",
                        "value": [
                            106.110698,
                            30.837793,
                            [
                                106.110698,
                                30.837793,
                                104
                            ]
                        ]
                    },
                    {
                        "name": "\u5929\u6d25",
                        "value": [
                            117.200983,
                            39.084158,
                            [
                                117.2,
                                39.13,
                                105
                            ]
                        ]
                    },
                    {
                        "name": "\u5bcc\u9633",
                        "value": [
                            119.95,
                            30.07,
                            [
                                119.95,
                                30.07,
                                106
                            ]
                        ]
                    },
                    {
                        "name": "\u6cf0\u5b89",
                        "value": [
                            117.13,
                            36.18,
                            [
                                117.13,
                                36.18,
                                112
                            ]
                        ]
                    },
                    {
                        "name": "\u8bf8\u66a8",
                        "value": [
                            120.23,
                            29.71,
                            [
                                120.23,
                                29.71,
                                112
                            ]
                        ]
                    },
                    {
                        "name": "\u90d1\u5dde",
                        "value": [
                            113.65,
                            34.76,
                            [
                                113.65,
                                34.76,
                                113
                            ]
                        ]
                    },
                    {
                        "name": "\u54c8\u5c14\u6ee8",
                        "value": [
                            126.63,
                            45.75,
                            [
                                126.63,
                                45.75,
                                114
                            ]
                        ]
                    },
                    {
                        "name": "\u804a\u57ce",
                        "value": [
                            115.97,
                            36.45,
                            [
                                115.97,
                                36.45,
                                116
                            ]
                        ]
                    },
                    {
                        "name": "\u829c\u6e56",
                        "value": [
                            118.38,
                            31.33,
                            [
                                118.38,
                                31.33,
                                117
                            ]
                        ]
                    },
                    {
                        "name": "\u5510\u5c71",
                        "value": [
                            118.02,
                            39.63,
                            [
                                118.02,
                                39.63,
                                119
                            ]
                        ]
                    },
                    {
                        "name": "\u5e73\u9876\u5c71",
                        "value": [
                            113.29,
                            33.75,
                            [
                                113.29,
                                33.75,
                                119
                            ]
                        ]
                    },
                    {
                        "name": "\u90a2\u53f0",
                        "value": [
                            114.48,
                            37.05,
                            [
                                114.48,
                                37.05,
                                119
                            ]
                        ]
                    },
                    {
                        "name": "\u5fb7\u5dde",
                        "value": [
                            116.29,
                            37.45,
                            [
                                116.29,
                                37.45,
                                120
                            ]
                        ]
                    },
                    {
                        "name": "\u6d4e\u5b81",
                        "value": [
                            116.59,
                            35.38,
                            [
                                116.59,
                                35.38,
                                120
                            ]
                        ]
                    },
                    {
                        "name": "\u8346\u5dde",
                        "value": [
                            112.239741,
                            30.335165,
                            [
                                112.239741,
                                30.335165,
                                127
                            ]
                        ]
                    },
                    {
                        "name": "\u5b9c\u660c",
                        "value": [
                            111.3,
                            30.7,
                            [
                                111.3,
                                30.7,
                                130
                            ]
                        ]
                    },
                    {
                        "name": "\u4e49\u4e4c",
                        "value": [
                            120.06,
                            29.32,
                            [
                                120.06,
                                29.32,
                                132
                            ]
                        ]
                    },
                    {
                        "name": "\u4e3d\u6c34",
                        "value": [
                            119.92,
                            28.45,
                            [
                                119.92,
                                28.45,
                                133
                            ]
                        ]
                    },
                    {
                        "name": "\u6d1b\u9633",
                        "value": [
                            112.44,
                            34.7,
                            [
                                112.44,
                                34.7,
                                134
                            ]
                        ]
                    },
                    {
                        "name": "\u79e6\u7687\u5c9b",
                        "value": [
                            119.57,
                            39.95,
                            [
                                119.57,
                                39.95,
                                136
                            ]
                        ]
                    },
                    {
                        "name": "\u682a\u6d32",
                        "value": [
                            113.16,
                            27.83,
                            [
                                113.16,
                                27.83,
                                143
                            ]
                        ]
                    },
                    {
                        "name": "\u77f3\u5bb6\u5e84",
                        "value": [
                            114.48,
                            38.03,
                            [
                                114.48,
                                38.03,
                                147
                            ]
                        ]
                    },
                    {
                        "name": "\u83b1\u829c",
                        "value": [
                            117.67,
                            36.19,
                            [
                                117.67,
                                36.19,
                                148
                            ]
                        ]
                    },
                    {
                        "name": "\u5e38\u5fb7",
                        "value": [
                            111.69,
                            29.05,
                            [
                                111.69,
                                29.05,
                                152
                            ]
                        ]
                    },
                    {
                        "name": "\u4fdd\u5b9a",
                        "value": [
                            115.48,
                            38.85,
                            [
                                115.48,
                                38.85,
                                153
                            ]
                        ]
                    },
                    {
                        "name": "\u6e58\u6f6d",
                        "value": [
                            112.91,
                            27.87,
                            [
                                112.91,
                                27.87,
                                154
                            ]
                        ]
                    },
                    {
                        "name": "\u91d1\u534e",
                        "value": [
                            119.64,
                            29.12,
                            [
                                119.64,
                                29.12,
                                157
                            ]
                        ]
                    },
                    {
                        "name": "\u5cb3\u9633",
                        "value": [
                            113.09,
                            29.37,
                            [
                                113.09,
                                29.37,
                                169
                            ]
                        ]
                    },
                    {
                        "name": "\u957f\u6c99",
                        "value": [
                            113,
                            28.21,
                            [
                                113,
                                28.21,
                                175
                            ]
                        ]
                    },
                    {
                        "name": "\u8862\u5dde",
                        "value": [
                            118.88,
                            28.97,
                            [
                                118.88,
                                28.97,
                                177
                            ]
                        ]
                    },
                    {
                        "name": "\u5eca\u574a",
                        "value": [
                            116.7,
                            39.53,
                            [
                                116.7,
                                39.53,
                                193
                            ]
                        ]
                    },
                    {
                        "name": "\u83cf\u6cfd",
                        "value": [
                            115.480656,
                            35.23375,
                            [
                                115.480656,
                                35.23375,
                                194
                            ]
                        ]
                    },
                    {
                        "name": "\u5408\u80a5",
                        "value": [
                            117.27,
                            31.86,
                            [
                                117.27,
                                31.86,
                                229
                            ]
                        ]
                    },
                    {
                        "name": "\u6b66\u6c49",
                        "value": [
                            114.31,
                            30.52,
                            [
                                114.31,
                                30.52,
                                273
                            ]
                        ]
                    },
                    {
                        "name": "\u5927\u5e86",
                        "value": [
                            125.03,
                            46.58,
                            [
                                125.03,
                                46.58,
                                279
                            ]
                        ]
                    }
                ],
                "label": {
                    "show": false,
                    "position": "right",
                    "margin": 8,
                    "formatter": "{b}"
                },
                "itemStyle": {
                    "color": "purple"
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "pm2.5"
                ],
                "selected": {},
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14,
                "backgroundColor": "transparent",
                "borderColor": "#ccc",
                "borderWidth": 1,
                "borderRadius": 0,
                "pageButtonItemGap": 5,
                "pageButtonPosition": "end",
                "pageFormatter": "{current}/{total}",
                "pageIconColor": "#2f4554",
                "pageIconInactiveColor": "#aaa",
                "pageIconSize": 15,
                "animationDurationUpdate": 800,
                "selector": false,
                "selectorPosition": "auto",
                "selectorItemGap": 7,
                "selectorButtonGap": 10
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "showContent": true,
            "alwaysShowContent": false,
            "showDelay": 0,
            "hideDelay": 100,
            "enterable": false,
            "confine": false,
            "appendToBody": false,
            "transitionDuration": 0.4,
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0,
            "padding": 5,
            "order": "seriesAsc"
        },
        "title": [
            {
                "show": true,
                "text": "\u5168\u56fd\u4e3b\u8981\u57ce\u5e02\u7a7a\u6c14\u8d28\u91cf",
                "target": "blank",
                "subtext": "data from PM25.in",
                "sublink": "http://www.pm25.in",
                "subtarget": "blank",
                "left": "center",
                "padding": 5,
                "itemGap": 10,
                "textAlign": "auto",
                "textVerticalAlign": "auto",
                "triggerEvent": false,
                "textStyle": {
                    "color": "#fff"
                }
            }
        ],
        "bmap": {
            "center": [
                104.114129,
                37.550339
            ],
            "zoom": 5,
            "roam": true,
            "mapStyle": {
                "styleJson": [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#064f85"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#005b96",
                            "lightness": 1
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#00508b"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "green",
                        "elementType": "all",
                        "stylers": {
                            "color": "#056197",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "subway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#029fd4"
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a5787"
                        }
                    },
                    {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    }
                ]
            }
        }
    };
            chart_a6cba4a7dcb24b2385cb0445a993ab4a.setOption(option_a6cba4a7dcb24b2385cb0445a993ab4a);
                var bmap = chart_a6cba4a7dcb24b2385cb0445a993ab4a.getModel().getComponent('bmap').getBMap();
        </script>
    </body>
    </html>

### 四，源码解释 ###

可视化如图，不再详细解释

[image-20230915091433700]: https://img-blog.csdnimg.cn/img_convert/7afe09f89d0c65fb0cd3465f926f59f8.png