前端控件宝典：UI组件的完整指南(24)——柱状图（堆叠数据）【源码在文末并附解释】

最新推荐文章于 2025-06-30 20:49:31 发布
原创 最新推荐文章于 2025-06-30 20:49:31 发布 · 200 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #ui #状态模式

本文探讨了Web开发中的前端控件，涵盖了自定义控件与用户控件的区别，以及如何使用Echarts和Pyecharts创建动态图表。通过实例学习，提升Web开发技能和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

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

一，演示地址

访问网址：http://59.110.22.223:8080/Model_qianduan/bar_stack0.html

image-20230914125016749

二、控件常识

自定义控件
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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="028122dc402849de9c14b5f4e80e8e84" class="chart-container" style="width:900px; height:500px; "></div>
    <script>
        var chart_028122dc402849de9c14b5f4e80e8e84 = echarts.init(
            document.getElementById('028122dc402849de9c14b5f4e80e8e84'), 'white', {renderer: 'canvas'});
        var option_028122dc402849de9c14b5f4e80e8e84 = {
    "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": "\u5546\u5bb6A",
            "legendHoverLink": true,
            "data": [
                70,
                37,
                109,
                118,
                76,
                117,
                79
            ],
            "realtimeSort": false,
            "showBackground": false,
            "stack": "stack1",
            "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
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        },
        {
            "type": "bar",
            "name": "\u5546\u5bb6B",
            "legendHoverLink": true,
            "data": [
                78,
                150,
                112,
                45,
                101,
                115,
                63
            ],
            "realtimeSort": false,
            "showBackground": false,
            "stack": "stack1",
            "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
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5546\u5bb6A",
                "\u5546\u5bb6B"
            ],
            "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": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5468\u4e00",
                "\u5468\u4e8c",
                "\u5468\u4e09",
                "\u5468\u56db",
                "\u5468\u4e94",
                "\u5468\u516d",
                "\u5468\u65e5"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "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": "Bar-\u5806\u53e0\u6570\u636e\uff08\u5168\u90e8\uff09",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_028122dc402849de9c14b5f4e80e8e84.setOption(option_028122dc402849de9c14b5f4e80e8e84);
    </script>
</body>
</html>

四，源码解释

这是一个包含两个数据系列（“商家A"和"商家B”）的柱状图（bar chart）的HTML页面示例，用于展示一周内两个商家的销售数据。以下是代码的解释：

  1. <!DOCTYPE html>：HTML文档类型声明，指定了文档使用的HTML版本。

  2. <html>：HTML文档的根元素。

  3. <head>：头部部分包含了文档的元数据和外部资源的引用，其中包括字符编码设置和Echarts JavaScript库的引入。

    • <meta charset="UTF-8">：指定文档的字符编码为UTF-8，以支持显示特殊字符。

    • <title>Awesome-pyecharts</title>：设置HTML文档的标题。

    • <script>：引入了Pyecharts所依赖的Echarts JavaScript库，用于创建交互式图表。

  4. <body>：HTML文档的主体部分。

    • <div id="028122dc402849de9c14b5f4e80e8e84" class="chart-container" style="width:900px; height:500px;"></div>：在页面中创建一个<div>元素，用于容纳图表。id属性为该<div>元素指定了一个唯一的标识符，这个标识符将在后续的JavaScript代码中用于初始化图表。class属性用于指定CSS样式类，可以用于自定义图表的样式。style属性设置了<div>元素的宽度和高度，确定了图表的尺寸。

    • <script>：包含了JavaScript代码，用于创建和配置图表。

      • var chart_028122dc402849de9c14b5f4e80e8e84 = echarts.init(...);：创建一个Echarts图表对象，并将其关联到之前创建的<div>元素上。这里还设置了图表的背景颜色为白色。

      • var option_028122dc402849de9c14b5f4e80e8e84 = { ... };：定义了图表的配置选项，包括图表类型、颜色、数据等。

      • chart_028122dc402849de9c14b5f4e80e8e84.setOption(option_028122dc402849de9c14b5f4e80e8e84);：将配置选项应用于图表对象，从而创建实际的图表。

这个柱状图包含了两个数据系列（“商家A"和"商家B”），每个数据系列对应一家商家，柱子代表一周内的销售数量。图表的标题是"Bar-堆叠数据（全部）"，并且通过配置选项中的"stack": "stack1"将两个数据系列堆叠在一起，以便比较不同商家的销售情况。

图表的外观和行为可以根据需要进行自定义修改，例如，柱子的颜色、标签位置等。如果需要添加更多的数据系列或修改其他图表属性，可以进一步编辑配置选项。

