@visactor/taro-vchart 0.2.0-alpha.1 → 0.10.0-alpha.2

package/README.md

@@ -10,17 +10,15 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
 
 ## 支持环境
 
-目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web')。
+目前组件支持的环境有：**微信小程序**('weapp')，**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('web')，**h5 移动端**('h5')。
 
 以上环境通过 `type` 属性进行声明，`type` 属性值及对应环境如下：
 
+- `weapp` 微信小程序。
 - `tt` 字节小程序。
-
 - `lark` 飞书小程序。
-
-- `h5` 浏览器环境, 与`web`等价。
-
-- `web` 浏览器环境, 与`h5`等价。
+- `h5` h5 移动端环境。
+- `web` 浏览器环境。
 
 ### 跨端支持
 
@@ -40,22 +38,22 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
 
 ### 版本要求
 
-**字节小程序端**
+1. **字节小程序端**
 
-需要确保 **Taro 版本 >= 3.3.17**
+需要确保 **Taro 版本 >= 3.3.17** (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)
 
-> taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
+2. **飞书小程序端**
 
-**飞书小程序端**
-
-需要确保 **Taro 版本 >= 3.2.0**, **飞书版本 >= 3.45.0**
-
-> taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
+需要确保 **Taro 版本 >= 3.2.0**, **飞书版本 >= 3.45.0** (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)
 
 ## 安装
 
-```
-npm install @visactor/taro-vchart
+```bash
+# npm
+$ npm install @visactor/taro-vchart
+
+# yarn
+$ yarn add @visactor/taro-vchart
 ```
 
 ## API
@@ -63,34 +61,59 @@ npm install @visactor/taro-vchart
 图表组件使用示例如下：
 
 ```tsx
-<VCHart
+import VChart from '@visactor/taro-vchart';
+
+<VChart
   type="tt"
   spec={spec}
   canvasId="pie"
   style={{ height: '35vh', width: '100%' }}
   onChartInit={chart => {
-    console.log('init pie');
+    console.log('onChartInit');
   }}
   onChartReady={chart => {
-    console.log('ready pie');
+    console.log('onChartReady');
   }}
   onChartUpdate={chart => {
-    console.log('update pie');
+    console.log('onChartUpdate');
   }}
-/>
+/>;
 ```
 
-| API           | 类型     | 说明                                                                                                    |
-| ------------- | -------- | ------------------------------------------------------------------------------------------------------- |
-| type          | string   | 配置的环境，目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web') |
-| canvasId      | String   | 图表 id, 必确唯一                                                                                       |
-| spec          | Object   | 图表配置项, 请参考[VChart 配置项](todo)                                                                 |
-| style         | Object   | 图表容器样式                                                                                            |
-| events        | Object[] | 事件绑定配置                                                                                            |
-| options       | Object   | 初始化 VChart 实例传入的额外配置项，同 [VChart 实例化配置项](todo)                                      |
-| onChartInit   | Function | 图表初始化完后触发的回调                                                                                |
-| onChartReady  | Function | 图表渲染完毕后触发的回调                                                                                |
-| onChartUpdate | Function | 图表更新完毕后触发的回调                                                                                |
+| API           | 类型     | 说明                                                                                                                                                                    |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type          | String   | 配置的环境，目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('web')，**h5 移动端**('h5')，如果没有声明，则会通过 `Taro.getEnv()` 自动获取 |
+| canvasId      | String   | 图表 id, 必确唯一                                                                                                                                                       |
+| spec          | Object   | 图表配置项, 请参考[VChart 配置项](https://www.visactor.io/vchart/option/)                                                                                               |
+| style         | Object   | 图表容器样式                                                                                                                                                            |
+| events        | Object[] | 事件绑定配置，具体配置为定义[如下](#事件配置)                                                                                                                           |
+| options       | Object   | 初始化 VChart 实例传入的额外配置项，同 [VChart 实例化配置项](https://www.visactor.io/vchart/api/API/vchart#options)                                                     |
+| onChartInit   | Function | 图表初始化完后触发的回调                                                                                                                                                |
+| onChartReady  | Function | 图表渲染完毕后触发的回调                                                                                                                                                |
+| onChartUpdate | Function | 图表更新完毕后触发的回调                                                                                                                                                |
+
+### 事件配置
+
+```ts
+interface IEvent {
+  /**
+   * 事件的名称
+   */
+  type: EventType;
+  /**
+   * 事件 API 中的事件筛选配置
+   */
+  query?: EventQuery;
+  /**
+   * 事件监听函数
+   */
+  handler: EventCallback<EventParams>;
+}
+```
+
+- `type` 代表事件名称，支持的值详见：[事件分类](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E5%88%86%E7%B1%BB)
+- `query` 事件 API 中的事件筛选配置，使用详见：[事件过滤](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E8%BF%87%E6%BB%A4)
+- `handler` 即事件监听函数，函数的参数类型详见：[事件参数](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E5%8F%82%E6%95%B0)
 
 ## 快速上手
 
@@ -173,21 +196,16 @@ export function Pie() {
 
 图表内部, 监听了 `spec` 的变化. 当 spec 变化时, 则会基于新的 `spec` 更新图表。
 
-此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作。
-
-> 可以通过 `onChartInit` 接口, 获取到 VChart 实例.
-
-#### API
+此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作（可以通过 `onChartInit` 接口, 获取到 VChart 实例）。
 
-- `chartInstance.renderAsync()` 更新图表
+下面是 VChart 实例上提供的较常用的 API：
 
+- `chartInstance.renderAsync()` 渲染图表
 - `chartInstance.release()` 销毁图表
-
 - `chartInstance.updateSpec()` 基于 Spec 更新图表
-
 - `chartInstance.updateData()` 基于数据更新图表
 
-详细使用方法请参考:[VChart API](todo)
+详细使用方法请参考:[VChart API](https://www.visactor.io/vchart/api/API/vchart)
 
 #### 示例
 
@@ -293,3 +311,19 @@ export function Pie() {
   );
 }
 ```
