【免费下载链接】uiA collection of accessible, headless primitives and beautifully-designed components for Blazor inspired by shadcn/ui.项目地址https://gitcode.com/gh_mirrors/ui194/ui点击查看免费下载做 Blazor 图表开发时你是否也厌倦了手写冗长的 ECharts option 配置Blazor Blueprint 是受 shadcn/ui 启发的 Blazor 可访问组件库内置 14 种声明式组合的 ECharts 图表组件——把几个子组件嵌套在一起就能做出支持暗色模式、自动响应的生产级 Blazor 数据可视化。为什么选择声明式组合 API传统做法是把 ECharts 的 JSON option 拼成一个巨大的字符串轴、提示框、系列全部手工配置代码既难读又难维护。Blazor Blueprint 采用Recharts 风格的组合模式composition pattern图表是一个容器坐标轴、提示框、图例、系列都是子组件嵌套即可生效。BbLineChart Datadata Height300px BbXAxis DataKeymonth / BbYAxis / BbChartTooltip / BbLine DataKeydesktop NameDesktop Colorvar(--chart-1) CurveCurveType.Smooth / /BbLineChart它的背后机制很清晰可阅读 BbChartBase.razor.cs 了解实现反射式数据绑定Data传入任意IEnumerable用DataKey按属性名取值无需手动映射主题集成系列默认使用 CSS 变量--chart-1~--chart-5暗色/亮色切换自动重绘自动响应式每个图表实例都挂载ResizeObserver窗口缩放时自动 resize零外部依赖ECharts 5.5.x 已作为静态资源打包在wwwroot/lib/echarts/echarts.min.js不需要 CDN 或额外 NuGet 包完整 API 文档见 Chart/README.md。14 种 ECharts 图表组件速查表图表组件类型最佳场景BbLineChart折线图时间趋势、增长率BbAreaChart面积图强调体量与累积量BbBarChart柱状图类别对比支持Horizontal横向BbPieChart饼图/环形图占比构成InnerRadius即环形BbRadarChart雷达图多维能力对比BbRadialBarChart径向条形图环形进度展示BbRoseChart玫瑰图按长度排序的排名BbScatterChart散点图相关性、分布XDataKeyDataKeyBbCandlestickChartK线图金融行情BbHeatmapChart热力图强度矩阵如时段×星期BbGaugeChart仪表盘目标完成度BbFunnelChart漏斗图转化流程BbSankeyChart桑基图流量/资金流向BbMapChart地理地图世界分区着色内置 241 个国家边界类型定义都在 Types/ 目录可逐文件查看参数。此外还有一个隐藏的第 15 种——综合图容器BbChart允许在一张图里自由混搭 Bar、Line、Area、Scatter 系列BbChart Datadata Height350px BbXAxis DataKeymonth / BbYAxis / BbChartTooltip / BbBar DataKeyrevenue NameRevenue Colorvar(--chart-1) / BbLine DataKeyprofit NameProfit Colorvar(--chart-2) CurveCurveType.Smooth / /BbChart实现见 BbChart.cs。快速上手30 秒画出第一张折线图所有图表容器共享同一组基础参数Data数据源、Height、Width、Title、EnableAnimations。以月度访问数据为例code { private record MonthlyData(string Month, int Desktop, int Mobile); private ListMonthlyData data [ new(Jan, 186, 80), new(Feb, 305, 200), new(Mar, 237, 120), new(Apr, 73, 190), new(May, 209, 130), new(Jun, 214, 140) ]; }BbLineChart Datadata Height300px BbXAxis DataKeymonth / BbYAxis / BbChartTooltip / BbChartLegend / BbLine DataKeydesktop NameDesktop Colorvar(--chart-1) / BbLine DataKeymobile NameMobile Colorvar(--chart-2) / /BbLineChart注意数据只声明了一次两条线分别用DataKeydesktop和DataKeymobile指向不同属性——这正是声明式的含义你描述结构而不是拼配置。更完整的可交互示例参考 LineChartDemo.razor可折叠代码片段在 CodeExamples/Charts/LineChart/ 目录default.txt、stacked.txt、step.txt等 8 种变体。常用子组件坐标轴、提示框与图例所有图表都可以嵌套这组基础设施子组件它们通过CascadingValue自动注册到父图表子组件常用参数说明BbXAxis/BbYAxisDataKey、Type、ShowGrid、Min/Max、LabelRotate轴类型支持Category、Value、Time、LogBbChartTooltipIndicatorDot/Line/Dashed/None、BackgroundColor悬浮提示框BbChartLegendPositionTop/Bottom/Left/Right/Hidden、ItemGap图例BbGridLeft/Right/Top/Bottom、ContainLabel绘图区域边距完整参数表见 README 参数章节。进阶技巧堆叠、环形中心标签与渐变填充 堆叠柱状图系列上加Stackedtrue即可多个BbBar自动按StackGroup归组BbBarChart Datadata Height200px BbXAxis DataKeymonth / BbChartTooltip / BbChartLegend / BbBar DataKeydesktop NameDesktop Colorvar(--chart-1) Stackedtrue / BbBar DataKeymobile NameMobile Colorvar(--chart-2) Stackedtrue BorderRadius4 / /BbBarChart参考示例stacked-legend.txt。 环形图 中心标签InnerRadius60变环形嵌套BbCenterLabel显示汇总值BbPieChart Datadata Height250px BbChartTooltip / BbPie DataKeyvisitors NameKeybrowser InnerRadius60 BbCenterLabel TitleTotal Value1,234 / /BbPie /BbPieChart 渐变填充系列内部可嵌套Fill → LinearGradient → GradientStop实现从主题色淡出的高级效果BbArea DataKeydesktop NameDesktop Colorvar(--chart-1) CurveCurveType.Smooth BbFill BbLinearGradient DirectionGradientDirection.Vertical BbGradientStop Offset0 Colorvar(--chart-1) Opacity0.8 / BbGradientStop Offset1 Colorvar(--chart-1) Opacity0.1 / /BbLinearGradient /BbFill /BbArea值得尝试的三种特色图表️ MapChart开箱即用的世界地图。内置 Natural Earth 数据集的 241 个国家边界无需 API Key、无需外部地图服务BbMapChart Datavisitors Height420px OnDataPointClickSelectCountry BbChartTooltip / BbMap CountryKeyCountry DataKeyVisitors NameVisitors / /BbMapChart配合BbVisualMap可固定颜色区间让多张地图跨期可比Roamtrue开启缩放平移。地图资源说明见 maps/README.md。 SankeyChart桑基流向图。直接绑定链接集合源、目标、值三列节点列表自动从名称派生BbSankeyChart Dataflows Height320px BbChartTooltip / BbSankey SourceKeyfrom TargetKeyto DataKeyvalue / /BbSankeyChart它还做了贴心防护若链接构成环ECharts 会直接抛错导致整图空白会自动丢弃成环的那条链接并正常绘制其余部分。 CandlestickChart金融 K 线图。内置涨跌配色与网格样式适合行情类看板示例见 CandlestickChartDemo.razor。暗色模式与响应式完全零配置这是整套图表最省心的地方你几乎不需要写任何额外代码主题色自动解析ECharts 原生不支持 CSSvar()chart-theme.js会在运行时通过getComputedStyle()把--chart-1~--chart-5解析为具体色值连 OKLCH 颜色也能正确转换主题切换自动重绘MutationObserver监听html类名变化切换暗色/亮色时所有图表即时重渲染窗口缩放自适应每个图表实例独立挂载ResizeObserver统一卡片容器BbChartContainer提供 Card 风格的标题 副标题 图表布局整页观感一致系列未显式指定Color时会按出现顺序自动分配--chart-1~--chart-5因此多系列图表开箱就配色协调。相关目录与文件资料路径说明Chart/README.md图表系统完整文档架构、全部参数表、主题机制Types/14 种图表 综合图容器BbChartSeries/系列组件BbLine、BbBar、BbPie、BbRose、BbSankey等Composables/BbXAxis、BbYAxis、BbChartTooltip、BbChartLegend、BbGridCore/BbChartBase.razor图表基类JS 互操作与子组件注册CodeExamples/Charts/全部 14 种图表的可复制示例片段100 个 .txt 变体Pages/Charts/15 个可交互演示页含 CompositeChart 综合图小结Blazor Blueprint 把 ECharts 封装成了一套嵌套子组件即配置的 Blazor 图表 API14 种常用图表类型全覆盖数据绑定靠DataKey一行搞定主题、暗色模式、响应式全部自动化。对于需要 Blazor 数据可视化方案的团队这套声明式组合 API 是少见的学习成本低、视觉产出高的选择——先跑通 LineChartDemo.razor 里的第一个折线图剩下的就是按需挑组件了。赞分享【免费下载链接】uiA collection of accessible, headless primitives and beautifully-designed components for Blazor inspired by shadcn/ui.项目地址https://gitcode.com/gh_mirrors/ui194/ui点击查看免费下载相关推荐Blazor 表单系统实战指南Blazor Blueprint 的 30 FormField 组件与 EditForm 集成的完整教程Blazor 表单系统实战指南Blazor Blueprint 的 30 FormField 组件与 EditForm 集成的完整教程 在 Blazor 应如何用Radzen Blazor打造专业数据可视化面积图、雷达图完全指南如何用Radzen Blazor打造专业数据可视化面积图、雷达图完全指南 Radzen Blazor是一套包含70多个免费原生Blazor UI组件的强大工具REA 逆向分析技能一键安装四步让 AI 编码助手读懂二进制与 APKREA 逆向分析技能一键安装四步让 AI 编码助手读懂二进制与 APK REAReverse Engineer Anything是一个一键安装的逆向分析技逆向工程MCP 服务AI 技能上一篇科学家会被Agent取代吗这个技能库让AI做科研从演示走向日常下一篇ovobrowser五类指纹噪声详解Canvas/WebGL/Audio/ClientRects/Font加噪机制与种子玩法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考