快速开始

安装 transone-chart，用 TcChart 组件或引擎直用渲染第一张图表。

安装

transone-chart 是 monorepo 内的独立 workspace 包，peer 依赖transone >= 0.3.0（仅组件集成 TcChart 需要）：

bash

bun add transone-chart

方式一：TcChart 声明式组件（推荐）

与 transone 组件系统集成：option由父级传入（完全受控），数据变化自动setOption + render，组件卸载自动销毁：

typescript

import { Component, createComponent } from 'transone';
import { TcChart } from 'transone-chart';

const option = {
  type: 'line',
  title: { text: '城市指数趋势' },
  xAxis: { labels: ['4月', '5月', '6月', '7月', '8月', '9月'] },
  series: [
    { name: '北京', data: [82, 85, 84, 88, 90, 92], smooth: true },
    { name: '上海', data: [80, 83, 86, 85, 89, 91], smooth: true, area: true },
  ],
};

class MyPage extends Component {
  render() {
    return createComponent({ component: TcChart, props: { option } });
  }
}

画布尺寸

canvas 由组件渲染（<canvas type="2d">），外层容器需给高度，如 260px。Web 端直接渲染，小程序端经 SelectorQuery 自动取节点。

自动重绘

容器 / 窗口宽度变化时组件自动重绘（防抖 150ms）：Web 端 ResizeObserver 监听后增量resize + render，小程序端窗口尺寸回调触发后重建；图表始终铺满容器宽度，无需手动调用。

示例：折线图（上面配置的实际渲染）

series[].smooth 开启平滑曲线（三次贝塞尔插值）；series[].area 开启面积填充（globalAlpha 0.15）。

方式二：引擎直用（无框架场景）

不依赖 transone 组件系统时，直接用工厂入口：

typescript

import { createWebChart, createMiniProgramChart } from 'transone-chart';

// Web：HTMLCanvasElement
const chart = createWebChart(canvasElement, option);
chart.render();

// 小程序：Canvas 2D 节点
const chart2 = createMiniProgramChart(canvasNode, option);
chart2.render();

// 高级：自定义渲染上下文（如原生桥层实现 ICanvas2D 后）
import { createChart } from 'transone-chart';
const chart3 = createChart(context, option); // context 为 ChartRenderContext
chart3.render();

Demo 项目

仓库内playground/chart-demo用城市指数场景数据演示五种图表（折线 / 堆叠柱 / 横向柱 / 环形饼 / 雷达），四端构建命令：

bash

bun run build:web          # H5
bun run build:weixin      # 微信小程序
bun run build:alipay      # 阿里小程序
bun run build:bytedance   # 字节小程序

下一步

图表总览：四种图表组件入口。
架构：ICanvas2D 契约与原生 App 扩展指南。
跨端集成：小程序端约束与各端支持状态。