https://github.com/zjhr/zr-draw-html
er 图组件，基于 vue, element-ui, mxgroup.js 开发，完全数据驱动模式使用
https://github.com/zjhr/zr-draw-html
draw element elemet-ui mxgroup vue vuecli3
Last synced: 10 months ago
JSON representation
er 图组件，基于 vue, element-ui, mxgroup.js 开发，完全数据驱动模式使用
- Host: GitHub
- URL: https://github.com/zjhr/zr-draw-html
- Owner: zjhr
- Created: 2020-04-22T10:31:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:01:33.000Z (over 3 years ago)
- Last Synced: 2023-03-06T14:14:54.810Z (about 3 years ago)
- Topics: draw, element, elemet-ui, mxgroup, vue, vuecli3
- Language: JavaScript
- Homepage:
- Size: 5.58 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# zr-draw-html
## 说明
er 图组件，基于 vue, element-ui, mxgroup.js 开发，完全数据驱动模式使用。
## 快速上手
> 先 npm 下载插件
```
`npm install mxgraph-js --save`
`npm install element-ui --save`
`import 'element-ui/lib/theme-chalk/index.css'`
`npm install zr-draw-html --save`
或
`npm i zr-draw-html -S`
import zrDrawHtml from 'zr-draw-html'
import 'zr-draw-html/lib/zr-draw-html.css'
Vue.use(zrDrawHtml)
```
## 使用指南
```js
;
```
[参考例子](https://github.com/zjhr/zr-draw-html/blob/master/examples/App.vue)
## 参数
```js
//单前数据为tableArr数组的对象数据格式
{
x: 600,//x坐标
y: 100,//y坐标
height: 100,//高度，为0时候自适应
tableName: "表2",//表名
tableId: "02",//表id
state: 2,//图例类型
collapsed: false,//打开/收起
to: [{ tableId: "01", fieldId: 0, lineName: "连线" }],//表连线数据，fieldId为0则连表，否则链接是字段
children: [{//字段数据
name: "用户编码",//字段名称
fieldId: "22",//字段id
fieldType: "M",//维度或者度量图标
key: true,//组件图标
selected: true,//checkbox是否选中
disabled: true,//是否屏蔽checkbox
to: [{ tableId: "03", fieldId: "33", lineName: "连线", color: "#000" }]//连线数据
}]
}
```
参数
说明
类型
可选值
默认值
tableArr
er图表的集合
Array
表格上面说明
[]
legend
图例数据
Array
{state:Number ,name: String, color: "blue/green/yellow"}
[]
legendColors
图例颜色扩张
Object
{state:Number:"color"}
{}
toolbars
工具栏按钮,当存在radio属性时候，按钮渲染为radio，fun为radio改变时候的回调事件
Array
{name:String,icon:String,fun:Function,radio:{ name: "radioxx", checked: true }}
[]
account
是否含有查看视图描述
Boolean
true|false
false
v-module
视图描述
String
-
-
isCheckable
是否显示table列的复选框
Boolean
true|false
false
isShowImg
是否显示table列的图片
Boolean
true|false
false
toType
连线类型
Array
"TToT"表可以连接表, "TToR"表可以连接列, "RToT"列可以连接表, "RToR"列可以连接列。
["TToT", "TToR", "RToT", "RToR"]
$emit("collapsed", tableData)
当table收起展开时候回调触发，返回该table的对象
-
-
$emit("dblTable", tableData, tableIndex)
双击table时候回调触发，返回该table的对象和该table对象的下标
-
-
$emit("dblEdge",
{type,
sTableRowIndex,
tTableRowIndex,
sTable,
tTable,
sTableRow,
tTableRow,
toIndex
})
type:["TToT", "TToR", "RToT", "RToR"]。
sTableRowIndex:原表对象下标。
tTableRowIndex：目标表对象下标。
sTable：原表对象。tTable:目标表对象。
sTableRow：源表列对象。
tTableRow:目标表列对象。
toIndex：如果连线源于表，侧toIndex为表对象的to对象的连线对象的下标；如果是连线源于表的列对象，侧toIndex为列对象的to对象的连线对象的下标。
-
-
$emit("afterLineAdd",
{type,
sTableRowIndex,
tTableRowIndex,
sTable,
tTable,
sTableRow,
tTableRow,
toIndex
})
连线后的回调，参数说明同上
-
-
$emit("checkChange", data, event)
选择框选中后回调：data:勾选回调该列的对象。event:event对象
-
-