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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +51 -37
  2. package/lib/src/index.js +1 -0
  3. package/package.json +3 -5
package/README.md CHANGED
@@ -15,11 +15,8 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
15
15
  以上环境通过 `type` 属性进行声明，`type` 属性值及对应环境如下：
16
16
 
17
17
  - `tt` 字节小程序。
18
-
19
18
  - `lark` 飞书小程序。
20
-
21
19
  - `h5` 浏览器环境, 与`web`等价。
22
-
23
20
  - `web` 浏览器环境, 与`h5`等价。
24
21
 
25
22
  ### 跨端支持
@@ -40,22 +37,22 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
40
37
 
41
38
  ### 版本要求
42
39
 
43
- **字节小程序端**
44
-
45
- 需要确保 **Taro 版本 >= 3.3.17**
46
-
47
- > taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
40
+ 1. **字节小程序端**
48
41
 
49
- **飞书小程序端**
42
+ 需要确保 **Taro 版本 >= 3.3.17** (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)
50
43
 
51
- 需要确保 **Taro 版本 >= 3.2.0**, **飞书版本 >= 3.45.0**
44
+ 2. **飞书小程序端**
52
45
 
53
- > taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
46
+ 需要确保 **Taro 版本 >= 3.2.0**, **飞书版本 >= 3.45.0** (taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本)
54
47
 
55
48
  ## 安装
56
49
 
57
- ```
58
- npm install @visactor/taro-vchart
50
+ ```bash
51
+ # npm
52
+ $ npm install @visactor/taro-vchart
53
+
54
+ # yarn
55
+ $ yarn add @visactor/taro-vchart
59
56
  ```
60
57
 
61
58
  ## API
@@ -63,34 +60,56 @@ npm install @visactor/taro-vchart
63
60
  图表组件使用示例如下：
64
61
 
65
62
  ```tsx
66
- <VCHart
63
+ import VChart from '@visactor/taro-vchart';
64
+
65
+ <VChart
67
66
  type="tt"
68
67
  spec={spec}
69
68
  canvasId="pie"
70
69
  style={{ height: '35vh', width: '100%' }}
71
70
  onChartInit={chart => {
72
- console.log('init pie');
71
+ console.log('onChartInit');
73
72
  }}
74
73
  onChartReady={chart => {
75
- console.log('ready pie');
74
+ console.log('onChartReady');
76
75
  }}
77
76
  onChartUpdate={chart => {
78
- console.log('update pie');
77
+ console.log('onChartUpdate');
79
78
  }}