+
+## 如何开发
+
+```bash
+# 因为 taro-vchart 依赖 vchart 的编译结果，所以先要运行如下命令
+$ rush run -p @visactor/vchart -s build:es5
+
+# 运行 lark 小程序
+$ rush run -p @visactor/taro-vchart -s dev:lark
+
+
+# 运行微信小程序
+$ rush run -p @visactor/taro-vchart -s dev:wx
+```
+
+然后使用飞书开发者工具导入 `packages/taro-vchart/dist/lark` 或者 `packages/taro-vchart/dist/weapp` 目录即可。

package/lib/src/components/general-chart/index.d.ts

@@ -1,15 +1,20 @@
 import React from 'react';
 import { TTCanvas } from '../../utils';
-import { IChartProps, IDomRef } from '../../typings';
-export declare class GeneralChart extends React.Component<IChartProps> {
+import { IChartProps, IDomRef, RenderMode } from '../../typings';
+export interface GeneralChartProps extends IChartProps {
+    /**
+     * vchart 的环境参数
+     */
+    mode?: RenderMode;
+}
+export declare class GeneralChart extends React.Component<GeneralChartProps> {
     ttCanvas: TTCanvas;
-    constructor(props: IChartProps);
     componentDidMount(): Promise<void>;
-    componentDidUpdate(prevProps: IChartProps): void;
+    componentDidUpdate(prevProps: GeneralChartProps): void;
     componentWillUnmount(): void;
     init({ domref, dpr }: {
         domref: IDomRef;
         dpr: number;
-    }): void;
+    }): Promise<void>;
     render(): React.JSX.Element;
 }

package/lib/src/components/web-chart/index.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
-import { IChartProps } from '../../typings';
-export declare class WebChart extends React.Component<IChartProps> {
+import { IChartProps, RenderMode } from '../../typings';
+export interface WebChartProps extends IChartProps {
+    /**
+     * vchart 的环境参数
+     */
+    mode?: RenderMode;
+}
+export declare class WebChart extends React.Component<WebChartProps> {
     private vchart;
     constructor(props: IChartProps);
     componentDidMount(): void;

package/lib/src/index.d.ts

@@ -4,6 +4,7 @@ interface IVChartProps extends IChartProps {
      * 配置环境。如果没有声明，则会通过 `Taro.getEnv()` 自动获取。
      * - `tt` 字节小程序。
      * - `lark` 飞书小程序。
+     * - `weapp` 微信小程序
      * - `h5` 浏览器环境, 与`web`等价。
      * - `web` 浏览器环境, 与`h5`等价。
      */

package/lib/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import VChart$1 from '@visactor/vchart/build';
+import VChart$1, { vglobal, registerLarkEnv, registerWXEnv } from '@visactor/vchart/build/es5';
 import { View, Canvas } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
@@ -45,8 +45,8 @@ class WebChart extends React.Component {
         super(props);
     }
     componentDidMount() {
-        const { onChartInit, onChartReady } = this.props;
-        this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}` }, this.props.options));
+        const { onChartInit, onChartReady, mode } = this.props;
+        this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}`, mode }, this.props.options));
         onChartInit && onChartInit(this.vchart);
         this.vchart
             .renderAsync()
