zr-draw-html v0.1.5

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" }]//连线数据
  }]
}