T1TransOneGitHub

跨端集成

各端支持状态、小程序端静态编译约束与原生 App 接入路径。

支持矩阵

平台支持说明
Web✅HTMLCanvasElement.getContext('2d') 直接满足 ICanvas2D。
微信小程序✅<canvas type="2d"> + SelectorQuery 节点；CLI 已内置 canvas 标签映射。
阿里小程序✅同一适配层（安全取全局 my / tt / wx）。
字节小程序✅同上。
iOS / Android / 鸿蒙 App🔜 契约就绪实现 ICanvas2D（约 20 个方法）即可接入。

小程序端 DPR 通过各端getSystemInfoSync()获取，像素比自动适配，无需手工处理。

自动重绘

TcChart 内置尺寸变化自动重绘，防抖窗口150ms（连续触发只重绘一次），策略按端区分：

平台监听方式重绘策略
WebResizeObserver 观察 canvas（CSS 宽高 100%，容器变化即触发）重测 clientWidth/Height 与 DPR → 更新 canvas 物理缓冲 → chart.resize().render() 增量重绘
小程序各端窗口尺寸回调（onWindowResize，横竖屏 / 分屏等场景）重新解析节点尺寸 → 重建图表渲染

小程序端约束

transone-cli 对小程序端模板 / 组件有静态编译约束，TcChart 已按其适配，使用方注意三点：

  1. option 放在 initState() 返回对象中（经 data 序列化 + wx:for 数据绑定传给组件）；不要在 render() 里引用模块级常量对象——静态常量会被折叠为字符串属性，对象 props 会丢失。示例见 playground/chart-demo/src/pages/home.ts 的 charts 数组写法。
  2. initState() 内只支持 const 声明与 return（需静态求值）；render() 内不支持调用自定义辅助方法（用 each(...) 展开），each 的 key 仅支持 (item) => item.xxx 或 (item, index) => index。
  3. 小程序端 props 无法传函数（如 option.format），需要函数时请在端内判断分支。
typescript
// playground/chart-demo/src/pages/home.ts 的推荐写法
interface ChartDemoState { charts: ChartOption[] }

class ChartDemoPage extends Component<Record<string, never>, ChartDemoState> {
  protected initState(): ChartDemoState {
    return { charts: [lineOption, barOption, pieOption, radarOption] };
  }
  protected render(): VNode {
    return h('div', { className: 'chart-demo' }, [
      each(this.state.charts, (option) =>
        h('div', { className: 'chart-demo__card' }, [
          createComponent({ component: TcChart, props: { option } }),
        ])
      ),
    ]);
  }
}

原生 App 接入路径

  1. 宿主提供原生 canvas 能力（Skia / ArkUI Canvas / 原生桥），把原生绘制 API 实现为 ICanvas2D 契约。
  2. 实现 NativeCanvasHost（width / height / pixelRatio / getContext('2d')），调用 resolveNativeCanvas(host)。
  3. 之后引擎与四种图表零改动运行。
扩展点
适配器在 lib/adapters/ 下按端拆分：web.ts、miniprogram.ts、native.ts；新增端不改动 core 与 charts。