图表

charts

与 behaviors/charts 配套：vbar / hbar / stack / donut / line 五种，DOM 全部由 behavior 渲染。

示例

垂直柱状 · 每月投稿

水平条形 · 流量来源

堆叠条 · 任务进度

环形 · 工时分布

折线 · 一周活跃

<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 style="grid-column:1/-1">
    <p class="chart-cap">折线 · 一周活跃</p>
    <div class="chart" id="chart-line"></div>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/charts.css';

用法

import { renderVBar, renderHBar, renderStack, renderDonut, renderLine } from '@icen.ai/ui/behaviors/charts';
renderVBar(el,  { labels: ['一月','二月','三月','四月','五月','六月'], values: [12,19,8,24,16,28] });
renderHBar(el,  { labels: ['搜索','推荐','分享','直接访问'], values: [320,240,160,80], tone: 'success' });
renderStack(el, { segments: [{label:'已完成',value:45,tone:'success'},{label:'进行中',value:30},{label:'待处理',value:25,tone:'warning'}] });
renderDonut(el, { segments: [{label:'研发',value:48},{label:'设计',value:32,tone:'success'},{label:'测试',value:20,tone:'warning'}] });
renderLine(el,  { labels: ['周一','周二','周三','周四','周五','周六','周日'], values: [8,14,9,18,22,16,25] });