十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
如何在vue 中使用gojs绘制E-R图?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联成立与2013年,先为友谊等服务建站,友谊等地企业,进行企业商务咨询服务。为友谊企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
首先,在vue项目中安装gojs的依赖包,并在项目中引入。
创建tablePreview.vue
在js文件中绘制E-R图,注意:初始化方面必须放在mounted中调用。
tablePreview.js如下
export default{ data() { return { myDiagram: '', searchText: '', tabViewList: '', tabRelView: '' } }, mounted() { var dataSoureId = JSON.parse(sessionStorage.getItem("previewInfo")).datasourceId let _this = this _this.$ajax.post(_this.cfg.api.dataPoolAdmin.tableRelView +'?datasourceId=' + dataSoureId) .then(function (res) { if(res.data.result) { _this.tabViewList = res.data.data.tabViewList _this.tabRelView = res.data.data.tabRelViewList _this.init() } }) }, methods: { init() { var go = this.go if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var a = go.GraphObject.make; // 定义模板 this.myDiagram = a(go.Diagram, 'entityRelation', // 必须命名或引用div html元素 { initialContentAlignment: go.Spot.Center, allowDelete: false, allowCopy: false, layout: a(go.ForceDirectedLayout), "undoManager.isEnabled": true }); // define several shared Brushes var bluegrad = a(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" }); var greengrad = a(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" }); var redgrad = a(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" }); var yellowgrad = a(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" }); var lightgrad = a(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" }); // the template for each attribute in a node's array of item data var itemTempl = a(go.Panel, "Horizontal", a(go.Shape, { desiredSize: new go.Size(10, 10) }, new go.Binding("figure", "figure"), new go.Binding("fill", "color")), a(go.TextBlock,//items样式 { stroke: "#333333", row: 0, alignment: go.Spot.Center, margin: new go.Margin(0, 14, 0, 2), font: "bold 14px sans-serif" }, new go.Binding("text", "name")) ); // define the Node template, representing an entity this.myDiagram.nodeTemplate = a(go.Node, "Auto", // the whole node panel { selectionAdorned: true, resizable: true, layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, isShadowed: true, shadowColor: "#CCAA" }, new go.Binding("location", "location").makeTwoWay(), // whenever the PanelExpanderButton changes the visible property of the "LIST" panel, // clear out any desiredSize set by the ResizingTool. new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"), // define the node's outer shape, which will surround the Table a(go.Shape, "Rectangle", /*{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),*/ new go.Binding("fill", "isHighlighted", function(h) { return h ? "#F44336" : "#A7E7FC"; }).ofObject()), a(go.Panel, "Table", { margin: 15, stretch: go.GraphObject.Fill }, a(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }), // the table header a(go.TextBlock, { row: 0, alignment: go.Spot.Center, margin: new go.Margin(0, 14, 0, 2), // leave room for Button font: "bold 16px sans-serif" }, new go.Binding("text", "key")), // 折叠/展开按钮 /*a("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles { row: 0, alignment: go.Spot.TopRight }),*/ // the list of Panels, each showing an attribute a(go.Panel, "Vertical", { name: "LIST", row: 1, padding: 0,//表名到下边框的距离 alignment: go.Spot.TopLeft, defaultAlignment: go.Spot.Left, stretch: go.GraphObject.Horizontal, itemTemplate: itemTempl }, new go.Binding("itemArray", "items")) ) // end Table Panel ); // end Node // define the Link template, representing a relationship this.myDiagram.linkTemplate = a(go.Link, // the whole link panel { selectionAdorned: true, layerName: "Foreground", reshapable: true, routing: go.Link.AvoidsNodes, corner: 5, curve: go.Link.JumpOver, toEndSegmentLength: 100 }, a(go.Shape, // the link shape { stroke: "#303B45", strokeWidth: 2.5 }), a(go.TextBlock, // the "from" label { textAlign: "center", font: "bold 14px sans-serif", stroke: "#1967B3", segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text")), a(go.TextBlock, // the "to" label { textAlign: "center", font: "bold 14px sans-serif", stroke: "#1967B3", segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "toText")) ); // create the model for the E-R diagram var nodeDataArray = [] for(var i =0; i< this.tabViewList.length; i++){ nodeDataArray.push(JSON.parse(JSON.stringify( { key: this.tabViewList[i].tableName, name: this.tabViewList[i].tableCnName, items: [{name: this.tabViewList[i].tableCnName, isKey: false, figure: 'Decision', color: "#2d8cf0"}] } ))) } var linkDataArray = [] for(var j =0; j< this.tabRelView.length; j++){ linkDataArray.push(JSON.parse(JSON.stringify( { from: this.tabRelView[j].fromTableName, to: this.tabRelView[j].toTableName, text: this.tabRelView[j].fromText, toText: this.tabRelView[j].toText }) )) } /*var nodeDataArray = [ { key: this.tabViewList[].tableName, items: [ { name: "角色标识:BIGINT", iskey: true, figure: "Decision", color: yellowgrad }, { name: "模块标识:BIGINT", iskey: false, figure: "Cube", color: bluegrad }] }, { key: "角色信息表", items: [ { name: "标识:BIGINT", iskey: true, figure: "Decision", color: yellowgrad }, { name: "名称:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad }, { name: "描述:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad }, { name: "排序:VARCHAR(100)", iskey: false, figure: "Cube1", color: bluegrad } ] }, { key: "用户权限表", items: [ { name: "CategoryID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "CategoryName", iskey: false, figure: "Cube", color: bluegrad }, { name: "Description", iskey: false, figure: "Cube", color: bluegrad }, { name: "Picture", iskey: false, figure: "TriangleUp", color: redgrad } ] }, { key: "用户信息表", items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] }, { key: "表1", items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] }, { key: "表2", items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] }, { key: "表3" }, { key: "表4", items: [ { name: "OrderID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "ProductID", iskey: true, figure: "Decision", color: yellowgrad }, { name: "UnitPrice", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Quantity", iskey: false, figure: "MagneticData", color: greengrad }, { name: "Discount", iskey: false, figure: "MagneticData", color: greengrad } ] }, ];*/ /*var linkDataArray = [ { from: "角色权限表", to: "角色信息表", text: "N", toText: "1" }, { from: "角色权限表", to: "用户权限表", text: "N", toText: "1" }, { from: "用户信息表", to: "角色权限表", text: "N", toText: "1" }, { from: "表1", to: "角色权限表", text: "N", toText: "1" }, { from: "角色权限表", to: "表1", text: "N", toText: "1" }, { from: "表2", to: "用户信息表", text: "N", toText: "1" }, { from: "表3", to: "用户信息表", text: "N", toText: "1" }, { from: "表4", to: "角色权限表", text: "N", toText: "1" } ];*/ this.myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); // Overview var myOverview = a(go.Overview, "myOverviewDiv", // the HTML DIV element for the Overview { observed: this.myDiagram, contentAlignment: go.Spot.Center }); }, searchDiagram() { // called by button var input = document.getElementById("mySearch"); if (!input) return; input.focus(); this.myDiagram.startTransaction("highlight search"); if (this.searchText) { // search four different data properties for the string, any of which may match for success // create a case insensitive RegExp from what the user typed var regex = new RegExp(this.searchText, "i"); var results = this.myDiagram.findNodesByExample({ key: regex },{name: regex}); this.myDiagram.highlightCollection(results); // try to center the diagram at the first node that was found if (results.count > 0) this.myDiagram.centerRect(results.first().actualBounds); } else { // empty string only clears highlighteds collection this.myDiagram.clearHighlighteds(); } this.myDiagram.commitTransaction("highlight search"); } } }
这里在gojs的EntityRelationship实例的基础上,加了遮罩图与搜索后高亮显示功能。
遮罩层的作用是当有很多数据时,可以通过拖动遮罩层来查找。
这个是遮罩层的div
这里是把之前定义好的Diagram放进遮罩层。
搜索框的作用即是更快的找到相应的数据,下图代码是设置搜索后显示高亮的数据。
效果图如下:
关于如何在vue 中使用gojs绘制E-R图问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。