在当今数字时代，Web应用程序已经成为我们生活的重要组成部分。无论是社交媒体平台、电子商务网站还是在线工具，现代Web应用程序的核心是其用户界面（UI）。而用户界面的关键组成部分之一就是前端控件。
前端控件是Web开发中不可或缺的元素，它们为我们提供了构建各种交互性和功能丰富的Web应用程序的工具。无论您是一名新手前端开发者还是经验丰富的工程师，了解和掌握前端控件都是提高Web开发技能的关键。
本博客系列将带您深入探索前端控件的世界。我们将详细研究各种UI组件，从简单的按钮和表单控件到复杂的图表和地图集成，无所不包。无论您是想要提高自己的技能，还是寻找构建令人印象深刻的用户体验的方法，这个系列都将为您提供宝贵的知识。
在接下来的几篇文章中，我们将探讨不同类型的前端控件，讨论它们的用途、最佳实践和实际示例。无论您的兴趣是构建漂亮的UI、提高用户体验或学习最新的Web开发技术，这个系列都将有所帮助。
准备好探索前端控件的魅力吗？让我们开始吧！
一，演示地址
访问网址：http://59.110.22.223:8080/Model_qianduan/calendar_base.html
二、控件常识
自定义控件
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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="ae170bf12bec45f89fbb65a4bcd8963b" class="chart-container" style="width:900px; height:500px; "></div>
<script>
var chart_ae170bf12bec45f89fbb65a4bcd8963b = echarts.init(
document.getElementById('ae170bf12bec45f89fbb65a4bcd8963b'), 'white', {renderer: 'canvas'});
var option_ae170bf12bec45f89fbb65a4bcd8963b = {
"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": "boxplot",
"name": "category0",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
3.8888578346043534,
55.82692798765428,
98.71608835477272,
149.50917642877687,
196.31621070646452
],
[
0.5174326704765253,
47.52990128406776,
103.66600287106233,
160.1380046605997,
194.8294269298398
],
[
2.843900448603165,
51.773788199388605,
90.66830693679475,
152.19938074181786,
196.18172012742428
],
[
2.6752702891334135,
42.85051429480143,
98.54433643572133,
166.81852013033875,
199.7400516615198
],
[
1.665511467481906,
63.069856326089585,
123.20638438572043,
164.0932194814393,
199.56631692214057
],
[
0.3597414263118992,
52.84424125860876,
108.14491539985673,
154.42390255012828,
199.39872381823812
],
[
1.3380322954592128,
41.989379994726335,
100.39118095266713,
160.38742881881478,
197.8251968350275
],
[
1.7005873932608662,
43.88170786936796,
92.29415890464293,
140.7858956683471,
197.50510824352313
],
[
1.7017445023542965,
52.55872982785781,
90.26972335102536,
155.43082163069883,
198.31679368721197
],
[
0.45657888665799895,
47.60747957375436,
95.53917053451289,
162.55256484073354,
199.78317232079928
],
[
1.745438082254136,
53.450845301261964,
95.8847297380051,
143.99885640751006,
195.1863502057908
],
[
2.5631287114048273,
56.04486879215165,
110.01592256847306,
155.33508398386462,
195.90291395560985
],
[
3.4380745785991262,
58.07888602010247,
105.64925213947652,
165.50126442985191,
199.75877487248675
],
[
0.03322930419802361,
53.363159200883985,
95.32936635574816,
151.39772626598614,
198.20394907387762
],
[
0.7063564158257929,
73.89369564248534,
116.6947935806626,
152.93983211466667,
197.1481400480321
],
[
0.9611585600880268,
46.64283650085793,
102.32004406296502,
148.64094149067978,
199.59803470854715
],
[
1.4310036755643463,
50.15631363530299,
102.68128938225942,
147.52573154872948,
197.6018158750086
],
[
0.492994684970105,
43.23619663302313,
99.60815322547333,
140.00299600143438,
198.97693156537883
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"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,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
},
{
"type": "boxplot",
"name": "category1",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
1.3866777918670525,
52.723984144413805,
112.16068484025186,
148.07060013196633,
196.6493886555634
],
[
0.8675025485252785,
41.94008605353009,
90.4944101654473,
134.34314089904032,
199.57411732908722
],
[
2.109917782227244,
47.361245156921306,
98.03121935506474,
152.57304498745683,
199.6655667235125
],
[
0.835914742081334,
45.90386054869363,
110.8008994981315,
153.77050147012113,
198.17687983907325
],
[
0.09929780808608513,
55.313979741487245,
80.36049651385588,
144.5076321261422,
198.71007594348265
],
[
4.3591904343687204,
53.098201381124454,
88.8716562277704,
134.2243571501588,
197.86166497124387
],
[
1.4751642002043486,
52.87727910767818,
98.1167484613283,
129.123794134296,
199.26128215126036
],
[
1.0208468961246275,
59.72883452828452,
93.7117188714775,
133.6955646934541,
199.04002574913483
],
[
5.700580454086168,
62.30214699943758,
109.4858546359291,
144.37435834128183,
196.80025087232633
],
[
3.8776389962399627,
47.07485197991684,
108.77911010272065,
143.55929331063112,
199.78963194031576
],
[
0.9206486824532956,
56.531536633466786,
103.22722183226676,
153.71850265606832,
199.26707930050713
],
[
1.2238397462105866,
42.37213742602606,
85.0161099008823,
144.6618761115177,
195.68883739488717
],
[
1.383845313528731,
55.58975449585246,
101.2502031542653,
155.4651069256266,
198.51896538541257
],
[
2.460600698918336,
45.35279677561122,
86.22855211501036,
142.2985968944624,
196.88095181245973
],
[
1.5771786133238486,
47.74919144071982,
98.25948642595273,
143.6080569193598,
199.35657813436302
],
[
1.679597195618454,
54.03099324959242,
93.24925248108138,
156.2197398880975,
199.96087190538344
],
[
0.09445769268561222,
62.987289799985746,
93.5536375308287,
146.10299624484736,
198.89381360902073
],
[
0.5074418255246016,
43.16902467382945,
97.5036007943674,
150.07249687988744,
197.1438186145631
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"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,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
},
{
"type": "boxplot",
"name": "category2",
"boxWidth": [
7,
50
],
"selected_mode": false,
"data": [
[
0.17336583192690824,
38.89251480694969,
95.24827036951726,
144.42455874548153,
199.4034309165705
],
[
3.676663641014155,
56.915752270243615,
116.52533365244228,
154.9613826361874,
199.45242610474344
],
[
0.2637149176087039,
39.10809721270764,
83.11646124189903,
145.85305644883107,
199.4425993969723
],
[
0.9435517891188017,
59.34726771939571,
116.9100457332774,
154.6830501745436,
197.360203327316
],
[
3.979089227580568,
59.55958857930115,
106.50956069508263,
154.19233153204274,
198.27863048295953
],
[
0.2254389425328185,
45.14272916122666,
101.99744565544017,
158.20585382578935,
199.87918467096276
],
[
0.4981747166813655,
55.07500323828029,
98.06775843874871,
142.6740673515219,
196.17733451641203
],
[
3.459413844168191,
48.45434370508197,
90.08287035261958,
144.44636703035508,
196.7330418635301
],
[
5.491046107788211,
51.726853187011294,
102.73451029578627,
144.81711164442441,
198.8867176824325
],
[
0.7550472434538769,
52.51096431201062,
107.88318214869264,
159.26961432919137,
199.61830476130777
],
[
0.2752001848587593,
48.7398963427885,
89.75616732426943,
142.05594236584855,
198.3147751483816
],
[
1.4946063684317945,
47.50894653631401,
98.11186814575922,
138.51943571666908,
193.3052139732351
],
[
0.20882224269564986,
51.28631550804623,
107.81597798598389,
160.02354609263347,
199.2878557923929
],
[
0.8976637474841898,
43.66029575375894,
100.62231619788403,
139.9661197041632,
192.54845617677
],
[
5.859745717489284,
47.03805156535355,
108.41470873842098,
157.096784096105,
199.9179863824041
],
[
3.7257707586363598,
42.231249941095996,
97.356821000705,
142.79191220154834,
198.84036692134
],
[
1.8454208635465985,
44.91333687646406,
98.65350096972611,
143.39018022926803,
199.87483964263296
],
[
0.5514923538800787,
45.85216189462081,
99.9806157446917,
153.32082407525542,
198.2776454910153
]
],
"label": {
"show": true,
"margin": 8
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
}
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"margin": 8
}
},
"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,
"formatter": function(param) { return [ 'Experiment ' + param.name + ': ', 'upper: ' + param.data[0], 'Q1: ' + param.data[1], 'median: ' + param.data[2], 'Q3: ' + param.data[3], 'lower: ' + param.data[4] ].join('<br/>') },
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
}
}
],
"legend": [
{
"data": [
"category0",
"category1",
"category2"
],
"selected": {},
"show": true,
"top": "3%",
"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": "shadow"
},
"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": 30,
"gridIndex": 0,
"axisLabel": {
"show": true,
"margin": 8,
"formatter": "expr {value}"
},
"inverse": false,
"offset": 0,
"splitNumber": 5,
"boundaryGap": true,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"splitArea": {
"show": true,
"areaStyle": {
"opacity": 1
}
},
"data": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17"
]
}
],
"yAxis": [
{
"type": "value",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"min": -400,
"max": 600,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"splitArea": {
"show": false,
"areaStyle": {
"opacity": 0
}
}
}
],
"title": [
{
"show": true,
"text": "Multiple Categories",
"target": "blank",
"subtarget": "blank",
"left": "center",
"padding": 5,
"itemGap": 10,
"textAlign": "auto",
"textVerticalAlign": "auto",
"triggerEvent": false
}
],
"dataZoom": [
{
"show": true,
"type": "inside",
"showDetail": true,
"showDataShadow": true,
"realtime": true,
"start": 0,
"end": 20,
"orient": "horizontal",
"zoomLock": false,
"filterMode": "filter"
},
{
"show": true,
"type": "slider",
"showDetail": true,
"showDataShadow": true,
"realtime": true,
"start": 20,
"end": 80,
"orient": "horizontal",
"xAxisIndex": 0,
"zoomLock": false,
"filterMode": "filter"
}
]
};
chart_ae170bf12bec45f89fbb65a4bcd8963b.setOption(option_ae170bf12bec45f89fbb65a4bcd8963b);
</script>
</body>
</html>
四，源码解释
这段代码是一个HTML页面，其中包含了一个使用ECharts绘制的箱线图（Boxplot）。这个图表有三个不同的类别（category0、category1、category2），每个类别包含了一组数据，每组数据都绘制成一个箱线图。
在这个HTML页面中，ECharts的相关配置信息都包含在JavaScript代码块中，通过option_ae170bf12bec45f89fbb65a4bcd8963b定义了图表的配置。
具体配置项包括：
animation：控制动画的相关设置。color：定义了图表中使用的颜色。series：包含了三个箱线图的数据和配置。legend：定义了图例的样式和位置。tooltip：配置了鼠标悬停在数据点上时显示的提示框。xAxis和yAxis：分别配置了X轴和Y轴的属性，包括坐标轴标签、范围等。title：定义了图表的标题。
最后，通过chart_ae170bf12bec45f89fbb65a4bcd8963b.setOption(option_ae170bf12bec45f89fbb65a4bcd8963b);将配置应用到ECharts图表中，生成了箱线图。
如果您有任何特定的问题或需要进一步的解释，请告诉我，我将尽力提供更详细的帮助。
扫一扫
8860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
