wgx_relation_graph 1.1.1
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.
- package/README.md +103 -0
- package/package.json +71 -0
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# wgx_relation_graph
|
|
2
|
+
|
|
3
|
+
## 背景
|
|
4
|
+
|
|
5
|
+
关系图组件通常用于展示复杂的网络结构，如组织架构、社交网络、知识图谱等场景。它可以直观地展示节点之间的关系。
|
|
6
|
+
|
|
7
|
+
以下是关系图组件的配置分组及说明。
|
|
8
|
+
|
|
9
|
+
## 配置说明
|
|
10
|
+
|
|
11
|
+
### 数据属性
|
|
12
|
+
|
|
13
|
+
| 配置项 | 配置名称 | 类型 | 默认值 | 备注 |
|
|
14
|
+
|--------|------------|---------------------------|--------|------------------------------------------|
|
|
15
|
+
| rootId | 根节点 | String | - | 设置根节点的 ID |
|
|
16
|
+
| nodes | 节点数据 | List<T>或者匿名数据结构 | [] | 设置节点数据，每个对象包含节点的详细信息 |
|
|
17
|
+
| lines | 关系线数据 | List<T>或者匿名数据结构 | [] | 设置关系线数据，每个对象描述节点间的连接 |
|
|
18
|
+
|
|
19
|
+
#### nodes 数据结构
|
|
20
|
+
|
|
21
|
+
| 属性 | 类型 | 描述 |
|
|
22
|
+
|---------------------------|---------|--------------------------------|
|
|
23
|
+
| id | String | 节点的唯一标识符 |
|
|
24
|
+
| text | String | 节点显示的文本 |
|
|
25
|
+
| color | String | 节点的背景颜色 |
|
|
26
|
+
| fontColor | String | 节点文本的颜色 |
|
|
27
|
+
| borderWidth | Integer | 节点边框的宽度 |
|
|
28
|
+
| borderColor | String | 节点边框的颜色 |
|
|
29
|
+
| nodeShape | Integer | 节点的形状 0:圆形 1方形; |
|
|
30
|
+
| width | Integer | 节点的宽度 |
|
|
31
|
+
| height | Integer | 节点的高度 |
|
|
32
|
+
| opacity | Decimal | 节点的不透明度 (值范围：0到1,或者0到100)，设置为0可以实现隐藏的效果 |
|
|
33
|
+
| isHide | Boolean | 是否隐藏节点 |
|
|
34
|
+
| disableDrag | Boolean | 是否禁用节点拖拽 |
|
|
35
|
+
| disableDefaultClickEffect | Boolean | 是否禁用节点的默认点击效果 |
|
|
36
|
+
|
|
37
|
+
#### lines 数据结构
|
|
38
|
+
|
|
39
|
+
| 属性 | 类型 | 描述 |
|
|
40
|
+
|--------------|---------|------------------------|
|
|
41
|
+
| from | String | 起始节点的 ID |
|
|
42
|
+
| to | String | 结束节点的 ID |
|
|
43
|
+
| text | String | 关系线的文本 |
|
|
44
|
+
| color | String | 关系线的颜色 |
|
|
45
|
+
| lineWidth | Integer | 关系线的宽度 |
|
|
46
|
+
| isHide | Boolean | 是否隐藏关系线 |
|
|
47
|
+
| lineShape | Integer | 关系线的形状 0:直线;1:曲线;2:折线;3:圆弧;4:圆弧折线;5:圆弧折线2;6:圆弧折线 |
|
|
48
|
+
| fontColor | String | 关系线文本的颜色 |
|
|
49
|
+
| opacity | Decimal | 关系线的不透明度 透明度(值范围：0到1,或者0到100)，设置为0可以实现隐藏的效果 |
|
|
50
|
+
| isHideArrow | Boolean | 是否隐藏关系线的箭头 |
|
|
51
|
+
| useTextPath | Boolean | 是否使用文本路径 |
|
|
52
|
+
|
|
53
|
+
### 主要属性
|
|
54
|
+
|
|
55
|
+
| 配置项 | 配置名称 | 类型 | 默认值 | 备注 |
|
|
56
|
+
|----------------------|----------------|--------|----------|------------------------|
|
|
57
|
+
| defaultJunctionPoint | 默认连接点位置 | String | 'border' | 设置默认的连接点位置 |
|
|
58
|
+
| layout | 布局方式 | String | 'center' | 设置布局方式 tree:树状布局/center:中心布局/force:自动布局 |
|
|
59
|
+
| layoutFrom | 树状图布局方向 | String | 'top' | 设置树状图布局方向，只有当布局方式为树状图时有效 left:从左到右/top:从上到下/right:从右到左/bottom:从下到上 |
|
|
60
|
+
|
|
61
|
+
### 交互属性
|
|
62
|
+
|
|
63
|
+
| 配置项 | 配置名称 | 类型 | 默认值 | 备注 |
|
|
64
|
+
|--------------------------|-------------------|---------|--------|-----------------------------------|
|
|
65
|
+
| allowShowMiniToolBar | 显示工具栏 | Boolean | true | 设置是否显示工具栏 |
|
|
66
|
+
| allowAutoLayoutIfSupport | 显示自动布局按钮 | Boolean | true | 设置是否在工具栏中显示自动布局按钮 |
|
|
67
|
+
| disableZoom | 禁用缩放 | Boolean | false | 设置是否禁用缩放功能 |
|
|
68
|
+
| disableDragNode | 禁用节点拖拽 | Boolean | false | 设置是否禁用节点拖拽功能 |
|
|
69
|
+
|
|
70
|
+
### 样式属性
|
|
71
|
+
|
|
72
|
+
| 配置项 | 配置名称 | 类型 | 默认值 | 备注 |
|
|
73
|
+
|-------------------------|----------------|---------|--------|----------------------------|
|
|
74
|
+
| backgroundColor | 背景颜色 | String | '#fff' | 设置图表的背景颜色 |
|
|
75
|
+
| backgroundImage | 图谱水印 URL | String | null | 设置图谱水印的 URL |
|
|
76
|
+
| backgroundImageNoRepeat | 不重复显示水印 | Boolean | false | 设置是否不重复显示水印 |
|
|
77
|
+
|
|
78
|
+
### 组件逻辑
|
|
79
|
+
|
|
80
|
+
| 方法名 | 描述 | 参数 | 返回值 |
|
|
81
|
+
|--------|-------------------|------|--------|
|
|
82
|
+
| reload | 重新加载关系图数据 | 无 | 无 |
|
|
83
|
+
|
|
84
|
+
## 使用示例
|
|
85
|
+
|
|
86
|
+
创建一个简单的组织架构关系图。
|
|
87
|
+
|
|
88
|
+
1. 创建 页面 页面，将关系图组件拖入到页面中。
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
2. 创建数据集，包含节点数据和关系线数据。将数据集绑定到关系图组件的相应属性,可以是用匿名结构或者自定义数据结构(我这里直接在进入页面赋值了)。
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
3. 设置根节点 ID，并配置适当的交互属性，如允许显示工具栏和自动布局按钮。
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
4. 预览应用，即可看到关系图的展示效果。用户可以拖拽节点，使用工具栏进行缩放和自动布局等操作。
|
|
102
|
+
|
|
103
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "wgx_relation_graph",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.1.1",
|
|
5
|
+
"lcapIdeVersion": "3.8",
|
|
6
|
+
"title": "关系图依赖库",
|
|
7
|
+
"description": "关系图依赖库",
|
|
8
|
+
"main": "dist-theme/index.js",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist-theme"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"default": "./dist-theme/index.js",
|
|
15
|
+
"import": "./dist-theme/index.mjs",
|
|
16
|
+
"require": "./dist-theme/index.cjs"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "npm run start",
|
|
21
|
+
"start": "storybook dev -p 8008",
|
|
22
|
+
"build": "vite build",
|
|
23
|
+
"test": "vitest",
|
|
24
|
+
"release": "lcap publish"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"Vue"
|
|
28
|
+
],
|
|
29
|
+
"author": "",
|
|
30
|
+
"license": "ISC",
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"relation-graph": "^2.2.6"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@lcap/builder": "^1.3.1",
|
|
36
|
+
"@lcap/storybook-vue-vite": "^7.6.17",
|
|
37
|
+
"@lcap/vite-plugin-vue2": "^1.0.0",
|
|
38
|
+
"@nasl/types": "^0.1.10",
|
|
39
|
+
"@storybook/addon-essentials": "^7.6.17",
|
|
40
|
+
"@storybook/addon-interactions": "^7.6.17",
|
|
41
|
+
"@storybook/addon-links": "^7.6.17",
|
|
42
|
+
"@storybook/addon-onboarding": "^1.0.10",
|
|
43
|
+
"@storybook/blocks": "^7.6.17",
|
|
44
|
+
"@storybook/builder-vite": "^7.6.17",
|
|
45
|
+
"@storybook/test": "^7.6.17",
|
|
46
|
+
"@storybook/vue": "^7.6.17",
|
|
47
|
+
"@types/fs-extra": "^11.0.4",
|
|
48
|
+
"@types/lodash": "^4.14.202",
|
|
49
|
+
"@vue/test-utils": "^1.3.5",
|
|
50
|
+
"autoprefixer": "^10.4.16",
|
|
51
|
+
"jest-serializer-vue-tjw": "^3.20.0",
|
|
52
|
+
"jsdom": "^23.0.1",
|
|
53
|
+
"marked": "^12.0.1",
|
|
54
|
+
"rimraf": "^5.0.5",
|
|
55
|
+
"storybook": "^7.6.17",
|
|
56
|
+
"typescript": "^5.3.3",
|
|
57
|
+
"vite": "^5.0.10",
|
|
58
|
+
"vitest": "^1.1.0",
|
|
59
|
+
"vitest-canvas-mock": "^0.3.3",
|
|
60
|
+
"vue": "2.6.12",
|
|
61
|
+
"vue-i18n": "^8.15.5",
|
|
62
|
+
"vue-router": "3.3.4",
|
|
63
|
+
"vue-template-compiler": "2.6.12"
|
|
64
|
+
},
|
|
65
|
+
"peerDependencies": {
|
|
66
|
+
"vue": "^2.6.0"
|
|
67
|
+
},
|
|
68
|
+
"resolutions": {
|
|
69
|
+
"globby": "9.2.0"
|
|
70
|
+
}
|
|
71
|
+
}
|