图表
零依赖纯 SVG/DOM 渲染（无 ECharts）：vbar / hbar / stack / donut / line / heatmap 贡献图 / sparkline / gauge 八种。完全按需——不 import 这两行，图表 JS/CSS 一个字节都不进你的包。
垂直柱状 · 每月投稿
水平条形 · 流量来源
堆叠条 · 任务进度
环形 · 工时分布
进度环 · 完成率
迷你趋势 · 近 14 天
折线 · 一周活跃
贡献图 · 近 26 周
<div class="chart-grid"> <div> <p class="chart-cap">垂直柱状 · 每月投稿</p> <div class="chart" id="chart-vbar"></div> </div> <div> <p class="chart-cap">水平条形 · 流量来源</p> <div class="chart" id="chart-hbar"></div> </div> <div> <p class="chart-cap">堆叠条 · 任务进度</p> <div class="chart" id="chart-stack"></div> </div> <div> <p class="chart-cap">环形 · 工时分布</p> <div class="chart" id="chart-donut"></div> </div> <div> <p class="chart-cap">进度环 · 完成率</p> <div class="chart" id="chart-gauge"></div> </div> <div> <p class="chart-cap">迷你趋势 · 近 14 天</p> <div class="chart" id="chart-spark"></div> </div> <div style="grid-column:1/-1"> <p class="chart-cap">折线 · 一周活跃</p> <div class="chart" id="chart-line"></div> </div> <div style="grid-column:1/-1"> <p class="chart-cap">贡献图 · 近 26 周</p> <div class="chart" id="chart-heatmap"></div> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/charts';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add charts
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/charts.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
// 按需导入：只有被引用的函数和这份 CSS 会进包，其余组件零成本import '@icen.ai/ui/components/charts.css';import { renderHeatmap, renderSparkline, renderGauge } from '@icen.ai/ui/behaviors/charts'; renderHeatmap(el, { values: 近180天数值数组, weeks: 26 }); // GitHub 式贡献图renderHeatmap(el, { data: [{ date: '2026-07-01', value: 5 }] }); // 或精确日期形态renderSparkline(el, { values: [3, 8, 5, 12, 9, 14, 11] }); // 迷你趋势线renderGauge(el, { value: 64, label: '完成率' }); // 进度环renderVBar(el, { labels: ['一月','二月'], values: [12, 19] }); // 另有 vbar/hbar/stack/donut/line