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)

使用指南

;<template>
	<zr-draw-html></zr-draw-html>
</template>

参考例子

参数

//单前数据为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对象	-	-