前端控件宝典:UI组件的完整指南(43)——热力图【源码在文末并附解释】

Bertha 。 2023-10-16 09:13 17阅读 0赞

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

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

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

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

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

一,演示地址

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

image-20230915091819561

二、控件常识

自定义控件
自定义控件是已编译的服务器端控件,它将用户界面和其他功能都封装起来到可复用的包中,自定义控件和标准的控件相比,除了他们一个不同的标记前缀,并且必须进行显示注册和部署以外并没有什么不同。此外,自定义控件拥有自己的对象模型,能够触发事件,并支持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页面的第三个不同点。

三,源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Awesome-pyecharts</title>
  6. <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
  7. <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/bmap.min.js"></script>
  8. <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK"></script>
  9. <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK"></script>
  10. </head>
  11. <body >
  12. <div id="b7b0308749874870b56f16e60516bd92" class="chart-container" style="width:900px; height:500px; "></div>
  13. <script>
  14. var chart_b7b0308749874870b56f16e60516bd92 = echarts.init(
  15. document.getElementById('b7b0308749874870b56f16e60516bd92'), 'white', {renderer: 'canvas'});
  16. var option_b7b0308749874870b56f16e60516bd92 = {
  17. "animation": true,
  18. "animationThreshold": 2000,
  19. "animationDuration": 1000,
  20. "animationEasing": "cubicOut",
  21. "animationDelay": 0,
  22. "animationDurationUpdate": 300,
  23. "animationEasingUpdate": "cubicOut",
  24. "animationDelayUpdate": 0,
  25. "aria": {
  26. "enabled": false
  27. },
  28. "color": [
  29. "#5470c6",
  30. "#91cc75",
  31. "#fac858",
  32. "#ee6666",
  33. "#73c0de",
  34. "#3ba272",
  35. "#fc8452",
  36. "#9a60b4",
  37. "#ea7ccc"
  38. ],
  39. "series": [
  40. {
  41. "type": "heatmap",
  42. "name": "bmap",
  43. "coordinateSystem": "bmap",
  44. "data": [
  45. {
  46. "name": "\u5e7f\u4e1c\u7701",
  47. "value": [
  48. 113.26653,
  49. 23.132191,
  50. 52
  51. ]
  52. },
  53. {
  54. "name": "\u5317\u4eac\u5e02",
  55. "value": [
  56. 116.4,
  57. 39.9,
  58. 102
  59. ]
  60. },
  61. {
  62. "name": "\u4e0a\u6d77\u5e02",
  63. "value": [
  64. 121.47,
  65. 31.23,
  66. 148
  67. ]
  68. },
  69. {
  70. "name": "\u6c5f\u897f\u7701",
  71. "value": [
  72. 115.909228,
  73. 28.675696,
  74. 55
  75. ]
  76. },
  77. {
  78. "name": "\u6e56\u5357\u7701",
  79. "value": [
  80. 112.98381,
  81. 28.112444,
  82. 34
  83. ]
  84. },
  85. {
  86. "name": "\u6d59\u6c5f\u7701",
  87. "value": [
  88. 120.152791,
  89. 30.267446,
  90. 89
  91. ]
  92. },
  93. {
  94. "name": "\u6c5f\u82cf\u7701",
  95. "value": [
  96. 118.763232,
  97. 32.061707,
  98. 32
  99. ]
  100. }
  101. ],
  102. "pointSize": 20,
  103. "blurSize": 20
  104. }
  105. ],
  106. "legend": [
  107. {
  108. "data": [
  109. "bmap"
  110. ],
  111. "selected": {},
  112. "show": true,
  113. "padding": 5,
  114. "itemGap": 10,
  115. "itemWidth": 25,
  116. "itemHeight": 14,
  117. "backgroundColor": "transparent",
  118. "borderColor": "#ccc",
  119. "borderWidth": 1,
  120. "borderRadius": 0,
  121. "pageButtonItemGap": 5,
  122. "pageButtonPosition": "end",
  123. "pageFormatter": "{current}/{total}",
  124. "pageIconColor": "#2f4554",
  125. "pageIconInactiveColor": "#aaa",
  126. "pageIconSize": 15,
  127. "animationDurationUpdate": 800,
  128. "selector": false,
  129. "selectorPosition": "auto",
  130. "selectorItemGap": 7,
  131. "selectorButtonGap": 10
  132. }
  133. ],
  134. "tooltip": {
  135. "show": true,
  136. "trigger": "item",
  137. "triggerOn": "mousemove|click",
  138. "axisPointer": {
  139. "type": "line"
  140. },
  141. "showContent": true,
  142. "alwaysShowContent": false,
  143. "showDelay": 0,
  144. "hideDelay": 100,
  145. "enterable": false,
  146. "confine": false,
  147. "appendToBody": false,
  148. "transitionDuration": 0.4,
  149. "formatter": function (params) { return params.name + ' : ' + params.value[2]; },
  150. "textStyle": {
  151. "fontSize": 14
  152. },
  153. "borderWidth": 0,
  154. "padding": 5,
  155. "order": "seriesAsc"
  156. },
  157. "title": [
  158. {
  159. "show": true,
  160. "text": "BMap-\u70ed\u529b\u56fe",
  161. "target": "blank",
  162. "subtarget": "blank",
  163. "padding": 5,
  164. "itemGap": 10,
  165. "textAlign": "auto",
  166. "textVerticalAlign": "auto",
  167. "triggerEvent": false
  168. }
  169. ],
  170. "visualMap": {
  171. "show": true,
  172. "type": "continuous",
  173. "min": 0,
  174. "max": 100,
  175. "inRange": {
  176. "color": [
  177. "#50a3ba",
  178. "#eac763",
  179. "#d94e5d"
  180. ]
  181. },
  182. "calculable": true,
  183. "inverse": false,
  184. "splitNumber": 5,
  185. "hoverLink": true,
  186. "orient": "vertical",
  187. "padding": 5,
  188. "showLabel": true,
  189. "itemWidth": 20,
  190. "itemHeight": 140,
  191. "borderWidth": 0
  192. },
  193. "bmap": {
  194. "center": [
  195. 120.13066322374,
  196. 30.240018034923
  197. ],
  198. "roam": true
  199. }
  200. };
  201. chart_b7b0308749874870b56f16e60516bd92.setOption(option_b7b0308749874870b56f16e60516bd92);
  202. var bmap = chart_b7b0308749874870b56f16e60516bd92.getModel().getComponent('bmap').getBMap();
  203. </script>
  204. </body>
  205. </html>

