指南

快速上手

安装

One Chart 是独立的 npm 包，peer 依赖 @geektech/tsone：

bun add @geektech/tsone @geektech/one-chart

第一个图表

创建一个组件实例，传入数据并挂载到 DOM 节点。图表会渲染为一个 <svg> 元素，宽高可通过 props 配置，默认自适应内容。

import { OneBarChart } from '@geektech/one-chart';

// 分组柱状图
const chart = new OneBarChart({
  title: '季度销量',
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { name: '华东', data: [120, 200, 150, 280] },
    { name: '华南', data: [80, 110, 130, 160] },
  ],
  showValues: true,
});
chart.mount(document.querySelector('#app')!);

// 横向模式：分类放到 Y 轴，适合分类名较长的场景
const horizontal = new OneBarChart({
  title: '季度销量（横向）',
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { name: '华东', data: [120, 200, 150, 280] },
    { name: '华南', data: [80, 110, 130, 160] },
  ],
  horizontal: true,
});
horizontal.mount(document.querySelector('#app2')!);

import { OneBarChart } from '@geektech/one-chart';

const chart = new OneBarChart({
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [{ name: '华东', data: [120, 200, 150, 280] }],
});
chart.mount(document.querySelector('#app')!);

响应式更新

图表组件继承自 TSone 的 Component：调用 setProps 或修改 state 后，图表的 SVG 节点会在下一次渲染中自动更新（由 TSone 响应式调度器批处理）。

chart.setProps({
  categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
  series: [{ name: '华东', data: [1, 2, 3, 4, 5] }],
});

动画

动画默认开启，基于原生 SVG SMIL 实现（无需逐帧 JS）：首次挂载时图形从起点形态生长出现，数据变更时从旧几何平滑过渡到新几何，容器尺寸（width / height）变化时 SVG 根节点同步缩放。传 animation: false 完全关闭，或传入 { duration: 800, easing: 'easeInOut' } 调节时长与缓动；初始化 / 数据变更 / 容器大小变更三类动画可分别用 init / update / resize 开关。系统启用「减少动态效果」时动画自动关闭。

通用属性

所有图表共享以下基础属性：