@visactor/taro-vchart 1.5.3 → 1.5.4

package/README.md

@@ -10,10 +10,11 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
 
 ## 支持环境
 
-目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web')。
+目前组件支持的环境有：**微信小程序**('weapp')，**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web')。
 
 以上环境通过 `type` 属性进行声明，`type` 属性值及对应环境如下：
 
+- `weapp` 微信小程序。
 - `tt` 字节小程序。
 - `lark` 飞书小程序。
 - `h5` 浏览器环境, 与`web`等价。
@@ -319,6 +320,10 @@ $ 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/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/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/es5';
+import VChart$1, { vglobal } from '@visactor/vchart/build/es5';
 import { View, Canvas } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
@@ -174,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) {
@@ -242,34 +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) => {
-            if (this.ttCanvas.chartInstance) {
+            if (this.ttCanvas && this.ttCanvas.chartInstance) {
                 const chartInstance = this.ttCanvas.chartInstance;
                 Object.defineProperty(event, 'target', {
                     writable: false,
@@ -280,21 +289,24 @@ 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));
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
         },
         tt: () => {
-            return React.createElement(GeneralChart, Object.assign({}, args));
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
+        },
+        weapp: () => {
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "wx" }));
         },
         web: () => {
             return React.createElement(WebChart, Object.assign({}, args));

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,6 +1,6 @@
 {
   "name": "@visactor/taro-vchart",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "Taro VChart 图表组件",
   "sideEffects": false,
   "main": "lib/src/index.js",
@@ -31,7 +31,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@visactor/vchart": "1.5.3"
+    "@visactor/vchart": "1.5.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.1.4",
@@ -83,8 +83,10 @@
     "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:h5": "npm run build:h5 -- --watch",
+    "dev:wx": "npm run build:wx -- --watch"
   }
 }