概览
taro-vchart 是 VChart 的Taro小程序封装版本，提供了在Taro环境下的 VChart React版本的封装。
- 关于更多taro小程序的宿主环境介绍，请参见官方文档：https://docs.taro.zone/docs/
核心代码结构
taro-vchart 的目录和架构相对应：
- 图表工厂层：
charts目录
采用工厂模式统一生成图表组件（如 BoxPlotChart ），其中包含所有可用的图表类型组件，每个图表通过 createChart 方法创建，标准化参数：
export const Chart = createChart<ISpec>( 'ChartName', { chartConstructor: VChart }, // 核心图表构造器 [registerModules] // 按需注册的图表模块 );
-
跨端适配层：
components目录实现跨端渲染核心逻辑其中包含一个通用图表组件和一个浏览器图表组件，其功能一致，主要是应对不同的平台 -
通用图表组件
general-chart/index.tsx
export class GeneralChart extends React.Component<GeneralChartProps> {
// 小程序专用生命周期
async componentDidMount() {
// 通过循环最多尝试100次获取DOM节点（解决飞书小程序异步问题）
for (let i = 0; i < MAX_TIMES; i++) {
const domref = await getDomRef();
this.init({ domref });
}
}
// 小程序专用渲染结构
render() {
return (
<View>
<Canvas id="tooltip"/> {/* 交互事件画布 */}
<Canvas id="draw"/> {/* 主渲染画布 */}
<Canvas id="hidden"/> {/* 辅助画布 */}
</View>
)
}
}
- 浏览器图表组件
web-chart/index.tsx
export class WebChart extends React.Component<WebChartProps> {
// 标准浏览器生命周期
componentDidMount() {
this.vchart = new chartConstructor(spec, {
dom: canvasId // 直接使用DOM容器
});
}
// 简单DOM结构
render() {
return <div id={canvasId}/> // 单容器方案
}
}
跨端适配架构如下图所示：
Taro是一个框架，其可以运行在各种小程序环境中，使用GeneralChart的时候，可以传入不同的环境来适配：
const strategies = {
lark: () => <GeneralChart mode="miniApp"/>,
tt: () => <GeneralChart mode="tt"/>,
weapp: () => <GeneralChart mode="wx"/>,
web: () => <WebChart />,
h5: () => <WebChart mode="mobile-browser"/>
};
TTCanvas负责具体对VChart实例的管理，接收GeneralChart传入的props，通过抽象通用接口实现了图表能力在小程序生态的无缝接入。
在接下来的章节，我们将详细的分析WX-VChart组件的封装。