Compatibility with Host Environment

The Taro framework, based on the React technology stack, provides cross-platform component development capabilities (https://taro-docs.jd.com/docs/component). A Taro component consists of the following files:

• index.config.ts: Component compilation configuration (optional)

• index.tsx: Component logic and template content

• index.module.scss: Component styles (CSS Modules scheme recommended)

File Description

• index.tsx

Main component file, includes:

• Define the component using function Component() { ... } or class Component extends Component { ... }

• Write component structure using JSX template syntax

• Export the component through export default

• Component lifecycle management (using Hooks or Class lifecycle)

• Event handling (following React synthetic event specifications)

• index.module.scss

Component style file:

• Supports Sass/Scss preprocessing

• Use CSS Modules to avoid style pollution

• Import using import styles from './index.module.scss'

• Bind styles using className={styles.container}

• index.config.ts (optional)

Component compilation configuration:

• Define component name: defineCustomComponent({ name: 'my-component' })

• Set default values for component properties

• Configure native mini-program components needed by the component

• Cross-platform compatibility configuration

1. Core Entry Module

index.tsx is the entry file of the entire library, exporting two core components VChart and VChartSimple:

import { VChartSimple } from './simple';
import { VChart } from './vchart';

export * from './charts';  // 导出所有图表组件
export { VChart, VChartSimple };  // 导出核心适配器
export default VChart;  // 默认导出    

Three-layer export strategy is implemented here:

• Chart component set: Export all predefined charts in bulk through export *

• Core adapters: Individually export the two main components, VChart and VChartSimple

• Default export: Maintain compatibility with the original VChart API

2. Environment Adaptation Layer

2.1 VChart Component

vchart.tsx is the main environment adaptation component, which will choose the appropriate rendering strategy based on the current environment:

const strategies = {
  lark: () => <GeneralChart mode="miniApp"/>,
  tt: () => <GeneralChart mode="tt"/>,
  weapp: () => <GeneralChart mode="wx"/>,
  web: () => <WebChart />,
  h5: () => <WebChart mode="mobile-browser"/>
};    

Key Design Points:

• Use strategy pattern to handle different environments

• Automatically register environment-specific configurations (such as registerLarkEnv)

• Pass in specific mode parameters to adapt to different mini-program platforms

2.2 VChartSimple Component

simple.tsx is a simplified version of VChart, without environment registration logic:

export function VChartSimple({ type, ...args }: IVChartProps) {
  const env = (type ?? Taro.getEnv()).toLocaleLowerCase();
  const strategies = {
    lark: () => <GeneralChart {...args} mode="miniApp" />,
    tt: () => <GeneralChart {...args} mode="tt" />,
    // ...其他环境
  };
  
  // 环境选择逻辑
}    

This component is used for on-demand loading scenarios to reduce package size.\r\n\r\n## Chart Factory System\r\n\r\ncharts/generate-charts.tsx implements the factory pattern for chart components, providing:\r\n\r\n* Unified component creation process\r\n\r\n* Automatic registration of chart dependency modules\r\n\r\n* Type safety (through generic constraints)\r\n\r\nUsing the factory pattern to uniformly generate chart components (such as BoxPlotChart), which includes all available chart type components. Each chart is created through the createChart method, standardizing parameters:\r\n\r

export const Chart = createChart<ISpec>(
  'ChartName',
  { chartConstructor: VChart }, // 核心图表构造器
  [registerModules] // 按需注册的图表模块
);    

Rendering Component Layer

After configuring the corresponding charts, we enter the rendering component layer, which includes a general chart component and a browser chart component. Their functions are the same, mainly to cater to different platforms. A brief flowchart is as follows:

General Chart Component

components/general-chart/index.tsx is the core rendering component in the mini program environment, with the following key technical points:

• Asynchronous DOM acquisition mechanism (solving Feishu mini program issues)

• Three-canvas rendering architecture (main canvas, interactive canvas, auxiliary canvas)

• Event delegation and redirection

• Environment-specific configuration

Web Chart Component

components/web-chart/index.tsx is the rendering component for the browser environment, with the main differences from the mini program component:

• Single container rendering (vs. three-canvas structure)

• Synchronous DOM acquisition (vs. asynchronous loop attempts)

• Direct event binding (vs. event delegation)

Chart Control Layer

utils/tt-canvas/index.ts is the controller for chart instances, TTCanvas is responsible for managing VChart instances, receiving props passed by GeneralChart, and achieving seamless integration of chart capabilities in the mini program ecosystem through abstract general interfaces.

The core responsibilities of TTCanvas:

• Lifecycle management (creation, rendering, updating, releasing)

• Cross-end parameter bridging (converting mini program parameters to VChart usable format)

• Event system adaptation (binding custom events)

• Rendering strategy control (environment-specific configuration)

This document was revised and organized by the following person

玄魂