前端控件宝典：UI组件的完整指南(45)——箱线图（增加伸缩滑块）【源码在文末并附解释】

小咪咪 2023-10-16 09:32 9阅读 0赞

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

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

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

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

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

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

访问网址：http://59.110.22.223:8080/Model\_qianduan/multiple\_categories.html

![image-20230915092631957][]

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

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

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

当在 ECharts 图表中使用中文时，需要确保以下几个方面的设置，以确保中文可以正确显示：

1.  **字符编码设置：** 在 HTML 文件的 `<head>` 部分，要确保指定了正确的字符编码，通常使用 UTF-8 编码是最常见的，这样可以支持多种语言，包括中文。
    
        <meta charset="UTF-8">
2.  **字体设置：** ECharts 默认会使用浏览器的字体来显示文本，通常情况下，现代浏览器都能正确显示中文。但如果您希望确保显示中文的稳定性，可以在 ECharts 的配置中指定一个中文字体。
    
        <script>
            var chart = echarts.init(document.getElementById('chart-container'));
        
            // 设置中文字体
            echarts.registerMap('yourMap', {
                
                'type': 'FeatureCollection',
                'features': []
            });
        
            var option = {
                
                // ... 其他配置
                textStyle: {
                
                    fontFamily: '微软雅黑', // 中文字体
                    fontSize: 14 // 中文字体大小
                },
                // ... 其他配置
            };
        
            chart.setOption(option);
        </script>
3.  **标签文本设置：** 在 ECharts 的配置中，可以设置各种标签文本，包括标题、图例、坐标轴标签、数据标签等。确保您在这些配置中使用了中文。
    
        var option = {
            title: {
                text: '中文标题', // 标题文本
                textStyle: {
                    fontSize: 16, // 标题字体大小
                    fontFamily: '微软雅黑' // 标题字体
                }
            },
            legend: {
                data: ['数据'], // 图例文本
                textStyle: {
                    fontSize: 14, // 图例字体大小
                    fontFamily: '微软雅黑' // 图例字体
                }
            },
            xAxis: {
                name: 'X轴', // X轴名称
                nameTextStyle: {
                    fontSize: 12, // X轴名称字体大小
                    fontFamily: '微软雅黑' // X轴名称字体
                },
                axisLabel: {
                    fontSize: 12, // X轴标签字体大小
                    fontFamily: '微软雅黑' // X轴标签字体
                }
            },
            yAxis: {
                name: 'Y轴', // Y轴名称
                nameTextStyle: {
                    fontSize: 12, // Y轴名称字体大小
                    fontFamily: '微软雅黑' // Y轴名称字体
                },
                axisLabel: {
                    fontSize: 12, // Y轴标签字体大小
                    fontFamily: '微软雅黑' // Y轴标签字体
                }
            },
            series: [
                {
                    name: '数据',
                    type: 'bar',
                    data: [100, 200, 300, 400, 500],
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 12, // 数据标签字体大小
                        fontFamily: '微软雅黑' // 数据标签字体
                    }
                }
            ]
        };

在上述示例中，我们通过 `textStyle` 设置了中文字体和字体大小，确保了标题、图例、坐标轴标签和数据标签的文本都使用了指定的字体。同时，我们还可以在其他配置项中使用中文，确保图表中的文本都是中文。

最后，确保您的网页能够加载所选字体文件。在上述示例中，我们使用了微软雅黑字体作为示例，但您可以根据需要选择其他中文字体。要确保浏览器能够正确加载所选字体，通常需要在 CSS 中设置字体引用，或确保浏览器能够访问字体文件。

## 前端控件宝典：UI组件的完整指南(45)——箱线图（增加伸缩滑块）【源码在文末并附解释】 ##