上文我们讲解了如何根据数据生成对应的mxgraph图，本文我们讲解单页面请求多个文件，生成mxgraph图。
这也是我的项目需求之一。
1.准备工作：
原始数据：
mxgraphData: [
{
nodesList: [
[0, "Hello"],
[1, "Mxgraph"],
],
edgesList: [[0, "label", 1]],
},
],
2.设置按钮切换数据
<button @click="shanxi()">陕西省</button>
<button @click="henan()">河南省</button>
3.设置两个data.js文件
- data1.js
export var mxgraphData1 = [{
"nodesList": [
[0, "宝鸡市"],
[1, "渭南市"],
[2, "西安市"],
[3, "汉中市"],
[4, "安康市"]
],
"edgesList": [
[0, "200Km", 1],
[1, "300km", 2],
[1, "75Km", 3],
[3, "100Km", 4],
[4, "90Km", 5]
]
}]
- data2.js
export var mxgraphData2 = [{
"nodesList": [
[0, "郑州市"],
[1, "开封市"],
[2, "洛阳市"],
[3, "安阳市"],
[4, "焦作市"],
[5, "新乡市"]
],
"edgesList": [
[0, "200Km", 1],
[1, "300km", 2],
[1, "75Km", 3],
[3, "100Km", 4],
[4, "90Km", 5],
[4, "110Km", 6]
]
}]
4.重要逻辑代码
/**
* 设置按钮切换数据
* 每一次要调用this.v_graph.destroy(); 销毁原本的mxgraph示例 负责图形会重叠
* 然后重新绘图this.mxGraph();
*/
shanxi() {
this.mxgraphData = mxgraphData1;
this.v_graph.destroy();
this.mxGraph();
},
henan() {
this.mxgraphData = mxgraphData2;
this.v_graph.destroy();
this.mxGraph();
},
5.实现效果
6.完整代码
<template>
<div>
<button @click="shanxi()">陕西省</button>
<button @click="henan()">河南省</button>
<div id="graphContainer"></div>
</div>
</template>
<script>
import mxgraph from "./mxgraph";
import {
mxgraphData1 } from "./data1";
import {
mxgraphData2 } from "./data2";
const {
mxGraph,
mxClient,
mxCodec,
mxUtils,
mxConstants,
mxPerimeter,
mxHierarchicalLayout,
mxCompactTreeLayout,
} = mxgraph;
export default {
data() {
return {
v_graph: "",
v_parent: "",
mxgraphData: [
{
nodesList: [
[0, "Hello"],
[1, "Mxgraph"],
],
edgesList: [[0, "label", 1]],
},
],
};
},
methods: {
/**
* 设置按钮切换数据
* 每一次要调用this.v_graph.destroy(); 销毁原本的mxgraph示例 负责图形会重叠
* 然后重新绘图this.mxGraph();
*/
shanxi() {
this.mxgraphData = mxgraphData1;
this.v_graph.destroy();
this.mxGraph();
},
henan() {
this.mxgraphData = mxgraphData2;
this.v_graph.destroy();
this.mxGraph();
},
/**
* 生成节点
*/
createNodes(graph, parent) {
//遍历mxgraphData生成节点
var len = this.mxgraphData[0].nodesList.length;
for (var i = 0; i < len; i++) {
let text = this.mxgraphData[0].nodesList[i][1];
let id = `node${
this.mxgraphData[0].nodesList[i][0]}`;
var node = graph.insertVertex(
parent,
id,
text,
0,
0,
150,
40,
"fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=15;"
);
}
},
/**
* 生成边
*/
createEdges(graph, parent) {
var len = this.mxgraphData[0].edgesList.length;
for (var i = 0; i < len; i++) {
//寻找到对应的节点id
var startIndex = `node${
this.mxgraphData[0].edgesList[i][0]}`;
var endIndex = `node${
this.mxgraphData[0].edgesList[i][2]}`;
//graph.getModel().getCell() 通过id找到对应的节点node
var v1 = graph.getModel().getCell(startIndex);
var v2 = graph.getModel().getCell(endIndex);
var label = this.mxgraphData[0].edgesList[i][1];
var eage = graph.insertEdge(parent, null, label, v1, v2, "");
}
},
mxGraph() {
if (!mxClient.isBrowserSupported()) {
// 判断是否支持mxgraph
mxUtils.error("Browser is not supported!", 200, false);
} else {
// 在容器中创建图表
let container = document.getElementById("graphContainer");
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
this.v_graph = graph;
this.v_parent = parent;
// 生成 Hello world!
graph.getModel().beginUpdate();
//定义布局
var layout = new mxHierarchicalLayout(graph);
try {
this.createNodes(graph, parent);
this.createEdges(graph, parent);
layout.execute(parent);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
},
},
mounted() {
this.mxGraph();
},
};
</script>
<style>
#graphContainer {
width: 1000px;
height: 700px;
border: 3px solid rgb(194, 185, 185);
background-image: url("../assets/grid.gif");
margin: auto;
box-sizing: border-box;
padding: 50px 0 0 250px;
}
button {
width: 150px;
height: 50px;
font-size: 20px;
margin: 0 10px;
}
</style>