前端控件宝典：UI组件的完整指南(38)——3D柱状图（多色彩显示）【源码在文末并附解释】

「爱情、让人受尽委屈。」 2023-10-16 09:11 16阅读 0赞

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

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

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

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

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

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

访问网址：http://59.110.22.223:8080/Model\_qianduan/bar3d\_punch\_card.html

![image-20230915091101046][]

![image-20230915091111502][]

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

自定义控件  
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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/echarts-gl.min.js"></script>
    
    </head>
    <body >
        <div id="70aeaa825c674dfcbfaa53d1672878ce" class="chart-container" style="width:900px; height:500px; "></div>
        <script>
            var chart_70aeaa825c674dfcbfaa53d1672878ce = echarts.init(
                document.getElementById('70aeaa825c674dfcbfaa53d1672878ce'), 'white', {renderer: 'canvas'});
            var option_70aeaa825c674dfcbfaa53d1672878ce = {
        "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": "bar3D",
                "data": [
                    [
                        0,
                        0,
                        5
                    ],
                    [
                        1,
                        0,
                        1
                    ],
                    [
                        2,
                        0,
                        0
                    ],
                    [
                        3,
                        0,
                        0
                    ],
                    [
                        4,
                        0,
                        0
                    ],
                    [
                        5,
                        0,
                        0
                    ],
                    [
                        6,
                        0,
                        0
                    ],
                    [
                        7,
                        0,
                        0
                    ],
                    [
                        8,
                        0,
                        0
                    ],
                    [
                        9,
                        0,
                        0
                    ],
                    [
                        10,
                        0,
                        0
                    ],
                    [
                        11,
                        0,
                        2
                    ],
                    [
                        12,
                        0,
                        4
                    ],
                    [
                        13,
                        0,
                        1
                    ],
                    [
                        14,
                        0,
                        1
                    ],
                    [
                        15,
                        0,
                        3
                    ],
                    [
                        16,
                        0,
                        4
                    ],
                    [
                        17,
                        0,
                        6
                    ],
                    [
                        18,
                        0,
                        4
                    ],
                    [
                        19,
                        0,
                        4
                    ],
                    [
                        20,
                        0,
                        3
                    ],
                    [
                        21,
                        0,
                        3
                    ],
                    [
                        22,
                        0,
                        2
                    ],
                    [
                        23,
                        0,
                        5
                    ],
                    [
                        0,
                        1,
                        7
                    ],
                    [
                        1,
                        1,
                        0
                    ],
                    [
                        2,
                        1,
                        0
                    ],
                    [
                        3,
                        1,
                        0
                    ],
                    [
                        4,
                        1,
                        0
                    ],
                    [
                        5,
                        1,
                        0
                    ],
                    [
                        6,
                        1,
                        0
                    ],
                    [
                        7,
                        1,
                        0
                    ],
                    [
                        8,
                        1,
                        0
                    ],
                    [
                        9,
                        1,
                        0
                    ],
                    [
                        10,
                        1,
                        5
                    ],
                    [
                        11,
                        1,
                        2
                    ],
                    [
                        12,
                        1,
                        2
                    ],
                    [
                        13,
                        1,
                        6
                    ],
                    [
                        14,
                        1,
                        9
                    ],
                    [
                        15,
                        1,
                        11
                    ],
                    [
                        16,
                        1,
                        6
                    ],
                    [
                        17,
                        1,
                        7
                    ],
                    [
                        18,
                        1,
                        8
                    ],
                    [
                        19,
                        1,
                        12
                    ],
                    [
                        20,
                        1,
                        5
                    ],
                    [
                        21,
                        1,
                        5
                    ],
                    [
                        22,
                        1,
                        7
                    ],
                    [
                        23,
                        1,
                        2
                    ],
                    [
                        0,
                        2,
                        1
                    ],
                    [
                        1,
                        2,
                        1
                    ],
                    [
                        2,
                        2,
                        0
                    ],
                    [
                        3,
                        2,
                        0
                    ],
                    [
                        4,
                        2,
                        0
                    ],
                    [
                        5,
                        2,
                        0
                    ],
                    [
                        6,
                        2,
                        0
                    ],
                    [
                        7,
                        2,
                        0
                    ],
                    [
                        8,
                        2,
                        0
                    ],
                    [
                        9,
                        2,
                        0
                    ],
                    [
                        10,
                        2,
                        3
                    ],
                    [
                        11,
                        2,
                        2
                    ],
                    [
                        12,
                        2,
                        1
                    ],
                    [
                        13,
                        2,
                        9
                    ],
                    [
                        14,
                        2,
                        8
                    ],
                    [
                        15,
                        2,
                        10
                    ],
                    [
                        16,
                        2,
                        6
                    ],
                    [
                        17,
                        2,
                        5
                    ],
                    [
                        18,
                        2,
                        5
                    ],
                    [
                        19,
                        2,
                        5
                    ],
                    [
                        20,
                        2,
                        7
                    ],
                    [
                        21,
                        2,
                        4
                    ],
                    [
                        22,
                        2,
                        2
                    ],
                    [
                        23,
                        2,
                        4
                    ],
                    [
                        0,
                        3,
                        7
                    ],
                    [
                        1,
                        3,
                        3
                    ],
                    [
                        2,
                        3,
                        0
                    ],
                    [
                        3,
                        3,
                        0
                    ],
                    [
                        4,
                        3,
                        0
                    ],
                    [
                        5,
                        3,
                        0
                    ],
                    [
                        6,
                        3,
                        0
                    ],
                    [
                        7,
                        3,
                        0
                    ],
                    [
                        8,
                        3,
                        1
                    ],
                    [
                        9,
                        3,
                        0
                    ],
                    [
                        10,
                        3,
                        5
                    ],
                    [
                        11,
                        3,
                        4
                    ],
                    [
                        12,
                        3,
                        7
                    ],
                    [
                        13,
                        3,
                        14
                    ],
                    [
                        14,
                        3,
                        13
                    ],
                    [
                        15,
                        3,
                        12
                    ],
                    [
                        16,
                        3,
                        9
                    ],
                    [
                        17,
                        3,
                        5
                    ],
                    [
                        18,
                        3,
                        5
                    ],
                    [
                        19,
                        3,
                        10
                    ],
                    [
                        20,
                        3,
                        6
                    ],
                    [
                        21,
                        3,
                        4
                    ],
                    [
                        22,
                        3,
                        4
                    ],
                    [
                        23,
                        3,
                        1
                    ],
                    [
                        0,
                        4,
                        1
                    ],
                    [
                        1,
                        4,
                        3
                    ],
                    [
                        2,
                        4,
                        0
                    ],
                    [
                        3,
                        4,
                        0
                    ],
                    [
                        4,
                        4,
                        0
                    ],
                    [
                        5,
                        4,
                        1
                    ],
                    [
                        6,
                        4,
                        0
                    ],
                    [
                        7,
                        4,
                        0
                    ],
                    [
                        8,
                        4,
                        0
                    ],
                    [
                        9,
                        4,
                        2
                    ],
                    [
                        10,
                        4,
                        4
                    ],
                    [
                        11,
                        4,
                        4
                    ],
                    [
                        12,
                        4,
                        2
                    ],
                    [
                        13,
                        4,
                        4
                    ],
                    [
                        14,
                        4,
                        4
                    ],
                    [
                        15,
                        4,
                        14
                    ],
                    [
                        16,
                        4,
                        12
                    ],
                    [
                        17,
                        4,
                        1
                    ],
                    [
                        18,
                        4,
                        8
                    ],
                    [
                        19,
                        4,
                        5
                    ],
                    [
                        20,
                        4,
                        3
                    ],
                    [
                        21,
                        4,
                        7
                    ],
                    [
                        22,
                        4,
                        3
                    ],
                    [
                        23,
                        4,
                        0
                    ],
                    [
                        0,
                        5,
                        2
                    ],
                    [
                        1,
                        5,
                        1
                    ],
                    [
                        2,
                        5,
                        0
                    ],
                    [
                        3,
                        5,
                        3
                    ],
                    [
                        4,
                        5,
                        0
                    ],
                    [
                        5,
                        5,
                        0
                    ],
                    [
                        6,
                        5,
                        0
                    ],
                    [
                        7,
                        5,
                        0
                    ],
                    [
                        8,
                        5,
                        2
                    ],
                    [
                        9,
                        5,
                        0
                    ],
                    [
                        10,
                        5,
                        4
                    ],
                    [
                        11,
                        5,
                        1
                    ],
                    [
                        12,
                        5,
                        5
                    ],
                    [
                        13,
                        5,
                        10
                    ],
                    [
                        14,
                        5,
                        5
                    ],
                    [
                        15,
                        5,
                        7
                    ],
                    [
                        16,
                        5,
                        11
                    ],
                    [
                        17,
                        5,
                        6
                    ],
                    [
                        18,
                        5,
                        0
                    ],
                    [
                        19,
                        5,
                        5
                    ],
                    [
                        20,
                        5,
                        3
                    ],
                    [
                        21,
                        5,
                        4
                    ],
                    [
                        22,
                        5,
                        2
                    ],
                    [
                        23,
                        5,
                        0
                    ],
                    [
                        0,
                        6,
                        1
                    ],
                    [
                        1,
                        6,
                        0
                    ],
                    [
                        2,
                        6,
                        0
                    ],
                    [
                        3,
                        6,
                        0
                    ],
                    [
                        4,
                        6,
                        0
                    ],
                    [
                        5,
                        6,
                        0
                    ],
                    [
                        6,
                        6,
                        0
                    ],
                    [
                        7,
                        6,
                        0
                    ],
                    [
                        8,
                        6,
                        0
                    ],
                    [
                        9,
                        6,
                        0
                    ],
                    [
                        10,
                        6,
                        1
                    ],
                    [
                        11,
                        6,
                        0
                    ],
                    [
                        12,
                        6,
                        2
                    ],
                    [
                        13,
                        6,
                        1
                    ],
                    [
                        14,
                        6,
                        3
                    ],
                    [
                        15,
                        6,
                        4
                    ],
                    [
                        16,
                        6,
                        0
                    ],
                    [
                        17,
                        6,
                        0
                    ],
                    [
                        18,
                        6,
                        0
                    ],
                    [
                        19,
                        6,
                        0
                    ],
                    [
                        20,
                        6,
                        1
                    ],
                    [
                        21,
                        6,
                        2
                    ],
                    [
                        22,
                        6,
                        2
                    ],
                    [
                        23,
                        6,
                        6
                    ]
                ],
                "label": {
                    "show": false,
                    "margin": 8
                },
                "grid3DIndex": 0
            }
        ],
        "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"
        },
        "xAxis3D": {
            "data": [
                "12a",
                "1a",
                "2a",
                "3a",
                "4a",
                "5a",
                "6a",
                "7a",
                "8a",
                "9a",
                "10a",
                "11a",
                "12p",
                "1p",
                "2p",
                "3p",
                "4p",
                "5p",
                "6p",
                "7p",
                "8p",
                "9p",
                "10p",
                "11p"
            ],
            "show": true,
            "scale": false,
            "grid3DIndex": 0,
            "nameGap": 20,
            "logBase": 10,
            "type": "category",
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        "yAxis3D": {
            "data": [
                "Saturday",
                "Friday",
                "Thursday",
                "Wednesday",
                "Tuesday",
                "Monday",
                "Sunday"
            ],
            "show": true,
            "scale": false,
            "grid3DIndex": 0,
            "nameGap": 20,
            "logBase": 10,
            "type": "category",
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        "zAxis3D": {
            "show": true,
            "scale": false,
            "grid3DIndex": 0,
            "nameGap": 20,
            "logBase": 10,
            "type": "value",
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        },
        "grid3D": {
            "boxWidth": 200,
            "boxHeight": 100,
            "boxDepth": 80,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "environment": "auto",
            "viewControl": {
                "autoRotate": false,
                "autoRotateSpeed": 10,
                "rotateSensitivity": 1,
                "alpha": 20,
                "beta": 40,
                "minAlpha": -90,
                "maxAlpha": 90
            },
            "zlevel": -10,
            "left": "auto",
            "top": "auto",
            "right": "auto",
            "bottom": "auto"
        },
        "title": [
            {
                "show": true,
                "target": "blank",
                "subtarget": "blank",
                "padding": 5,
                "itemGap": 10,
                "textAlign": "auto",
                "textVerticalAlign": "auto",
                "triggerEvent": false
            }
        ],
        "visualMap": {
            "show": true,
            "type": "continuous",
            "min": 0,
            "max": 20,
            "inRange": {
                "color": [
                    "#313695",
                    "#4575b4",
                    "#74add1",
                    "#abd9e9",
                    "#e0f3f8",
                    "#ffffbf",
                    "#fee090",
                    "#fdae61",
                    "#f46d43",
                    "#d73027",
                    "#a50026"
                ]
            },
            "calculable": true,
            "inverse": false,
            "splitNumber": 5,
            "hoverLink": true,
            "orient": "vertical",
            "padding": 5,
            "showLabel": true,
            "itemWidth": 20,
            "itemHeight": 140,
            "borderWidth": 0
        }
    };
            chart_70aeaa825c674dfcbfaa53d1672878ce.setOption(option_70aeaa825c674dfcbfaa53d1672878ce);
        </script>
    </body>
    </html>

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

您提供了一个包含使用ECharts库创建3D柱状图的HTML文档和JavaScript代码。该图表可可视化一周中不同时间段的数据。

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

1.  `<script>`标签：您包含了两个`<script>`标签，用于导入ECharts库及其GL扩展。这些库对于创建3D图表是必需的。

1.  图表容器：您有一个带有ID `70aeaa825c674dfcbfaa53d1672878ce` 的 `<div>` 元素。这是您的3D柱状图将呈现的位置。

1.  JavaScript代码：`<script>` 部分包含JavaScript代码，该代码使用ECharts初始化和配置3D柱状图。该图表使用指定的选项创建，包括数据、标签和样式。
2.  数据：变量 `option_70aeaa825c674dfcbfaa53d1672878ce` 包含3D柱状图的数据。它指定了图表类型（bar3D），并提供了一个数据点的矩阵。每个数据点表示一天中的特定时间和星期几的柱状图高度。
3.  坐标轴：`xAxis3D`、`yAxis3D` 和 `zAxis3D` 配置定义了3D图表的三个轴的标签和刻度。
4.  视觉设置：使用视觉设置来自定义图表的外观，如颜色、图例和工具提示。
5.  标题：您为图表定义了一个标题。
6.  视觉映射：视觉映射允许您将数据值映射到颜色，以便更好地可视化。
7.  `chart_70aeaa825c674dfcbfaa53d1672878ce.setOption()`：最后，使用`setOption`方法将图表配置应用于具有指定ID的图表容器。

当您在Web浏览器中加载此HTML页面时，您应该会在指定的容器中看到一个3D柱状图，显示您提供的数据。您可以通过修改JavaScript代码中的选项和数据来进一步自定义此图表。

[image-20230915091101046]: https://img-blog.csdnimg.cn/img_convert/ffe7a3da8ac017cb9c56e7948dcfe04f.png
[image-20230915091111502]: https://img-blog.csdnimg.cn/img_convert/2ee3da5512e73706fe7967ff6b9d5569.png