HTML前端入门归纳——控件
weixin_30882895的博客
05-18 473
　　本人一直在从事.net的开发，界面都是采用的WPF，近期花了一个多月进行HTML前端的学习，在这里呢进行学习总结和归纳。　　本系列将主要分为4个模块： 　　　　控件 　　　　样式 　　　　布局 　　　　JavaScript 　　根据多年WPF的开发经验，界面就是控件及样式与布局的组合，再加上代码来控制交互逻辑，本期先对HTML常用的控件进行归纳。 　　div : 区块 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 1万+
本文长期更新
前端页面控件
06-18
前端页面控件
前端领域：ElementUI的时间选择器组件详解
最新发布
小白菜的博客
06-30 1092
本文旨在全面介绍ElementUI框架中的时间选择器(TimePicker)组件，包括其基本用法、配置选项、事件处理以及在实际项目中的应用场景。我们还将分析其内部实现原理，帮助开发者更好地理解和使用该组件。核心概念与联系：介绍时间选择器的基本概念和设计思想核心算法原理：分析时间选择器的内部实现机制项目实战：通过实际案例展示组件的使用方法实际应用场景：探讨组件在不同业务场景中的应用总结与思考：回顾关键知识点并提出延伸思考ElementUI：基于Vue.js的桌面端组件库。
前端小控件
04-24
由CSS和Jquery组成的一些前端控件，解压之后可以直接使用
漂亮的前端控件
lzz360的专栏
10-27 4200
一，status bootstrap提更的一个下拉控件，但是它支持复选。。实现的方式是通过隐藏真实的checkbox,通过js将操作值传递给checkbox             Status                                                                             Drafted √  
前端控件类型
玖囍
08-03 1993
颜色选择器（Color Picker）：允许用户选择颜色值的控件，常见的形式包括拾色器、调色板等。地图（Map）：集成地图服务，显示地理位置、标记、路线等信息的控件。反馈组件（Feedback Component）：用于收集用户意见、评价和反馈的控件，如星级评价、意见框等。文本编辑器（Rich Text Editor）：用于编辑富文本内容（如格式化文本、插入图像等）的控件。打印控件（Print Control）：用于控制网页打印选项的控件，如选择打印内容、设置页面布局等。
Extjs源码分析与开发实例宝典
08-15
- **图表组件**：引入了新的图表类型，如饼图、柱状图等，支持数据可视化。 ### 结论 《Extjs源码分析与开发实例宝典》全面介绍了ExtJS的技术细节和开发实践，是学习和掌握ExtJS不可或缺的资源。通过对本书的深入...
微信小程序学习指南
weixin_30446197的博客
12-13 3850
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
（1）目录
JAVA成长之路
03-16 6509
一、编程基础 [1-1] 编程基础之数据基础 [1-2] 编程基础之数据结构 [1-3] 编程基础之查找与排序 [1-4] 编程基础之类笔试面试题 [1-5]编程之美 二、Java [2-1] Java之基本知识 [2-2] Java之设计模式 [2-3] Java之面试宝典 三、J2EE [3-1] J2EE之基本知识 四、Android [4-1] android之基本知识 [...
微信小程序开发的学习资料收集
热门推荐
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
前端日期控件
04-26
前端日期控件,可以提供用户选择规定格式的日期,前端日期控件,可以提供用户选择规定格式的日期,
前端控件集.zip
05-27
一个一个的小案例
kendoui demo 仪表盘 柱状图
07-17
kendoui demo 仪表盘 柱状图
前端控件总结.xmind
04-01
前端测试许多输入框大同小异，这个文档比较全，可以免去大家比较多的麻烦
Bootstrap柱状图插件
09-04
Bootstrap柱状图插件
前端控件宝典：UI组件的完整指南(25)——柱状图（部分数据堆叠）【源码在文末并附解释】
m0_63324772的博客
09-15 288
前端控件宝典：UI组件的完整指南(25)——柱状图（部分数据堆叠）【源码在文末并附解释】
html5 堆叠柱状,Highcharts 堆叠柱形图
weixin_42324905的博客
06-19 543
Highcharts 堆叠柱形图以下实例演示了堆叠柱形图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性：配置plotOptions：数据点选项plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。配置图表堆叠设置 plotOpt...
前端控件宝典：UI组件的完整指南(48)——箱线图（附加标题）【源码在文末并附解释】
m0_63324772的博客
09-19 151
前端控件宝典：UI组件的完整指南(48)——箱线图（附加标题）【源码在文末并附解释】
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值