前端控件宝典：UI组件的完整指南(6)——图表柱状图动画延迟【源码在文末并附解释】

本是古典何须时尚 2023-10-15 22:29 7阅读 0赞

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

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

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

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

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

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

访问网址：http://59.110.22.223:8080/Model\_qianduan/bar\_chart\_display\_delay.html

![image-20230914113212122][]

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

自定义控件  
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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="ad9f2b7e5b96417a9735ab19c9918dc6" class="chart-container" style="width:900px; height:500px; "></div>
        <script>
            var chart_ad9f2b7e5b96417a9735ab19c9918dc6 = echarts.init(
                document.getElementById('ad9f2b7e5b96417a9735ab19c9918dc6'), 'white', {renderer: 'canvas'});
            var option_ad9f2b7e5b96417a9735ab19c9918dc6 = {
        "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": "bar",
                "name": "bar",
                "legendHoverLink": true,
                "data": [
                    0,
                    -8.901463875624668,
                    -17.025413764148556,
                    -24.038196249566663,
                    -29.66504684804471,
                    -33.699527649688676,
                    -36.00971978255796,
                    -36.541005056170455,
                    -35.31542466107655,
                    -32.427752866005996,
                    -28.038563739693934,
                    -22.364693082297347,
                    -15.667600860943732,
                    -8.240217424060843,
                    -0.3929067389459173,
                    7.560799717904647,
                    15.318054209871054,
                    22.599523033552096,
                    29.16065418543528,
                    34.800927952557615,
                    39.37074152590451,
                    42.77569739999406,
                    44.97819140223978,
                    45.99632376477021,
                    45.900279829731865,
                    44.806440199911805,
                    42.86957840395034,
                    40.2735832137877,
                    37.22119936652441,
                    33.92331243435557,
                    30.588309963978517,
                    27.412031986865767,
                    24.56878097935778,
                    22.203796820272576,
                    20.427519715115604,
                    19.311867685884827,
                    18.888649906111855,
                    19.150128087782186,
                    20.051630602288828,
                    21.516023200879346,
                    23.439750867099516,
                    25.700091656548704,
                    28.163208735293757,
                    30.692553648214542,
                    33.1571635093161,
                    35.439407573791215,
                    37.44177367693234,
                    39.09234039030659,
                    40.34865356244595,
                    41.19981246258526,
                    41.66666666666667,
                    41.80012531240646,
                    41.67768039516203,
                    41.39834040182826,
                    41.07625507973403,
                    40.833382300579814,
                    40.79160029175877,
                    41.06470032034727,
                    41.75070457358366,
                    42.924940903672564,
                    44.63427081999565,
                    46.89281122872821,
                    49.679416561286956,
                    52.93709961387478,
                    56.574470884754874,
                    60.46917221906629,
                    64.47317623531558,
                    68.41972346252496,
                    72.1315793340836,
                    75.43021771943799,
                    78.14548044723074,
                    80.12522637371026,
                    81.24447108408411,
                    81.41353029256493,
                    80.58471628367427,
                    78.75719600392792,
                    75.97969924353211,
                    72.35086229880064,
                    68.01710226438443,
                    63.16803467673056,
                    58.029567166714706,
                    52.854918421647554,
                    47.91391949819902,
                    43.48104807503482,
                    39.82272085822884,
                    37.18442111754884,
                    35.778264289169215,
                    35.77160292258658,
                    37.27724241244461,
                    40.345781666728996,
                    44.96051012913295,
                    51.035187614675685,
                    58.41491053964701,
                    66.8801325453253,
                    76.15376513468516,
                    85.91114110149952,
                    95.79248672571518,
                    105.41742429574506,
                    114.40092042993717,
                    122.37001313784816
                ],
                "realtimeSort": false,
                "showBackground": false,
                "stackStrategy": "samesign",
                "cursor": "pointer",
                "barMinHeight": 0,
                "barCategoryGap": "20%",
                "barGap": "30%",
                "large": false,
                "largeThreshold": 400,
                "seriesLayoutBy": "column",
                "datasetIndex": 0,
                "clip": true,
                "zlevel": 0,
                "z": 2,
                "label": {
                    "show": false,
                    "margin": 8
                }
            },
            {
                "type": "bar",
                "name": "bar2",
                "legendHoverLink": true,
                "data": [
                    -50,
                    -47.18992898088751,
                    -42.54426104547181,
                    -36.290773900754886,
                    -28.71517529663627,
                    -20.146937097399626,
                    -10.94374119697364,
                    -1.4752538113770308,
                    7.893046603320797,
                    16.81528588241657,
                    24.979206795219028,
                    32.11821023962515,
                    38.02096119056733,
                    42.53821720798438,
                    45.58667093073836,
                    47.14973738101559,
                    47.275355710354944,
                    46.07100702178889,
                    43.6962693226927,
                    40.35333240268025,
                    36.275975292575026,
                    31.71756381888028,
                    26.938653692729076,
                    22.194784893913152,
                    17.725026430574392,
                    13.741778696752679,
                    10.422266555457615,
                    7.902063853319403,
                    6.270884006107842,
                    5.570756810898967,
                    5.796594266992678,
                    6.899033489892203,
                    8.7893381290192,
                    11.346045936704996,
                    14.42297348773613,
                    17.858132851517098,
                    21.483081596548438,
                    25.132218074866262,
                    28.651548555679597,
                    31.906490373810854,
                    34.788333671419466,
                    37.21906041552118,
                    39.154309232933485,
                    40.58437366457342,
                    41.5332247510366,
                    42.05565130942339,
                    42.23270781895,
                    42.165745792772285,
                    41.969375711588256,
                    41.76375960543808,
                    41.66666666666667,
                    41.7857343479728,
                    42.21136481847887,
                    43.01065209435119,
                    44.22268037417866,
                    45.855461823273586,
                    47.88469584957917,
                    50.25443606443524,
                    52.879650371477126,
                    55.650558977584225,
                    58.43853958732492,
                    61.10330341815434,
                    63.500974294013034,
                    65.49264961151306,
                    66.95298925309743,
                    67.77836838841961,
                    67.89414332224722,
                    67.26061575374229,
                    65.87733853082335,
                    63.785482681031894,
                    61.068077697490004,
                    57.84804048526095,
                    54.284018163297375,
                    50.564180830851214,
                    46.89820707575337,
                    43.50780217852947,
                    40.616171775045245,
                    38.4369379107128,
                    37.16302649485318,
                    36.95607267600796,
                    37.93688225696513,
                    40.17745279877072,
                    43.694998595987045,
                    48.44834150353593,
                    54.33692802801367,
                    61.20261650152743,
                    68.83425165632042,
                    76.97491319735354,
                    85.33159602026458,
                    93.58695857541488,
                    101.4126683297632,
                    108.48378461530217,
                    114.49355390682695,
                    119.16795429637915,
                    122.27931702317058,
                    123.65837448506679,
                    123.20413594805603,
                    120.89107255501017,
                    116.7731992576505,
                    110.98476877890735
                ],
                "realtimeSort": false,
                "showBackground": false,
                "stackStrategy": "samesign",
                "cursor": "pointer",
                "barMinHeight": 0,
                "barCategoryGap": "20%",
                "barGap": "30%",
                "large": false,
                "largeThreshold": 400,
                "seriesLayoutBy": "column",
                "datasetIndex": 0,
                "clip": true,
                "zlevel": 0,
                "z": 2,
                "label": {
                    "show": false,
                    "margin": 8
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "bar",
                    "bar2"
                ],
                "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"
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u7c7b\u76ee0",
                    "\u7c7b\u76ee1",
                    "\u7c7b\u76ee2",
                    "\u7c7b\u76ee3",
                    "\u7c7b\u76ee4",
                    "\u7c7b\u76ee5",
                    "\u7c7b\u76ee6",
                    "\u7c7b\u76ee7",
                    "\u7c7b\u76ee8",
                    "\u7c7b\u76ee9",
                    "\u7c7b\u76ee10",
                    "\u7c7b\u76ee11",
                    "\u7c7b\u76ee12",
                    "\u7c7b\u76ee13",
                    "\u7c7b\u76ee14",
                    "\u7c7b\u76ee15",
                    "\u7c7b\u76ee16",
                    "\u7c7b\u76ee17",
                    "\u7c7b\u76ee18",
                    "\u7c7b\u76ee19",
                    "\u7c7b\u76ee20",
                    "\u7c7b\u76ee21",
                    "\u7c7b\u76ee22",
                    "\u7c7b\u76ee23",
                    "\u7c7b\u76ee24",
                    "\u7c7b\u76ee25",
                    "\u7c7b\u76ee26",
                    "\u7c7b\u76ee27",
                    "\u7c7b\u76ee28",
                    "\u7c7b\u76ee29",
                    "\u7c7b\u76ee30",
                    "\u7c7b\u76ee31",
                    "\u7c7b\u76ee32",
                    "\u7c7b\u76ee33",
                    "\u7c7b\u76ee34",
                    "\u7c7b\u76ee35",
                    "\u7c7b\u76ee36",
                    "\u7c7b\u76ee37",
                    "\u7c7b\u76ee38",
                    "\u7c7b\u76ee39",
                    "\u7c7b\u76ee40",
                    "\u7c7b\u76ee41",
                    "\u7c7b\u76ee42",
                    "\u7c7b\u76ee43",
                    "\u7c7b\u76ee44",
                    "\u7c7b\u76ee45",
                    "\u7c7b\u76ee46",
                    "\u7c7b\u76ee47",
                    "\u7c7b\u76ee48",
                    "\u7c7b\u76ee49",
                    "\u7c7b\u76ee50",
                    "\u7c7b\u76ee51",
                    "\u7c7b\u76ee52",
                    "\u7c7b\u76ee53",
                    "\u7c7b\u76ee54",
                    "\u7c7b\u76ee55",
                    "\u7c7b\u76ee56",
                    "\u7c7b\u76ee57",
                    "\u7c7b\u76ee58",
                    "\u7c7b\u76ee59",
                    "\u7c7b\u76ee60",
                    "\u7c7b\u76ee61",
                    "\u7c7b\u76ee62",
                    "\u7c7b\u76ee63",
                    "\u7c7b\u76ee64",
                    "\u7c7b\u76ee65",
                    "\u7c7b\u76ee66",
                    "\u7c7b\u76ee67",
                    "\u7c7b\u76ee68",
                    "\u7c7b\u76ee69",
                    "\u7c7b\u76ee70",
                    "\u7c7b\u76ee71",
                    "\u7c7b\u76ee72",
                    "\u7c7b\u76ee73",
                    "\u7c7b\u76ee74",
                    "\u7c7b\u76ee75",
                    "\u7c7b\u76ee76",
                    "\u7c7b\u76ee77",
                    "\u7c7b\u76ee78",
                    "\u7c7b\u76ee79",
                    "\u7c7b\u76ee80",
                    "\u7c7b\u76ee81",
                    "\u7c7b\u76ee82",
                    "\u7c7b\u76ee83",
                    "\u7c7b\u76ee84",
                    "\u7c7b\u76ee85",
                    "\u7c7b\u76ee86",
                    "\u7c7b\u76ee87",
                    "\u7c7b\u76ee88",
                    "\u7c7b\u76ee89",
                    "\u7c7b\u76ee90",
                    "\u7c7b\u76ee91",
                    "\u7c7b\u76ee92",
                    "\u7c7b\u76ee93",
                    "\u7c7b\u76ee94",
                    "\u7c7b\u76ee95",
                    "\u7c7b\u76ee96",
                    "\u7c7b\u76ee97",
                    "\u7c7b\u76ee98",
                    "\u7c7b\u76ee99"
                ]
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "axisTick": {
                    "show": true,
                    "alignWithLabel": false,
                    "inside": false
                },
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "show": true,
                "text": "\u67f1\u72b6\u56fe\u52a8\u753b\u5ef6\u8fdf",
                "target": "blank",
                "subtarget": "blank",
                "padding": 5,
                "itemGap": 10,
                "textAlign": "auto",
                "textVerticalAlign": "auto",
                "triggerEvent": false
            }
        ]
    };
            chart_ad9f2b7e5b96417a9735ab19c9918dc6.setOption(option_ad9f2b7e5b96417a9735ab19c9918dc6);
        </script>
    </body>
    </html>

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

