前端控件宝典：UI组件的完整指南(60)——横向柱状图【源码在文末并附解释】

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

#前端 #ui #状态模式

本文探讨了前端控件在Web开发中的重要性，涵盖了自定义控件的原理、用户控件的区别，以及如何使用ECharts创建交互式柱状图。通过实例学习，提升Web开发技能和用户体验。

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

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

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

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

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

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

一，演示地址

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

image-20230915095732639

二、控件常识

自定义控件
自定义控件是已编译的服务器端控件，它将用户界面和其他功能都封装起来到可复用的包中，自定义控件和标准的控件相比，除了他们一个不同的标记前缀，并且必须进行显示注册和部署以外并没有什么不同。此外，自定义控件拥有自己的对象模型，能够触发事件，并支持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="1ccfe54281744b72a87d0a72767232e1" class="chart-container" style="width:900px; height:500px; "></div>
    <script>
        var chart_1ccfe54281744b72a87d0a72767232e1 = echarts.init(
            document.getElementById('1ccfe54281744b72a87d0a72767232e1'), 'white', {renderer: 'canvas'});
        var option_1ccfe54281744b72a87d0a72767232e1 = {
    "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": "2015",
            "legendHoverLink": true,
            "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": true,
                "margin": 8
            }
        },
        {
            "type": "bar",
            "name": "2016",
            "legendHoverLink": true,
            "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": true,
                "margin": 8
            }
        },
        {
            "type": "bar",
            "name": "2017",
            "legendHoverLink": true,
            "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": true,
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                "2015",
                "2016",
                "2017"
            ],
            "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": [
        {
            "type": "category",
            "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"
                }
            }
        }
    ],
    "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"
                }
            }
        }
    ],
    "dataset": [
        {
            "source": [
                [
                    "product",
                    "2015",
                    "2016",
                    "2017"
                ],
                [
                    "Matcha Latte",
                    43.3,
                    85.8,
                    93.7
                ],
                [
                    "Milk Tea",
                    83.1,
                    73.4,
                    55.1
                ],
                [
                    "Cheese Cocoa",
                    86.4,
                    65.2,
                    82.5
                ],
                [
                    "Walnut Brownie",
                    72.4,
                    53.9,
                    39.1
                ]
            ]
        }
    ],
    "title": [
        {
            "show": true,
            "text": "Dataset simple bar example",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_1ccfe54281744b72a87d0a72767232e1.setOption(option_1ccfe54281744b72a87d0a72767232e1);
    </script>
</body>
</html>

四，源码解释

这段HTML和JavaScript代码创建了一个柱状图（Bar Chart），用于可视化不同产品在2015、2016和2017年的销售情况。以下是代码的详细解释：

  1. <!DOCTYPE html>: 声明文档类型，表示这是一个HTML5文档。

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

  3. <head>: 包含文档的元信息和引用外部资源的部分。

  4. <meta charset="UTF-8">: 设置文档的字符编码为UTF-8，以确保文本可以正确显示。

  5. <title>Awesome-pyecharts</title>: 设置网页的标题为 “Awesome-pyecharts”。

  6. <script>: 引入了ECharts图表库的JavaScript文件，该文件的路径是 “https://assets.pyecharts.org/assets/v5/echarts.min.js”。这个库用于创建交互式图表。

  7. <body>: HTML文档的主体部分。

  8. <div id="1ccfe54281744b72a87d0a72767232e1" class="chart-container" style="width:900px; height:500px; "></div>: 创建一个 <div> 元素，用于容纳图表，并设置了该 <div> 的ID为 “1ccfe54281744b72a87d0a72767232e1”。此 <div> 的样式设置了宽度为900像素，高度为500像素。

  9. <script>: 包含了JavaScript代码，用于创建和配置柱状图。

    • var chart_1ccfe54281744b72a87d0a72767232e1 = echarts.init(document.getElementById('1ccfe54281744b72a87d0a72767232e1'), 'white', {renderer: 'canvas'});：创建一个ECharts图表实例，指定要渲染到的 <div> 元素的ID为 “1ccfe54281744b72a87d0a72767232e1”，设置背景颜色为白色，渲染方式为canvas。

    • var option_1ccfe54281744b72a87d0a72767232e1 = { ... }：定义了图表的配置选项。这包括图表的动画、颜色、系列（这里是柱状图的数据系列）、图例、提示框以及X和Y轴的设置。

  10. chart_1ccfe54281744b72a87d0a72767232e1.setOption(option_1ccfe54281744b72a87d0a72767232e1);：将上述定义的图表配置选项应用到图表实例，以渲染柱状图。

  11. </body>: HTML文档的主体部分结束。

  12. </html>: HTML文档的根元素结束。

这段代码的主要目的是创建一个带有交互功能的柱状图，用于可视化产品销售数据。你可以通过修改option_1ccfe54281744b72a87d0a72767232e1对象中的数据和配置选项来自定义图表的外观和行为。在这个示例中，数据源包含了四种产品在三个年份的销售数量。

【unity游戏开发入门到精通——UGUI】UI控件 —— Image图像控件
向宇
04-21 1690
【unity游戏开发入门到精通——UGUI】UI控件 —— Image图像控件
【unity游戏开发入门到精通——UGUI】UI控件 —— Button按钮控件
最新发布
向宇
04-22 2768
【unity游戏开发入门到精通——UGUI】UI控件 —— Button按钮控件
横向柱状图
03-14
Horizontalhistogram.zip 横向柱状图
html5页面横向柱状图
08-18 3298
关于横向柱状图，不使用各种插件的情况下，用CSS3+DIV+Javascript实现，效果图如下： css相关样式： /**滚动条样式**/ ::-webkit-scrollbar { width: .6em; } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-thumb { border:1px solid #419BF9...
【vue/ucharts】ucharts 自定义格式化 y 轴数据显示（横向柱状图常用）
花间半盘棋
05-20 1737
使用 ucharts 的柱状图时，尤其是横向柱状图会更常见，会有自定义 y 轴数据的情况，就像使用过滤器时对数据进行格式化以达到自己想要的效果一样；尤其是需要在纵轴展示公司名称时，可以展示部分统一样式，在点击想要查看某一项的时候仍然显示全称。但是如果此时我的数据比较长，这样放上去就会非常不美观，此时就需要对数据进行格式化，在。
Echarts大屏可视化_04 横向柱状图模块的引入和开发
a_strong_pig的博客
11-30 346
echarts 横向柱状图的定制开发
Android图表控件MPAndroidChart——BarChart实现多列柱状图以及堆积柱状图
热门推荐
xhuww的博客
07-03 6万+
目录 前言 1. 数据准备 1.1 数据来源 2. 图表展示 2.1 MPAndroidChart获取 2.2 数据对象获取 2.3 数据展示 3.柱状图外观完善 3.1 去掉图表外框，描述内容以及X Y轴线条 3.2 修改X Y轴网格线 3.3 X Y轴自定义显示值 3.4 柱状图显示不完整问题解决 3.5 单条柱状图宽度 4. 多条柱状图 4.1 多条柱状图展示...
Winform开发全套31个UI组件开源共享]
08-09
而标题中的“Winform开发全套31个UI组件开源共享”意味着有一套完整的、包含31个不同功能的用户界面组件，这些组件已经开源，可供开发者免费使用和学习。 这套开源UI组件库可能涵盖了常见的对话框、按钮、表格、...
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
HTML5/CSS3水平柱状图表 扩展性很强
08-23
之前我们也介绍了不少HTML5图表应用，让人记忆深刻的估计是这款华丽的HTML5图表，它可以选择某一段区域的数据。今天这款HTML5柱状图表就比较简单清爽了，该图表在数据展示的时候柱形会出现逐渐变化的动画状态，对于外观，应用默认提供两种，一种有背景色，另一种图表没有，当然由于这款HTML5柱状图表扩展性很强，因此你可以自己来定制图表外观。
html 自绘条形图
03-15
html 自绘条形图，效果还不错，可以自己在基础上改造。
html 柱状图
HumorousGhost
09-13 8674
HTML 柱状图绘制
框架画一个横的柱状图html_计算机语言学习4-barplot柱状图绘制
weixin_33109551的博客
01-05 222
1. RStudio简单获取Excel，txt等数据的简单方法，即： FILE-IMPORT DATASET----FROM EXCEL选择YES后，等待安装，安装完成后出现以下界面然后选择Excel文件的位置，选择data1.xlsx后显示如下Excel表内容如下：按照上图自己做一个Excel表，命名为 data1。导入后点击Import后，显示的代码为：这三句代码不需要手动输入，导入excel...
echarts 横向柱状图示例
SM_Cute的博客
11-17 3338
echarts 横向柱状图示例
横向柱状图（标签图片展示）
LBY_XK的博客
12-14 1443
效果图 HTML代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
css自定义横向流程图，步骤图
xm_w_xm的博客
03-27 7148
特想吐槽下，上传的图片尽然给拉伸了。图片都展示不好了（*-*）生气，就先凑合看吧 首先进行中的为绿色，进行中的为橙色，未进行的为灰色，活不多说直接上代码，横向的为自己手写，纵向为elementUI自带的 <ul class="steps"> <li v-for="(item,index) in list" :key="item.id" :class=...
❤echarts柱状图详细配置
林太白
08-24 1万+
❤echarts柱状图使用和配置
简单实用：css+html绘制常见图表
技术圈
12-09 5003
提到绘制图表，大家可能想到ECharts，其实，一些简单的图表可以直接通过css+html实现，下面手把手带大家绘制，初学者也能轻松掌握。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值