Skip to content

Commit 4077751

Browse files
paironepairone
committed
feat: varify the block registration function and supplement the tutorial
1 parent 58aa471 commit 4077751

File tree

9 files changed

+356
-175810
lines changed

9 files changed

+356
-175810
lines changed

‎docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/block.md

+112
Original file line numberDiff line numberDiff line change
@@ -174,4 +174,116 @@ Lark Mini-Program Widget desktop versions also support mouse events, so you can
174174
></canvas>
175175
```
176176
177+
### Register function
178+
179+
The desktop version of the Feishu widget supports registering custom functions. You can register functions using global registration `expressionFunction` or instance registration `registerFunction`.
180+
181+
#### Global registration function
182+
183+
When using a globally registered function, call the chart method `expressionFunction` to register a custom function, and callback processing will be performed at runtime, as shown in the example below.
184+
185+
```js
186+
<!-- index.js -->
187+
methods: {
188+
init() {
189+
this.data.chartList.forEach(item => {
190+
tt.createSelectorQuery()
191+
.select(`#${item.id}_draw_canvas`)
192+
.boundingClientRect(domRef => {
193+
if (!domRef) {
194+
console.error(`未找到 #${item.id} 画布`);
195+
return;
196+
}
197+
198+
item.chart && item.chart.release();
199+
200+
// 自定义函数
201+
function labelFormat(key){
202+
return key + 'test';
203+
}
204+
205+
// 全局注册该自定义函数
206+
VChart.expressionFunction('labelFormat', labelFormat);
207+
208+
const chartInstance = new VChart(
209+
{
210+
width: domRef.width,
211+
height: domRef.height,
212+
/**
213+
* spec中可使用该函数名'labelFormat'
214+
* 例如，使用该函数做label的格式化
215+
* label: {
216+
* visible: true,
217+
* formatMethod: 'labelFormat'
218+
* }
219+
*/
220+
...item.spec
221+
},
222+
{
223+
// do something
224+
}
225+
);
226+
227+
chartInstance.renderAsync();
228+
})
229+
.exec();
230+
});
231+
}
232+
}
233+
```
234+
235+
#### Instance registration function
236+
237+
When using an instance to register a function, call the instance method `registerFunction` to register a custom function, and callback processing will be performed at runtime, as shown in the example below.
238+
239+
```js
240+
<!-- index.js -->
241+
methods: {
242+
init() {
243+
this.data.chartList.forEach(item => {
244+
tt.createSelectorQuery()
245+
.select(`#${item.id}_draw_canvas`)
246+
.boundingClientRect(domRef => {
247+
if (!domRef) {
248+
console.error(`未找到 #${item.id} 画布`);
249+
return;
250+
}
251+
252+
item.chart && item.chart.release();
253+
254+
// 自定义函数
255+
function labelFormat(key){
256+
return key + 'test';
257+
}
258+
259+
const chartInstance = new VChart(
260+
{
261+
width: domRef.width,
262+
height: domRef.height,
263+
/**
264+
* spec中可使用该函数名'labelFormat'
265+
* 例如，使用该函数做label的格式化
266+
* label: {
267+
* visible: true,
268+
* formatMethod: 'labelFormat'
269+
* }
270+
*/
271+
...item.spec
272+
},
273+
{
274+
// do something
275+
}
276+
);
277+
278+
// 实例注册该自定义函数
279+
chartInstance.registerFunction('labelFormat', labelFormat);
280+
281+
chartInstance.renderAsync();
282+
})
283+
.exec();
284+
});
285+
}
286+
}
287+
```
288+
177289
For more details, see: [https://github.com/VisActor/VChart/tree/main/packages/block-vchart](https://github.com/VisActor/VChart/tree/main/packages/block-vchart)

‎docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/block.md

+112
Original file line numberDiff line numberDiff line change
@@ -174,4 +174,116 @@ methods: {
174174
></canvas>
175175
```
176176
177+
### 注册函数
178+
179+
飞书小组件桌面端支持注册自定义函数，你可以使用全局注册`expressionFunction`或实例注册`registerFunction`两种方法进行函数注册。
180+
181+
#### 全局注册函数
182+
183+
在使用全局注册函数时，调用图表方法`expressionFunction`注册自定义函数，在运行时便会进行回调处理，如下方的示例。
184+
185+
```js
186+
<!-- index.js -->
187+
methods: {
188+
init() {
189+
this.data.chartList.forEach(item => {
190+
tt.createSelectorQuery()
191+
.select(`#${item.id}_draw_canvas`)
192+
.boundingClientRect(domRef => {
193+
if (!domRef) {
194+
console.error(`未找到 #${item.id} 画布`);
195+
return;
196+
}
197+
198+
item.chart && item.chart.release();
199+
200+
// 自定义函数
201+
function labelFormat(key){
202+
return key + 'test';
203+
}
204+
205+
// 全局注册该自定义函数
206+
VChart.expressionFunction('labelFormat', labelFormat);
207+
208+
const chartInstance = new VChart(
209+
{
210+
width: domRef.width,
211+
height: domRef.height,
212+
/**
213+
* spec中可使用该函数名'labelFormat'
214+
* 例如，使用该函数做label的格式化
215+
* label: {
216+
* visible: true,
217+
* formatMethod: 'labelFormat'
218+
* }
219+
*/
220+
...item.spec
221+
},
222+
{
223+
// do something
224+
}
225+
);
226+
227+
chartInstance.renderAsync();
228+
})
229+
.exec();
230+
});
231+
}
232+
}
233+
```
234+
235+
#### 实例注册函数
236+
237+
在使用实例注册函数时，调用实例方法`registerFunction`注册自定义函数，在运行时便会进行回调处理，如下方的示例。
238+
239+
```js
240+
<!-- index.js -->
241+
methods: {
242+
init() {
243+
this.data.chartList.forEach(item => {
244+
tt.createSelectorQuery()
245+
.select(`#${item.id}_draw_canvas`)
246+
.boundingClientRect(domRef => {
247+
if (!domRef) {
248+
console.error(`未找到 #${item.id} 画布`);
249+
return;
250+
}
251+
252+
item.chart && item.chart.release();
253+
254+
// 自定义函数
255+
function labelFormat(key){
256+
return key + 'test';
257+
}
258+
259+
const chartInstance = new VChart(
260+
{
261+
width: domRef.width,
262+
height: domRef.height,
263+
/**
264+
* spec中可使用该函数名'labelFormat'
265+
* 例如，使用该函数做label的格式化
266+
* label: {
267+
* visible: true,
268+
* formatMethod: 'labelFormat'
269+
* }
270+
*/
271+
...item.spec
272+
},
273+
{
274+
// do something
275+
}
276+
);
277+
278+
// 实例注册该自定义函数
279+
chartInstance.registerFunction('labelFormat', labelFormat);
280+
281+
chartInstance.renderAsync();
282+
})
283+
.exec();
284+
});
285+
}
286+
}
287+
```
288+
177289
具体详见：[https://github.com/VisActor/VChart/tree/main/packages/block-vchart](https://github.com/VisActor/VChart/tree/main/packages/block-vchart)

‎packages/block-vchart/README.md

+112
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,115 @@ methods: {
212212
}
213213
}
214214
```
215+
216+
#### 注册函数
217+
218+
飞书小组件桌面端支持注册自定义函数，你可以使用全局注册`expressionFunction`或实例注册`registerFunction`两种方法进行函数注册。
219+
220+
##### 全局注册函数
221+
222+
在使用全局注册函数时，调用图表方法`expressionFunction`注册自定义函数，在运行时便会进行回调处理，如下方的示例。
223+
224+
```js
225+
<!-- index.js -->
226+
methods: {
227+
init() {
228+
this.data.chartList.forEach(item => {
229+
tt.createSelectorQuery()
230+
.select(`#${item.id}_draw_canvas`)
231+
.boundingClientRect(domRef => {
232+
if (!domRef) {
233+
console.error(`未找到 #${item.id} 画布`);
234+
return;
235+
}
236+
237+
item.chart && item.chart.release();
238+
239+
// 自定义函数
240+
function labelFormat(key){
241+
return key + 'test';
242+
}
243+
244+
// 全局注册该自定义函数
245+
VChart.expressionFunction('labelFormat', labelFormat);
246+
247+
const chartInstance = new VChart(
248+
{
249+
width: domRef.width,
250+
height: domRef.height,
251+
/**
252+
* spec中可使用该函数名'labelFormat'
253+
* 例如，使用该函数做label的格式化
254+
* label: {
255+
* visible: true,
256+
* formatMethod: 'labelFormat'
257+
* }
258+
*/
259+
...item.spec
260+
},
261+
{
262+
// do something
263+
}
264+
);
265+
266+
chartInstance.renderAsync();
267+
})
268+
.exec();
269+
});
270+
}
271+
}
272+
```
273+
274+
##### 实例注册函数
275+
276+
在使用实例注册函数时，调用实例方法`registerFunction`注册自定义函数，在运行时便会进行回调处理，如下方的示例。
277+
278+
```js
279+
<!-- index.js -->
280+
methods: {
281+
init() {
282+
this.data.chartList.forEach(item => {
283+
tt.createSelectorQuery()
284+
.select(`#${item.id}_draw_canvas`)
285+
.boundingClientRect(domRef => {
286+
if (!domRef) {
287+
console.error(`未找到 #${item.id} 画布`);
288+
return;
289+
}
290+
291+
item.chart && item.chart.release();
292+
293+
// 自定义函数
294+
function labelFormat(key){
295+
return key + 'test';
296+
}
297+
298+
const chartInstance = new VChart(
299+
{
300+
width: domRef.width,
301+
height: domRef.height,
302+
/**
303+
* spec中可使用该函数名'labelFormat'
304+
* 例如，使用该函数做label的格式化
305+
* label: {
306+
* visible: true,
307+
* formatMethod: 'labelFormat'
308+
* }
309+
*/
310+
...item.spec
311+
},
312+
{
313+
// do something
314+
}
315+
);
316+
317+
// 实例注册该自定义函数
318+
chartInstance.registerFunction('labelFormat', labelFormat);
319+
320+
chartInstance.renderAsync();
321+
})
322+
.exec();
323+
});
324+
}
325+
}
326+
```

‎packages/block-vchart/block/data/line.js

+4
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,9 @@ export default {
5151
},
5252
crosshair: {
5353
xField: { visible: true }
54+
},
55+
label: {
56+
visible: true,
57+
formatMethod: 'labelFormat'
5458
}
5559
}

‎packages/block-vchart/block/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,12 @@ Block({
134134
// release old first
135135
item.chart && item.chart.release();
136136

137+
function labelFormat(key){
138+
return key + 'test';
139+
}
140+
141+
VChart.expressionFunction('labelFormat', labelFormat);
142+
137143
const chartInstance = new VChart(
138144
{
139145
width: domRef.width,
@@ -162,6 +168,8 @@ Block({
162168
});
163169
}
164170

171+
// chartInstance.registerFunction('labelFormat', labelFormat);
172+
165173
chartInstance.renderAsync();
166174
})
167175
.exec();

‎packages/block-vchart/block/vchart/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)