这是一个包含动态柱状图的HTML页面，同样使用了ECharts库来绘制图表。以下是代码的详细解释：

1.  `<!DOCTYPE html>`：HTML文档的文档类型声明，表示这是一个HTML5文档。
2.  `<html>`：HTML文档的根元素，包含了整个页面的内容。
3.  `<head>`：页面的头部部分，通常包含了一些元信息和引用的外部资源。
4.  `<meta charset="UTF-8">`：元标签，指定文档的字符编码为UTF-8，以支持多种字符集。
5.  `<title>Awesome-pyecharts</title>`：设置页面的标题为 “Awesome-pyecharts”，这个标题通常会显示在浏览器的标签栏上。
6.  `<script>` 标签：这里引入了ECharts库的核心文件 `echarts.min.js`，用于图表的渲染。
7.  `<body>`：HTML文档的主体部分，包含了页面的实际内容。
8.  `<div id="ad9f2b7e5b96417a9735ab19c9918dc6" class="chart-container" style="width:900px; height:500px;"></div>`：这是一个 `<div>` 元素，用于容纳图表。它具有唯一的 `id` 属性，用于在JavaScript中找到并初始化图表。`class` 属性用于设置CSS样式类，`style` 属性设置了 `<div>` 元素的宽度和高度。
9.  `<script>` 标签：包含JavaScript代码的 `<script>` 标签，用于初始化和配置图表。
    
     *  `var chart_ad9f2b7e5b96417a9735ab19c9918dc6`：这是一个变量，用于存储图表对象的引用。它通过调用 `echarts.init()` 方法初始化，指定了要渲染图表的DOM元素、主题样式和渲染器。
     *  `var option_ad9f2b7e5b96417a9735ab19c9918dc6`：这是一个变量，用于存储图表的配置选项。该对象包含了图表的各种配置，包括动画、数据、颜色等。
     *  `chart_ad9f2b7e5b96417a9735ab19c9918dc6.setOption(option_ad9f2b7e5b96417a9735ab19c9918dc6)`：这一行代码将配置选项应用于图表对象，从而渲染图表。
10. `</body>`：HTML文档的主体部分结束。
11. `</html>`：HTML文档的结束。

这段代码的主要目的是在网页中嵌入一个动态柱状图，并使用ECharts库来渲染和配置图表。图表包含两个柱形系列（“bar” 和 “bar2”）以及一些配置选项，如动画、数据、颜色等。当页面加载时，JavaScript代码会初始化图表对象，并将配置选项应用于图表，最终在页面上呈现动态柱状图。柱状图的数据是动态的，会根据时间变化而变化。

[image-20230914113212122]: https://img-blog.csdnimg.cn/img_convert/92ba2af21c07c1bb28939fc40af7b07a.png