N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
数据展示 / 09

图表

不依赖任何图表库,纯 CSS 与 SVG 绘制的基础图表:柱状图、横向条形图、折线图与面积图、饼图与圆环图、雷达图,以及用在表格与卡片里的迷你走势图。

柱状图

.bars
2026 年各月营收
单位:万元 · 全年累计 969.4 万
本年 去年同期
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
全年最高
128.0 万
12 月
全年最低
42.0 万
1 月
同比增速
33.9%
对比去年同期

横向条形图

.hbar-row
获客渠道分布
单位:人 · 统计区间 2026-09-01 至 10-03
自然搜索
8,642
社交媒体
6,420
内容种草
5,218
老客推荐
3,804
付费投放
3,120
线下活动
1,406
各区域库存健康度
低于 50% 的仓库自动标记为异常
华东仓
92%
华南仓
84%
华北仓
68%
西南仓
46%

健康度低于 50% 的仓库自动标红,并在每日 09:00 推送补货建议。

折线图 · 面积图

SVG polyline / polygon
月度营收趋势(双序列)
2026 年 vs 2025 年 · 单位:万元
2026 2025
140 105 70 35 0 1 2 3 4 5 6 7 8 9 10 11 12 11 月 118.0 万
日活用户面积图
近 14 天 · 单位:千人
+12.4%
36 27 18 9 峰值 36.4 千 09-20 09-25 09-30 10-03

饼图 · 圆环图

conic-gradient / .donut
终端占比
全量访问 128,460 次
iOS54%
Android24%
桌面端13%
其他9%
任务完成度
本月 1,284 个任务
82%
按时完成
13%
已延期
已完成1,053
进行中167
已延期64
收入结构
季度累计 1,286 万元
1,286万元
订阅收入46%
增值服务26%
培训与实施16%
其他12%

雷达图 · 迷你走势

SVG polygon / sparkline
服务能力评估
六维度打分 · 满分 100
本季度 上季度
响应速度 90 稳定性 75 可扩展 85 成本 60 易用性 70 文档 80
响应速度90
稳定性75
可扩展85
成本控制60
易用性70
文档完备80
综合评分76.7
迷你走势(表格内嵌)
指标近 12 期走势当前环比
订单量 24,891 +8.1%
退款率 0.82% −0.08pt
客单价 ¥ 296 +4.6%
获客成本 ¥ 42.6 −2.3%
大号走势卡
七日活跃用户
0
12.4%
09-2709-2910-0110-03