四,源码解释

您提供了一个包含使用ECharts库创建热力图的HTML文档和JavaScript代码。该热力图使用百度地图作为底图,并在地图上显示了不同位置的热力数据。

以下是您的HTML文档和JavaScript代码的重要部分:

  1. <script>标签:您包含了四个<script>标签,用于导入ECharts库、百度地图API以及相关扩展。

  2. 图表容器:您有一个带有ID b7b0308749874870b56f16e60516bd92<div> 元素。这是您的热力图将呈现的位置。

  3. JavaScript代码:<script> 部分包含JavaScript代码,该代码使用ECharts初始化和配置热力图。该图表使用指定的选项创建,包括数据、颜色和样式。

  4. 数据:变量 option_b7b0308749874870b56f16e60516bd92 包含热力图的数据。它指定了热力图类型(heatmap),并提供了不同位置的数据点,每个数据点都有一个值表示热力强度。
  5. 图例:图例指定了数据系列的名称。
  6. 工具提示:工具提示在鼠标悬停时显示信息,并包括位置名称和热力强度。
  7. 标题:您为图表定义了一个标题。
  8. 百度地图:bmap 部分配置了百度地图的中心坐标和是否允许漫游。
  9. 视觉映射:visualMap 部分允许您配置热力图的颜色映射,以根据热力强度进行可视化。

通过加载此HTML页面,您可以在指定的容器中看到一个热力图,显示了您提供的位置数据,并以百度地图为底图。您可以根据需要修改或自定义此图表的选项和样式。

发表评论

表情:
评论列表 (有 0 条评论,17人围观)

还没有评论,来说两句吧...

相关阅读