File tree 1 file changed +4
-25
lines changed
1 file changed +4
-25
lines changed Original file line number Diff line number Diff line change 1
1
# 图表配置器
2
2
3
- > [ Document] ( https://yuque.antfin-inc.com/terminus_paas_dev/front/zmcodh )
4
3
5
4
## 背景
6
5
前端在对接图表可视化需求时,对于差不多的数据结构,每次都需要搭建差别不大的页面,同时要花时间去调整一些图表展示的细节,为了解放前端的重复劳动,并赋能业务方或数据提供方快速产出图表,所以需要一套开箱即用的图表库,标准化、简化从图表数据获取处理到图表展示的全流程。
18
17
7 . 提供外部扩展能力,包括主题、交互控件、数据转换函数等,提前注册后可使用
19
18
20
19
## 如何使用
21
- ### 1. 调整 Webpack 配置
22
- webpack相关配置变更,因为当前没有转为es5,需要项目中转换
23
- ``` js
24
- // 1) scss变更
25
- test: / \. scss$ / ,
26
- include: [
27
- path .resolve (__dirname , ' app' ),
28
- path .resolve (__dirname , ' node_modules/@terminus/dashboard-configurator' ),
29
- ],
30
- exclude: / node_modules\/ (?!@terminus\/ ). * / ,
31
-
32
- // 2) ts变更
33
- test: / \. (tsx? | jsx? )$ / ,
34
- exclude: / node_modules\/ (?!@terminus\/ ). * / ,
35
-
36
- ```
37
-
38
- ### 2. 注册扩展
20
+ ### 1. 注册扩展
39
21
在初始化时执行,这样才能在后续组件使用时生效。
40
22
``` jsx
41
- import { registDataConvertor , registChartOptionFn , registControl } from ' @terminus /dashboard-configurator' ;
23
+ import { registDataConvertor , registChartOptionFn , registControl } from ' @erda-ui /dashboard-configurator' ;
42
24
43
25
registDataConvertor (' monitor' , monitorDataConvertor);
44
26
registChartOptionFn (' monitorLine' , getLineOption);
45
27
46
28
```
47
29
48
- ### 3 . 组件中使用
30
+ ### 2 . 组件中使用
49
31
引入组件,栅格布局
50
32
``` jsx
51
- import { BoardGrid } from ' @terminus /dashboard-configurator'
33
+ import { BoardGrid } from ' @erda-ui /dashboard-configurator'
52
34
53
35
const layout = [
54
36
{
@@ -89,6 +71,3 @@ webpack相关配置变更,因为当前没有转为es5,需要项目中转换
89
71
)
90
72
91
73
```
92
-
93
- ## 其他文档
94
- [ 如何开发] ( ./Debug.md )
You can’t perform that action at this time.
0 commit comments