lambo-er-draw

1.0.8 • Public • Published

lambo-er-draw

说明

er 图组件,基于 vue, element-ui, mxgroup.js 开发,完全数据驱动模式使用。

快速上手

先 npm 下载插件

npm i lambo-er-draw -S

在main.js中应用:

import lamboErDraw from './packages/lamboErDraw/index'

Vue.use(lamboErDraw)

Image text



## 使用指南

```js
;<template>
	<lambo-er-draw></lambo-er-draw>
</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对象 - -

Readme

Keywords

none

Package Sidebar

Install

npm i lambo-er-draw

Weekly Downloads

2

Version

1.0.8

License

MIT

Unpacked Size

9.99 MB

Total Files

68

Last publish

Collaborators

  • yuenbin