80
- />
79
+ />;
80
+ ```
81
+
82
+ | API | 类型 | 说明 |
83
+ | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
84
+ | type | String | 配置的环境，目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web') ，如果没有声明，则会通过 `Taro.getEnv()` 自动获取 |
85
+ | canvasId | String | 图表 id, 必确唯一 |
86
+ | spec | Object | 图表配置项, 请参考[VChart 配置项](todo) |
87
+ | style | Object | 图表容器样式 |
88
+ | events | Object[] | 事件绑定配置，具体配置为定义[如下](#) |
89
+ | options | Object | 初始化 VChart 实例传入的额外配置项，同 [VChart 实例化配置项](todo) |
90
+ | onChartInit | Function | 图表初始化完后触发的回调 |
91
+ | onChartReady | Function | 图表渲染完毕后触发的回调 |
92
+ | onChartUpdate | Function | 图表更新完毕后触发的回调 |
93
+
94
+ ### 事件配置
95
+
96
+ ```ts
97
+ interface IEvent {
98
+ /**
99
+ * 事件的名称
100
+ */
101
+ type: EventType;
102
+ /**
103
+ * 事件 API 中的事件筛选配置
104
+ */
105
+ query?: EventQuery;
106
+ handler: EventCallback<EventParams>;
107
+ }
81
108
  ```
82
109
 
83
- | API | 类型 | 说明 |
84
- | ------------- | -------- | ------------------------------------------------------------------------------------------------------- |
85
- | type | string | 配置的环境，目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web') |
86
- | canvasId | String | 图表 id, 必确唯一 |
87
- | spec | Object | 图表配置项, 请参考[VChart 配置项](todo) |
88
- | style | Object | 图表容器样式 |
89
- | events | Object[] | 事件绑定配置 |
90
- | options | Object | 初始化 VChart 实例传入的额外配置项，同 [VChart 实例化配置项](todo) |
91
- | onChartInit | Function | 图表初始化完后触发的回调 |
92
- | onChartReady | Function | 图表渲染完毕后触发的回调 |
93
- | onChartUpdate | Function | 图表更新完毕后触发的回调 |
110
+ - `type` 代表事件名称，支持的值详见：[事件分类](todo)
111
+ - `query` 事件 API 中的事件筛选配置，使用详见：[事件过滤](todo)
112
+ - `handler` 即事件监听函数，函数的参数类型详见：[事件参数](todo)
94
113
 
95
114
  ## 快速上手
96
115
 
@@ -173,18 +192,13 @@ export function Pie() {
173
192
 
174
193
  图表内部, 监听了 `spec` 的变化. 当 spec 变化时, 则会基于新的 `spec` 更新图表。
175
194
 
176
- 此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作。
177
-
178
- > 可以通过 `onChartInit` 接口, 获取到 VChart 实例.
179
-
180
- #### API
195
+ 此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作（可以通过 `onChartInit` 接口, 获取到 VChart 实例）。
181
196
 
182
- - `chartInstance.renderAsync()` 更新图表
197
+ 下面是 VChart 实例上提供的较常用的 API：
183
198
 
199
+ - `chartInstance.renderAsync()` 渲染图表
184
200
  - `chartInstance.release()` 销毁图表
185
-
186
201
  - `chartInstance.updateSpec()` 基于 Spec 更新图表
187
-
188
202
  - `chartInstance.updateData()` 基于数据更新图表
189
203
 
190
204
  详细使用方法请参考:[VChart API](todo)
package/lib/src/index.js CHANGED
@@ -77,6 +77,7 @@ class WebChart extends React.Component {
77
77
  }
78
78
  }
79
79
 
80
+ // @ts-ignore
80
81
  class TTCanvas {
81
82
  constructor(props) {
82
83
  const { dpr, events, spec, options, domref, mode, onChartInit, onChartReady, onChartUpdate } = props;
package/package.json CHANGED
@@ -1,15 +1,14 @@
1
1
  {
2
2
  "name": "@visactor/taro-vchart",
3
- "version": "0.2.0-alpha.1",
3
+ "version": "0.2.0-alpha.2",
4
4
  "description": "Taro VChart 图表组件",
5
5
  "sideEffects": false,
6
- "type": "module",
7
6
  "main": "lib/src/index.js",
8
7
  "files": [
9
8
  "lib"
10
9
  ],
11
10
  "scripts": {
12
- "build": "rm -rf lib && rollup -c",
11
+ "build": "rm -rf lib && rollup -c --bundleConfigAsCjs",
13
12
  "build:tt": "taro build --type tt",
14
13
  "build:lark": "taro build --type lark",
15
14
  "build:h5": "taro build --type h5",
@@ -44,10 +43,9 @@
44
43
  "@visactor/vchart": "workspace:1.1.0-beta.1"
45
44
  },
46
45
  "devDependencies": {
47
- "@internal/bundler": "workspace:*",
48
46
  "@internal/eslint-config": "workspace:*",
49
- "@internal/ts-config": "workspace:*",
50
47
  "@rushstack/eslint-patch": "~1.1.4",
48
+ "@internal/ts-config": "workspace:*",
51
49
  "@vitejs/plugin-react": "3.1.0",
52
50
  "eslint": "~8.18.0",
53
51
  "vite": "3.2.6",