@@ -77,6 +77,7 @@ class WebChart extends React.Component {
     }
 }
 
+// @ts-ignore
 class TTCanvas {
     constructor(props) {
         const { dpr, events, spec, options, domref, mode, onChartInit, onChartReady, onChartUpdate } = props;
@@ -107,7 +108,7 @@ class TTCanvas {
                 force: true,
                 canvasIdLists: [`${domref.id}_draw_canvas`, `${domref.id}_tooltip_canvas`, `${domref.id}_hidden_canvas`],
                 tooltipCanvasId: `${domref.id}_tooltip_canvas`,
-                freeCanvasIdx: 1 // 自由 canvas 索引
+                freeCanvasIdx: 2 // 自由 canvas 索引
             }, dpr: this.dpr, renderCanvas: `${domref.id}_draw_canvas` }, this.options));
         this.onChartInit && this.onChartInit(this.chartInstance);
         // events
@@ -173,9 +174,6 @@ const style_container = {
 };
 
 class GeneralChart extends React.Component {
-    constructor(props) {
-        super(props);
-    }
     componentDidMount() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.props.spec || !this.props.canvasId) {
@@ -241,35 +239,46 @@ class GeneralChart extends React.Component {
         this.ttCanvas && this.ttCanvas.release();
     }
     init({ domref, dpr = 2 }) {
-        if (!domref) {
-            console.error(`未找到 #${this.props.canvasId} 组件`);
-            return;
-        }
-        domref.id = this.props.canvasId;
-        this.ttCanvas = new TTCanvas({
-            dpr: dpr,
-            domref,
-            spec: this.props.spec,
-            events: this.props.events,
-            options: this.props.options,
-            onChartInit: (chart) => {
-                var _a;
-                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
-            },
-            onChartReady: (chart) => {
-                var _a;
-                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
-            },
-            onChartUpdate: (chart) => {
-                var _a;
-                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!domref) {
+                console.error(`未找到 #${this.props.canvasId} 组件`);
+                return;
             }
+            if (this.props.mode === 'wx') {
+                // 微信小程序环境特殊处理
+                const canvasIdLists = [
+                    `${this.props.canvasId}_draw_canvas`,
+                    `${this.props.canvasId}_tooltip_canvas`,
+                    `${this.props.canvasId}_hidden_canvas`
+                ];
+                yield vglobal.setEnv('wx', { domref, force: true, canvasIdLists, freeCanvasIdx: 2, component: undefined });
+            }
+            domref.id = this.props.canvasId;
+            this.ttCanvas = new TTCanvas({
+                dpr: dpr,
+                domref,
+                spec: this.props.spec,
+                events: this.props.events,
+                options: this.props.options,
+                mode: this.props.mode,
+                onChartInit: (chart) => {
+                    var _a;
+                    ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
+                },
+                onChartReady: (chart) => {
+                    var _a;
+                    ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
+                },
+                onChartUpdate: (chart) => {
+                    var _a;
+                    ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
+                }
+            });
         });
     }
     render() {
         const handleEvent = (event) => {
-            const id = event.target.id.split('_')[0];
-            if (id === this.props.canvasId && this.ttCanvas.chartInstance) {
+            if (this.ttCanvas && this.ttCanvas.chartInstance) {
                 const chartInstance = this.ttCanvas.chartInstance;
                 Object.defineProperty(event, 'target', {
                     writable: false,
@@ -280,27 +289,33 @@ class GeneralChart extends React.Component {
         };
         const { canvasId, style = {} } = this.props;
         return (React.createElement(View, { key: canvasId, style: Object.assign(Object.assign(Object.assign({}, style_container), style), { padding: 0 }) },
-            React.createElement(Canvas, { style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
-            React.createElement(Canvas, { onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
-            React.createElement(Canvas, { style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
+            React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
+            React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
+            React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
     }
 }
 
 function VChart(_a) {
     var { type } = _a, args = __rest(_a, ["type"]);
-    const env = type ? type.toLocaleLowerCase() : Taro.getEnv();
+    const env = (type !== null && type !== void 0 ? type : Taro.getEnv()).toLocaleLowerCase();
     const strategies = {
         lark: () => {
-            return React.createElement(GeneralChart, Object.assign({}, args));
+            registerLarkEnv();
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
         },
         tt: () => {
-            return React.createElement(GeneralChart, Object.assign({}, args));
+            registerLarkEnv();
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
+        },
+        weapp: () => {
+            registerWXEnv();
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "wx" }));
         },
         web: () => {
             return React.createElement(WebChart, Object.assign({}, args));
         },
         h5: () => {
-            return React.createElement(WebChart, Object.assign({}, args));
+            return React.createElement(WebChart, Object.assign({}, args, { mode: "mobile-browser" }));
         }
     };
     if (env && strategies[env] !== undefined) {

package/lib/src/typings/IVChart.d.ts

@@ -1,2 +1,2 @@
-import { IVChart, ISpec } from '@visactor/vchart';
-export { IVChart, ISpec };
+import { IVChart, ISpec, RenderMode } from '@visactor/vchart';
+export { IVChart, ISpec, RenderMode };

package/lib/src/typings/VChartEnvType.d.ts

@@ -1,8 +1,10 @@
 type tt = 'tt';
 type lark = 'lark';
 type web = 'web' | 'h5';
+type weapp = 'weapp';
 type TT = 'TT';
 type LARK = 'LARK';
 type WEB = 'WEB' | 'H5';
-export type VChartEnvType = tt | lark | web | TT | LARK | WEB;
+type WEAPP = 'WEAPP';
+export type VChartEnvType = tt | lark | weapp | web | TT | LARK | WEB | WEAPP;
 export {};

package/lib/src/typings/index.d.ts

@@ -1,5 +1,5 @@
 export { IChartProps } from './IChartProps';
-export { IVChart } from './IVChart';
+export { IVChart, RenderMode } from './IVChart';
 export { IEvent } from './IEvent';
 export { IOptions } from './IOptions';
 export { IDomRef } from './IDomRef';

package/package.json

@@ -1,22 +1,12 @@
 {
   "name": "@visactor/taro-vchart",
-  "version": "0.2.0-alpha.1",
+  "version": "0.10.0-alpha.2",
   "description": "Taro VChart 图表组件",
   "sideEffects": false,
-  "type": "module",
   "main": "lib/src/index.js",
   "files": [
     "lib"
   ],
-  "scripts": {
-    "build": "rm -rf lib && rollup -c",
-    "build:tt": "taro build --type tt",
-    "build:lark": "taro build --type lark",
-    "build:h5": "taro build --type h5",
-    "dev:tt": "npm run build:tt -- --watch",
-    "dev:lark": "npm run build:lark -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch"
-  },
   "keywords": [
     "taro",
     "charts",
@@ -28,7 +18,7 @@
     "graphics",
     "interaction"
   ],
-  "homepage": "",
+  "homepage": "https://www.visactor.io/vchart",
   "bugs": "https://github.com/VisActor/VChart/issues",
   "repository": {
     "type": "git",
@@ -37,16 +27,13 @@
   },
   "author": {
     "name": "VisActor",
-    "url": "https://VisActor.io/"
+    "url": "https://www.visactor.io/"
   },
   "license": "MIT",
   "dependencies": {
-    "@visactor/vchart": "workspace:1.1.0-beta.1"
+    "@visactor/vchart": "0.10.0-alpha.2"
   },
   "devDependencies": {
-    "@internal/bundler": "workspace:*",
-    "@internal/eslint-config": "workspace:*",
-    "@internal/ts-config": "workspace:*",
     "@rushstack/eslint-patch": "~1.1.4",
     "@vitejs/plugin-react": "3.1.0",
     "eslint": "~8.18.0",
@@ -83,10 +70,23 @@
     "rollup": "3.20.5",
     "rollup-plugin-import-css": "^3.0.2",
     "stylelint": "9.3.0",
-    "tslib": "2.3.1"
+    "tslib": "2.3.1",
+    "@internal/eslint-config": "0.0.1",
+    "@internal/ts-config": "0.0.1"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rm -rf lib && rollup -c --bundleConfigAsCjs",
+    "build:tt": "taro build --type tt",
+    "build:lark": "taro build --type lark",
+    "build:h5": "taro build --type h5",
+    "build:wx": "taro build --type weapp",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:lark": "npm run build:lark -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:wx": "npm run build:wx -- --watch"
   }
-}
+}