前端控件宝典：UI组件的完整指南(47)——箱线图（增加伸缩滑块）【源码在文末并附解释】

左手的ㄟ右手 2023-10-16 09:34 14阅读 0赞

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

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

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

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

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

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

访问网址：http://59.110.22.223:8080/Model\_qianduan/calendar\_heatmap.html

![image-20230915093458063][]

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

自定义控件  
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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>
    
    </head>
    <body >
        <div id="de18d4e5d37b464c9937340a46b0162d" class="chart-container" style="width:900px; height:500px; "></div>
        <script>
            var chart_de18d4e5d37b464c9937340a46b0162d = echarts.init(
                document.getElementById('de18d4e5d37b464c9937340a46b0162d'), 'white', {renderer: 'canvas'});
            var option_de18d4e5d37b464c9937340a46b0162d = {
        "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": "heatmap",
                "coordinateSystem": "calendar",
                "data": [
                    [
                        "2017-01-01",
                        7197
                    ],
                    [
                        "2017-01-02",
                        21053
                    ],
                    [
                        "2017-01-03",
                        24522
                    ],
                    [
                        "2017-01-04",
                        10379
                    ],
                    [
                        "2017-01-05",
                        20466
                    ],
                    [
                        "2017-01-06",
                        2049
                    ],
                    [
                        "2017-01-07",
                        18977
                    ],
                    [
                        "2017-01-08",
                        16802
                    ],
                    [
                        "2017-01-09",
                        7517
                    ],
                    [
                        "2017-01-10",
                        16380
                    ],
                    [
                        "2017-01-11",
                        21718
                    ],
                    [
                        "2017-01-12",
                        1045
                    ],
                    [
                        "2017-01-13",
                        5787
                    ],
                    [
                        "2017-01-14",
                        18461
                    ],
                    [
                        "2017-01-15",
                        21580
                    ],
                    [
                        "2017-01-16",
                        20931
                    ],
                    [
                        "2017-01-17",
                        2885
                    ],
                    [
                        "2017-01-18",
                        13475
                    ],
                    [
                        "2017-01-19",
                        23727
                    ],
                    [
                        "2017-01-20",
                        23450
                    ],
                    [
                        "2017-01-21",
                        9082
                    ],
                    [
                        "2017-01-22",
                        13933
                    ],
                    [
                        "2017-01-23",
                        15800
                    ],
                    [
                        "2017-01-24",
                        8540
                    ],
                    [
                        "2017-01-25",
                        17417
                    ],
                    [
                        "2017-01-26",
                        12276
                    ],
                    [
                        "2017-01-27",
                        19273
                    ],
                    [
                        "2017-01-28",
                        10295
                    ],
                    [
                        "2017-01-29",
                        21060
                    ],
                    [
                        "2017-01-30",
                        15905
                    ],
                    [
                        "2017-01-31",
                        17785
                    ],
                    [
                        "2017-02-01",
                        19921
                    ],
                    [
                        "2017-02-02",
                        4308
                    ],
                    [
                        "2017-02-03",
                        20384
                    ],
                    [
                        "2017-02-04",
                        24703
                    ],
                    [
                        "2017-02-05",
                        21330
                    ],
                    [
                        "2017-02-06",
                        4212
                    ],
                    [
                        "2017-02-07",
                        2669
                    ],
                    [
                        "2017-02-08",
                        5279
                    ],
                    [
                        "2017-02-09",
                        9104
                    ],
                    [
                        "2017-02-10",
                        6529
                    ],
                    [
                        "2017-02-11",
                        14161
                    ],
                    [
                        "2017-02-12",
                        6684
                    ],
                    [
                        "2017-02-13",
                        15908
                    ],
                    [
                        "2017-02-14",
                        14068
                    ],
                    [
                        "2017-02-15",
                        13594
                    ],
                    [
                        "2017-02-16",
                        3193
                    ],
                    [
                        "2017-02-17",
                        16791
                    ],
                    [
                        "2017-02-18",
                        22348
                    ],
                    [
                        "2017-02-19",
                        17442
                    ],
                    [
                        "2017-02-20",
                        8343
                    ],
                    [
                        "2017-02-21",
                        7659
                    ],
                    [
                        "2017-02-22",
                        10576
                    ],
                    [
                        "2017-02-23",
                        10656
                    ],
                    [
                        "2017-02-24",
                        14149
                    ],
                    [
                        "2017-02-25",
                        19702
                    ],
                    [
                        "2017-02-26",
                        16607
                    ],
                    [
                        "2017-02-27",
                        19444
                    ],
                    [
                        "2017-02-28",
                        18633
                    ],
                    [
                        "2017-03-01",
                        13039
                    ],
                    [
                        "2017-03-02",
                        9291
                    ],
                    [
                        "2017-03-03",
                        24585
                    ],
                    [
                        "2017-03-04",
                        12646
                    ],
                    [
                        "2017-03-05",
                        22078
                    ],
                    [
                        "2017-03-06",
                        24115
                    ],
                    [
                        "2017-03-07",
                        7225
                    ],
                    [
                        "2017-03-08",
                        7228
                    ],
                    [
                        "2017-03-09",
                        15324
                    ],
                    [
                        "2017-03-10",
                        19726
                    ],
                    [
                        "2017-03-11",
                        3709
                    ],
                    [
                        "2017-03-12",
                        19234
                    ],
                    [
                        "2017-03-13",
                        14376
                    ],
                    [
                        "2017-03-14",
                        15872
                    ],
                    [
                        "2017-03-15",
                        8245
                    ],
                    [
                        "2017-03-16",
                        23055
                    ],
                    [
                        "2017-03-17",
                        17275
                    ],
                    [
                        "2017-03-18",
                        18998
                    ],
                    [
                        "2017-03-19",
                        6904
                    ],
                    [
                        "2017-03-20",
                        5596
                    ],
                    [
                        "2017-03-21",
                        3220
                    ],
                    [
                        "2017-03-22",
                        22746
                    ],
                    [
                        "2017-03-23",
                        16296
                    ],
                    [
                        "2017-03-24",
                        7872
                    ],
                    [
                        "2017-03-25",
                        23205
                    ],
                    [
                        "2017-03-26",
                        18219
                    ],
                    [
                        "2017-03-27",
                        18154
                    ],
                    [
                        "2017-03-28",
                        16055
                    ],
                    [
                        "2017-03-29",
                        15062
                    ],
                    [
                        "2017-03-30",
                        16438
                    ],
                    [
                        "2017-03-31",
                        23135
                    ],
                    [
                        "2017-04-01",
                        2391
                    ],
                    [
                        "2017-04-02",
                        21725
                    ],
                    [
                        "2017-04-03",
                        23722
                    ],
                    [
                        "2017-04-04",
                        4665
                    ],
                    [
                        "2017-04-05",
                        2132
                    ],
                    [
                        "2017-04-06",
                        3827
                    ],
                    [
                        "2017-04-07",
                        21645
                    ],
                    [
                        "2017-04-08",
                        14377
                    ],
                    [
                        "2017-04-09",
                        11757
                    ],
                    [
                        "2017-04-10",
                        14296
                    ],
                    [
                        "2017-04-11",
                        10556
                    ],
                    [
                        "2017-04-12",
                        7518
                    ],
                    [
                        "2017-04-13",
                        14160
                    ],
                    [
                        "2017-04-14",
                        18494
                    ],
                    [
                        "2017-04-15",
                        15099
                    ],
                    [
                        "2017-04-16",
                        14208
                    ],
                    [
                        "2017-04-17",
                        8419
                    ],
                    [
                        "2017-04-18",
                        20040
                    ],
                    [
                        "2017-04-19",
                        21579
                    ],
                    [
                        "2017-04-20",
                        2113
                    ],
                    [
                        "2017-04-21",
                        24489
                    ],
                    [
                        "2017-04-22",
                        18105
                    ],
                    [
                        "2017-04-23",
                        19333
                    ],
                    [
                        "2017-04-24",
                        10025
                    ],
                    [
                        "2017-04-25",
                        14812
                    ],
                    [
                        "2017-04-26",
                        22604
                    ],
                    [
                        "2017-04-27",
                        23121
                    ],
                    [
                        "2017-04-28",
                        4969
                    ],
                    [
                        "2017-04-29",
                        9278
                    ],
                    [
                        "2017-04-30",
                        4390
                    ],
                    [
                        "2017-05-01",
                        22765
                    ],
                    [
                        "2017-05-02",
                        22947
                    ],
                    [
                        "2017-05-03",
                        24426
                    ],
                    [
                        "2017-05-04",
                        17082
                    ],
                    [
                        "2017-05-05",
                        23320
                    ],
                    [
                        "2017-05-06",
                        5084
                    ],
                    [
                        "2017-05-07",
                        19887
                    ],
                    [
                        "2017-05-08",
                        22682
                    ],
                    [
                        "2017-05-09",
                        9590
                    ],
                    [
                        "2017-05-10",
                        16323
                    ],
                    [
                        "2017-05-11",
                        20449
                    ],
                    [
                        "2017-05-12",
                        12699
                    ],
                    [
                        "2017-05-13",
                        16738
                    ],
                    [
                        "2017-05-14",
                        8682
                    ],
                    [
                        "2017-05-15",
                        13875
                    ],
                    [
                        "2017-05-16",
                        15701
                    ],
                    [
                        "2017-05-17",
                        11654
                    ],
                    [
                        "2017-05-18",
                        20516
                    ],
                    [
                        "2017-05-19",
                        23085
                    ],
                    [
                        "2017-05-20",
                        1566
                    ],
                    [
                        "2017-05-21",
                        13009
                    ],
                    [
                        "2017-05-22",
                        8241
                    ],
                    [
                        "2017-05-23",
                        10501
                    ],
                    [
                        "2017-05-24",
                        20005
                    ],
                    [
                        "2017-05-25",
                        15932
                    ],
                    [
                        "2017-05-26",
                        23434
                    ],
                    [
                        "2017-05-27",
                        11832
                    ],
                    [
                        "2017-05-28",
                        24718
                    ],
                    [
                        "2017-05-29",
                        16066
                    ],
                    [
                        "2017-05-30",
                        24381
                    ],
                    [
                        "2017-05-31",
                        17240
                    ],
                    [
                        "2017-06-01",
                        2303
                    ],
                    [
                        "2017-06-02",
                        22141
                    ],
                    [
                        "2017-06-03",
                        9705
                    ],
                    [
                        "2017-06-04",
                        16127
                    ],
                    [
                        "2017-06-05",
                        14700
                    ],
                    [
                        "2017-06-06",
                        10273
                    ],
                    [
                        "2017-06-07",
                        21458
                    ],
                    [
                        "2017-06-08",
                        19875
                    ],
                    [
                        "2017-06-09",
                        9576
                    ],
                    [
                        "2017-06-10",
                        9438
                    ],
                    [
                        "2017-06-11",
                        18263
                    ],
                    [
                        "2017-06-12",
                        10733
                    ],
                    [
                        "2017-06-13",
                        10943
                    ],
                    [
                        "2017-06-14",
                        6900
                    ],
                    [
                        "2017-06-15",
                        21440
                    ],
                    [
                        "2017-06-16",
                        20332
                    ],
                    [
                        "2017-06-17",
                        17240
                    ],
                    [
                        "2017-06-18",
                        16224
                    ],
                    [
                        "2017-06-19",
                        23363
                    ],
                    [
                        "2017-06-20",
                        4478
                    ],
                    [
                        "2017-06-21",
                        20581
                    ],
                    [
                        "2017-06-22",
                        10673
                    ],
                    [
                        "2017-06-23",
                        10954
                    ],
                    [
                        "2017-06-24",
                        16097
                    ],
                    [
                        "2017-06-25",
                        17388
                    ],
                    [
                        "2017-06-26",
                        7878
                    ],
                    [
                        "2017-06-27",
                        7084
                    ],
                    [
                        "2017-06-28",
                        6147
                    ],
                    [
                        "2017-06-29",
                        22559
                    ],
                    [
                        "2017-06-30",
                        9146
                    ],
                    [
                        "2017-07-01",
                        17050
                    ],
                    [
                        "2017-07-02",
                        11029
                    ],
                    [
                        "2017-07-03",
                        18698
                    ],
                    [
                        "2017-07-04",
                        18756
                    ],
                    [
                        "2017-07-05",
                        22780
                    ],
                    [
                        "2017-07-06",
                        21156
                    ],
                    [
                        "2017-07-07",
                        16086
                    ],
                    [
                        "2017-07-08",
                        13963
                    ],
                    [
                        "2017-07-09",
                        10829
                    ],
                    [
                        "2017-07-10",
                        22105
                    ],
                    [
                        "2017-07-11",
                        22775
                    ],
                    [
                        "2017-07-12",
                        15841
                    ],
                    [
                        "2017-07-13",
                        8563
                    ],
                    [
                        "2017-07-14",
                        19956
                    ],
                    [
                        "2017-07-15",
                        11729
                    ],
                    [
                        "2017-07-16",
                        23386
                    ],
                    [
                        "2017-07-17",
                        19304
                    ],
                    [
                        "2017-07-18",
                        11392
                    ],
                    [
                        "2017-07-19",
                        11668
                    ],
                    [
                        "2017-07-20",
                        18615
                    ],
                    [
                        "2017-07-21",
                        24218
                    ],
                    [
                        "2017-07-22",
                        17038
                    ],
                    [
                        "2017-07-23",
                        10562
                    ],
                    [
                        "2017-07-24",
                        6467
                    ],
                    [
                        "2017-07-25",
                        21065
                    ],
                    [
                        "2017-07-26",
                        22160
                    ],
                    [
                        "2017-07-27",
                        3158
                    ],
                    [
                        "2017-07-28",
                        18205
                    ],
                    [
                        "2017-07-29",
                        18532
                    ],
                    [
                        "2017-07-30",
                        12276
                    ],
                    [
                        "2017-07-31",
                        6284
                    ],
                    [
                        "2017-08-01",
                        13804
                    ],
                    [
                        "2017-08-02",
                        9912
                    ],
                    [
                        "2017-08-03",
                        5985
                    ],
                    [
                        "2017-08-04",
                        16376
                    ],
                    [
                        "2017-08-05",
                        22063
                    ],
                    [
                        "2017-08-06",
                        23050
                    ],
                    [
                        "2017-08-07",
                        23425
                    ],
                    [
                        "2017-08-08",
                        17640
                    ],
                    [
                        "2017-08-09",
                        24388
                    ],
                    [
                        "2017-08-10",
                        2589
                    ],
                    [
                        "2017-08-11",
                        20480
                    ],
                    [
                        "2017-08-12",
                        21028
                    ],
                    [
                        "2017-08-13",
                        12772
                    ],
                    [
                        "2017-08-14",
                        1613
                    ],
                    [
                        "2017-08-15",
                        19054
                    ],
                    [
                        "2017-08-16",
                        15008
                    ],
                    [
                        "2017-08-17",
                        2457
                    ],
                    [
                        "2017-08-18",
                        1227
                    ],
                    [
                        "2017-08-19",
                        13898
                    ],
                    [
                        "2017-08-20",
                        1166
                    ],
                    [
                        "2017-08-21",
                        16944
                    ],
                    [
                        "2017-08-22",
                        2193
                    ],
                    [
                        "2017-08-23",
                        23043
                    ],
                    [
                        "2017-08-24",
                        1118
                    ],
                    [
                        "2017-08-25",
                        20818
                    ],
                    [
                        "2017-08-26",
                        17874
                    ],
                    [
                        "2017-08-27",
                        3277
                    ],
                    [
                        "2017-08-28",
                        7115
                    ],
                    [
                        "2017-08-29",
                        4889
                    ],
                    [
                        "2017-08-30",
                        15807
                    ],
                    [
                        "2017-08-31",
                        22743
                    ],
                    [
                        "2017-09-01",
                        21164
                    ],
                    [
                        "2017-09-02",
                        16957
                    ],
                    [
                        "2017-09-03",
                        20855
                    ],
                    [
                        "2017-09-04",
                        23293
                    ],
                    [
                        "2017-09-05",
                        20069
                    ],
                    [
                        "2017-09-06",
                        21162
                    ],
                    [
                        "2017-09-07",
                        12697
                    ],
                    [
                        "2017-09-08",
                        20516
                    ],
                    [
                        "2017-09-09",
                        13271
                    ],
                    [
                        "2017-09-10",
                        21713
                    ],
                    [
                        "2017-09-11",
                        19425
                    ],
                    [
                        "2017-09-12",
                        2824
                    ],
                    [
                        "2017-09-13",
                        3128
                    ],
                    [
                        "2017-09-14",
                        21633
                    ],
                    [
                        "2017-09-15",
                        1722
                    ],
                    [
                        "2017-09-16",
                        19205
                    ],
                    [
                        "2017-09-17",
                        14587
                    ],
                    [
                        "2017-09-18",
                        2222
                    ],
                    [
                        "2017-09-19",
                        11062
                    ],
                    [
                        "2017-09-20",
                        2287
                    ],
                    [
                        "2017-09-21",
                        13679
                    ],
                    [
                        "2017-09-22",
                        17050
                    ],
                    [
                        "2017-09-23",
                        20402
                    ],
                    [
                        "2017-09-24",
                        5975
                    ],
                    [
                        "2017-09-25",
                        5427
                    ],
                    [
                        "2017-09-26",
                        7963
                    ],
                    [
                        "2017-09-27",
                        14715
                    ],
                    [
                        "2017-09-28",
                        20429
                    ],
                    [
                        "2017-09-29",
                        10152
                    ],
                    [
                        "2017-09-30",
                        16596
                    ],
                    [
                        "2017-10-01",
                        1775
                    ],
                    [
                        "2017-10-02",
                        19412
                    ],
                    [
                        "2017-10-03",
                        19869
                    ],
                    [
                        "2017-10-04",
                        1397
                    ],
                    [
                        "2017-10-05",
                        11002
                    ],
                    [
                        "2017-10-06",
                        12776
                    ],
                    [
                        "2017-10-07",
                        10514
                    ],
                    [
                        "2017-10-08",
                        8649
                    ],
                    [
                        "2017-10-09",
                        1727
                    ],
                    [
                        "2017-10-10",
                        11661
                    ],
                    [
                        "2017-10-11",
                        12608
                    ],
                    [
                        "2017-10-12",
                        16364
                    ],
                    [
                        "2017-10-13",
                        4768
                    ],
                    [
                        "2017-10-14",
                        18837
                    ],
                    [
                        "2017-10-15",
                        24336
                    ],
                    [
                        "2017-10-16",
                        4507
                    ],
                    [
                        "2017-10-17",
                        20404
                    ],
                    [
                        "2017-10-18",
                        14068
                    ],
                    [
                        "2017-10-19",
                        22008
                    ],
                    [
                        "2017-10-20",
                        11012
                    ],
                    [
                        "2017-10-21",
                        22889
                    ],
                    [
                        "2017-10-22",
                        11773
                    ],
                    [
                        "2017-10-23",
                        17502
                    ],
                    [
                        "2017-10-24",
                        12792
                    ],
                    [
                        "2017-10-25",
                        11955
                    ],
                    [
                        "2017-10-26",
                        23756
                    ],
                    [
                        "2017-10-27",
                        21531
                    ],
                    [
                        "2017-10-28",
                        16711
                    ],
                    [
                        "2017-10-29",
                        6341
                    ],
                    [
                        "2017-10-30",
                        9065
                    ],
                    [
                        "2017-10-31",
                        20236
                    ],
                    [
                        "2017-11-01",
                        14583
                    ],
                    [
                        "2017-11-02",
                        3259
                    ],
                    [
                        "2017-11-03",
                        15396
                    ],
                    [
                        "2017-11-04",
                        7527
                    ],
                    [
                        "2017-11-05",
                        10996
                    ],
                    [
                        "2017-11-06",
                        20566
                    ],
                    [
                        "2017-11-07",
                        12585
                    ],
                    [
                        "2017-11-08",
                        13601
                    ],
                    [
                        "2017-11-09",
                        4761
                    ],
                    [
                        "2017-11-10",
                        4777
                    ],
                    [
                        "2017-11-11",
                        14796
                    ],
                    [
                        "2017-11-12",
                        15404
                    ],
                    [
                        "2017-11-13",
                        23465
                    ],
                    [
                        "2017-11-14",
                        24338
                    ],
                    [
                        "2017-11-15",
                        7846
                    ],
                    [
                        "2017-11-16",
                        9718
                    ],
                    [
                        "2017-11-17",
                        12191
                    ],
                    [
                        "2017-11-18",
                        14133
                    ],
                    [
                        "2017-11-19",
                        2188
                    ],
                    [
                        "2017-11-20",
                        14364
                    ],
                    [
                        "2017-11-21",
                        23858
                    ],
                    [
                        "2017-11-22",
                        9364
                    ],
                    [
                        "2017-11-23",
                        11163
                    ],
                    [
                        "2017-11-24",
                        3019
                    ],
                    [
                        "2017-11-25",
                        2685
                    ],
                    [
                        "2017-11-26",
                        13990
                    ],
                    [
                        "2017-11-27",
                        10395
                    ],
                    [
                        "2017-11-28",
                        13204
                    ],
                    [
                        "2017-11-29",
                        20408
                    ],
                    [
                        "2017-11-30",
                        12932
                    ],
                    [
                        "2017-12-01",
                        16587
                    ],
                    [
                        "2017-12-02",
                        17077
                    ],
                    [
                        "2017-12-03",
                        19122
                    ],
                    [
                        "2017-12-04",
                        23817
                    ],
                    [
                        "2017-12-05",
                        9844
                    ],
                    [
                        "2017-12-06",
                        8625
                    ],
                    [
                        "2017-12-07",
                        19393
                    ],
                    [
                        "2017-12-08",
                        15539
                    ],
                    [
                        "2017-12-09",
                        10808
                    ],
                    [
                        "2017-12-10",
                        1483
                    ],
                    [
                        "2017-12-11",
                        18158
                    ],
                    [
                        "2017-12-12",
                        4309
                    ],
                    [
                        "2017-12-13",
                        4977
                    ],
                    [
                        "2017-12-14",
                        5252
                    ],
                    [
                        "2017-12-15",
                        19275
                    ],
                    [
                        "2017-12-16",
                        14082
                    ],
                    [
                        "2017-12-17",
                        9669
                    ],
                    [
                        "2017-12-18",
                        3883
                    ],
                    [
                        "2017-12-19",
                        23205
                    ],
                    [
                        "2017-12-20",
                        5290
                    ],
                    [
                        "2017-12-21",
                        24216
                    ],
                    [
                        "2017-12-22",
                        24436
                    ],
                    [
                        "2017-12-23",
                        16384
                    ],
                    [
                        "2017-12-24",
                        16490
                    ],
                    [
                        "2017-12-25",
                        4891
                    ],
                    [
                        "2017-12-26",
                        22234
                    ],
                    [
                        "2017-12-27",
                        3173
                    ],
                    [
                        "2017-12-28",
                        22466
                    ],
                    [
                        "2017-12-29",
                        22521
                    ],
                    [
                        "2017-12-30",
                        10129
                    ],
                    [
                        "2017-12-31",
                        9195
                    ]
                ],
                "label": {
                    "show": false,
                    "position": "inside",
                    "margin": 8
                }
            }
        ],
        "legend": [
            {
                "data": [
                    ""
                ],
                "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"
        },
        "calendar": {
            "zlevel": 0,
            "z": 2,
            "left": "30",
            "top": "120",
            "right": "30",
            "width": "auto",
            "orient": "horizontal",
            "range": "2017",
            "cellSize": 20,
            "yearLabel": {
                "show": false,
                "color": "#000",
                "fontStyle": "normal",
                "fontWeight": "normal",
                "fontFamily": "sans-serif",
                "fontSize": 12
            },
            "silent": false
        },
        "title": [
            {
                "show": true,
                "text": "2017\u5e74\u6b65\u6570\u60c5\u51b5",
                "target": "blank",
                "subtarget": "blank",
                "left": "center",
                "top": "30",
                "padding": 5,
                "itemGap": 10,
                "textAlign": "auto",
                "textVerticalAlign": "auto",
                "triggerEvent": false
            }
        ],
        "visualMap": {
            "show": true,
            "type": "continuous",
            "min": 500,
            "max": 20000,
            "inRange": {
                "color": [
                    "#50a3ba",
                    "#eac763",
                    "#d94e5d"
                ]
            },
            "calculable": true,
            "inverse": false,
            "splitNumber": 5,
            "hoverLink": true,
            "orient": "horizontal",
            "padding": 5,
            "showLabel": true,
            "itemWidth": 20,
            "itemHeight": 140,
            "borderWidth": 0
        }
    };
            chart_de18d4e5d37b464c9937340a46b0162d.setOption(option_de18d4e5d37b464c9937340a46b0162d);
        </script>
    </body>
    </html>

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

这里不详细解释

[image-20230915093458063]: https://img-blog.csdnimg.cn/img_convert/9c3355d0e977d5c1c3a2e3b7342a6759.png