vue中使用antv G6 的树图TreeGraph
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。它是一款国产可视化插件，中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表，d3作为一款国外很强大的可视化插件，它的官方文档是非汉语文档，社区虽然很活跃，但几乎是英文文档，阅读和学习起来并不是那么轻松，尤其是英语不太好的同学，阅读和学习d3更吃力。这时候G6就是不错的选择。因为G6包含丰富的图
·
antv G6
文章目录
目录
- 前言
- 一、安装G6
- 二、使用步骤
- 1.在需要用的 G6 的 JS 文件中导入：
- 2.使用示例
- 1 创建容器
- 2 数据准备
- 3 创建关系图
- 4 配置数据源，渲染
- 三、完整代码
- 四、ListaData.json
- 五、GitHub源码 ：
- https://github.com/volodyan/vue_g6https://github.com/volodyan/vue_g6
前言
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
它是一款国产可视化插件，中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表，d3作为一款国外很强大的可视化插件，它的官方文档是非汉语文档，社区虽然很活跃，但几乎是英文文档，阅读和学习起来并不是那么轻松，尤其是英语不太好的同学，阅读和学习d3更吃力。这时候G6就是不错的选择。因为G6包含丰富的图表类型，还可以实现节点，边等自定义。
一、安装G6
npm install --save @antv/g6
二、使用步骤
1.在需要用的 G6 的 JS 文件中导入：
import G6 from '@antv/g6';
2.使用示例
代码如下（示例）：
1 创建容器
需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为
div标签。G6 在绘制时会在该容器下追加canvas标签，然后将图绘制在其中。<div id="container"></div>2 数据准备
引入 G6 的数据源为 JSON 格式的对象。该对象中需要有 id 和 children 字段，否则会在渲染或者做收缩节点操作时报错。
- 注意：
- 1、生成树形图的数据中必须包含id 和 children 两个字段.
- 2、id的数据类型必须为字符串类型.：
const data= { "id": "Firstlid1", "children": [ { "id": "Firstlid1Secondlid1", "children": [ { "id": "Firstlid1Secondlid1Thirdlid1", "children": [ { "id": "Firstlid1Secondlid1Thirdlid1Fourlid1", "children": [] } ] } ] } ] }3 创建关系图
创建关系图（实例化）时，至少需要为图设置容器、宽和高。
const graph = new G6.TreeGraph({ container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身 width: 800, // Number，必须，图的宽度 height: 500, // Number，必须，图的高度 });4 配置数据源，渲染
graph.data(data); // 读取 Step 2 中的数据源到图上 graph.render(); // 渲染图
三、完整代码
<template>
<div class="GsixBox">
<div id="container" :style="{ height: '100%', width: '100%' }" />
</div>
</template>
<script>
import G6 from "@antv/g6";
import FirstContentDataJson from "./data/FirstContentData.json";
import SecondContentDataJson from "./data/SecondContentData.json";
import ThirdContentDataJson from "./data/ThirdContentData.json";
import FourContentDataJson from "./data/FourContentData.json";
import ListDataJson from "./data/ListData.json";
export default {
data() {
return {
treedata: ListDataJson,
};
},
mounted() {
this.showChart();
},
methods: {
//生成树图
showChart() {
//fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
// fetch('/api/algorithm-category')
///.then((res) => res.json())
this.$axios
.post("/api/ListData")
.then((res) => res.data[0])
.then((data) => {
G6.registerNode("card-node", {
draw: function drawShape(cfg, group) {
const r = 2;
const color = "#5B8FF9";
const w = cfg.size[0];
const h = cfg.size[1];
const shape = group.addShape("rect", {
attrs: {
x: -w / 2,
y: -h / 2,
width: w, //200,
height: h, // 60
stroke: color,
radius: r,
fill: "#fff",
},
name: "main-box",
draggable: true,
});
group.addShape("rect", {
attrs: {
x: -w / 2,
y: -h / 2,
width: w, //200,
height: h / 2, // 60
fill: color,
radius: [r, r, 0, 0],
},
name: "title-box",
draggable: true,
});
// title text
group.addShape("text", {
attrs: {
textBaseline: "top",
x: -w / 2 + 8,
y: -h / 2 + 2,
lineHeight: 20,
text: cfg.id,
fill: "#fff",
},
name: "title",
});
cfg.children &&
group.addShape("marker", {
attrs: {
x: w / 2,
y: 0,
r: 6,
cursor: "pointer",
symbol: G6.Marker.collapse,
stroke: "#666",
lineWidth: 1,
fill: "#fff",
},
name: "collapse-icon",
});
group.addShape("text", {
attrs: {
textBaseline: "top",
x: -w / 2 + 8,
y: -h / 2 + 24,
lineHeight: 20,
text: "description",
fill: "rgba(0,0,0, 1)",
},
name: `description`,
});
return shape;
},
setState(name, value, item) {
if (name === "collapsed") {
const marker = item
.get("group")
.find((ele) => ele.get("name") === "collapse-icon");
const icon = value ? G6.Marker.expand : G6.Marker.collapse;
marker.attr("symbol", icon);
}
},
});
const container = document.getElementById("container");
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
// 实例化 Grid 插件
const grid = new G6.Grid();
const minimap = new G6.Minimap();
const graph = new G6.TreeGraph({
container: "container",
width,
height,
plugins: [grid, minimap], // 配置 Grid 插件和 Minimap 插件
modes: {
default: [
{
type: "collapse-expand",
onChange: function onChange(item, collapsed) {
console.log("onChange---", item);
// const data = item.getModel();
// data.collapsed = collapsed;
collapseSibNode(item, false);
return true;
},
},
"drag-canvas",
],
},
defaultNode: {
type: "card-node",
size: [100, 40],
},
defaultEdge: {
type: "cubic-horizontal",
style: {
endArrow: true,
// fill: "#389",
stroke: "#389",
},
},
layout: {
type: "indented",
direction: "LR",
dropCap: false,
indent: 200,
getHeight: () => {
return 20;
},
},
});
graph.data(data);
graph.render();
graph.fitCenter();
graph.fitView(60);
// // 1 默认展开两层节点，之后，重新渲染
// G6.Util.traverseTree(data, function (item) {
// if (item.depth > 0) {
// //collapsed为true时默认收起
// item.collapsed = true;
// }
// });
// graph.data(data);
// graph.render();
// graph.fitCenter();
// graph.fitView();
/*
**************************** */
/**
* @method: 点击node节点，展开此节点，收缩其他同级节点及其所有子节点
* @param {*} item 此节点
* @param {*} collapsed 收缩状态
*/
function collapseSibNode(item, collapsed) {
let farNode = item._cfg.parent && item._cfg.parent._cfg.id;
// 同级节点
let siblingNode;
// 当前有父节点
if (farNode) {
// 获取兄弟节点
siblingNode = item._cfg.parent._cfg.children;
if (siblingNode.length > 0 && siblingNode) {
collapseNode(siblingNode);
}
} else {
// 当前是根节点
collapseNode(item._cfg.children);
}
// 折叠展开节点
const data = item.get("model");
data.collapsed = collapsed;
}
/**
* @method: 递归收起节点
* @param {*} children
*/
function collapseNode(children) {
children.forEach((el) => {
const data = el.get("model");
let isChildren = el._cfg.children && el._cfg.children.length > 0;
if (isChildren) {
collapseNode(el._cfg.children);
// 先关闭子节点后关闭父节点
data.collapsed = true;
}
});
}
/*
**************************** */
if (typeof window !== "undefined")
window.onresize = () => {
if (!graph || graph.get("destroyed")) return;
if (
!container ||
!container.scrollWidth ||
!container.scrollHeight
)
return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
});
},
},
};
</script>
<style lang="scss" scoped>
.GsixBox {
width: 100%;
height: 100%;
}
</style>
四、ListaData.json
[
{
"Name": "一级水厂1",
"label": "一级水厂1",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 1,
"Time": "13:00",
"id": "Firstlid1",
"LID": "Firstlid1",
"ShowCode": "一级---1",
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
],
"children": [
{
"Name": "二级水厂1",
"label": "二级水厂1",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 2,
"Time": "13:00",
"id": "Firstlid1Secondlid1",
"LID": "Secondlid1",
"ShowCode": "一级---1---二级---1",
"children": [
{
"Name": "三级水厂1",
"label": "三级水厂1",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:00",
"id": "Firstlid1Secondlid1Thirdlid1",
"LID": "Thirdlid1",
"ShowCode": "一级---1---二级---1---三级---1",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid1Thirdlid1Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---1---三级---1---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid1Thirdlid1Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---1---三级---1---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid1Thirdlid1Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---1---三级---1---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid1Thirdlid1Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---1---三级---1---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂2",
"label": "三级水厂2",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:01",
"id": "Firstlid1Secondlid1Thirdlid2",
"LID": "Thirdlid2",
"ShowCode": "一级---1---二级---1---三级---2",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid1Thirdlid2Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---1---三级---2---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid1Thirdlid2Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---1---三级---2---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid1Thirdlid2Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---1---三级---2---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid1Thirdlid2Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---1---三级---2---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂3",
"label": "三级水厂3",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:02",
"id": "Firstlid1Secondlid1Thirdlid3",
"LID": "Thirdlid3",
"ShowCode": "一级---1---二级---1---三级---3",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid1Thirdlid3Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---1---三级---3---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid1Thirdlid3Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---1---三级---3---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid1Thirdlid3Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---1---三级---3---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid1Thirdlid3Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---1---三级---3---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "二级水厂2",
"label": "二级水厂2",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 2,
"Time": "13:01",
"id": "Firstlid1Secondlid2",
"LID": "Secondlid2",
"ShowCode": "一级---1---二级---2",
"children": [
{
"Name": "三级水厂1",
"label": "三级水厂1",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:00",
"id": "Firstlid1Secondlid2Thirdlid1",
"LID": "Thirdlid1",
"ShowCode": "一级---1---二级---2---三级---1",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid2Thirdlid1Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---2---三级---1---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid2Thirdlid1Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---2---三级---1---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid2Thirdlid1Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---2---三级---1---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid2Thirdlid1Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---2---三级---1---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂2",
"label": "三级水厂2",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:01",
"id": "Firstlid1Secondlid2Thirdlid2",
"LID": "Thirdlid2",
"ShowCode": "一级---1---二级---2---三级---2",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid2Thirdlid2Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---2---三级---2---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid2Thirdlid2Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---2---三级---2---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid2Thirdlid2Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---2---三级---2---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid2Thirdlid2Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---2---三级---2---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂3",
"label": "三级水厂3",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:02",
"id": "Firstlid1Secondlid2Thirdlid3",
"LID": "Thirdlid3",
"ShowCode": "一级---1---二级---2---三级---3",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid1Secondlid2Thirdlid3Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---1---二级---2---三级---3---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid1Secondlid2Thirdlid3Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---1---二级---2---三级---3---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid1Secondlid2Thirdlid3Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---1---二级---2---三级---3---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid1Secondlid2Thirdlid3Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---1---二级---2---三级---3---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
]
},
{
"Name": "一级水厂2",
"label": "一级水厂2",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 1,
"Time": "13:01",
"id": "Firstlid2",
"LID": "Firstlid2",
"ShowCode": "一级---2",
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
],
"children": [
{
"Name": "二级水厂1",
"label": "二级水厂1",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 2,
"Time": "13:00",
"id": "Firstlid2Secondlid1",
"LID": "Secondlid1",
"ShowCode": "一级---2---二级---1",
"children": [
{
"Name": "三级水厂1",
"label": "三级水厂1",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:00",
"id": "Firstlid2Secondlid1Thirdlid1",
"LID": "Thirdlid1",
"ShowCode": "一级---2---二级---1---三级---1",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid1Thirdlid1Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---1---三级---1---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid1Thirdlid1Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---1---三级---1---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid1Thirdlid1Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---1---三级---1---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid1Thirdlid1Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---1---三级---1---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂2",
"label": "三级水厂2",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:01",
"id": "Firstlid2Secondlid1Thirdlid2",
"LID": "Thirdlid2",
"ShowCode": "一级---2---二级---1---三级---2",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid1Thirdlid2Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---1---三级---2---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid1Thirdlid2Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---1---三级---2---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid1Thirdlid2Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---1---三级---2---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid1Thirdlid2Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---1---三级---2---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂3",
"label": "三级水厂3",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:02",
"id": "Firstlid2Secondlid1Thirdlid3",
"LID": "Thirdlid3",
"ShowCode": "一级---2---二级---1---三级---3",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid1Thirdlid3Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---1---三级---3---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid1Thirdlid3Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---1---三级---3---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid1Thirdlid3Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---1---三级---3---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid1Thirdlid3Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---1---三级---3---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "二级水厂2",
"label": "二级水厂2",
"Status": 0,
"Msg": [],
"IsFather": true,
"Depth": 2,
"Time": "13:01",
"id": "Firstlid2Secondlid2",
"LID": "Secondlid2",
"ShowCode": "一级---2---二级---2",
"children": [
{
"Name": "三级水厂1",
"label": "三级水厂1",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:00",
"id": "Firstlid2Secondlid2Thirdlid1",
"LID": "Thirdlid1",
"ShowCode": "一级---2---二级---2---三级---1",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid2Thirdlid1Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---2---三级---1---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid2Thirdlid1Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---2---三级---1---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid2Thirdlid1Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---2---三级---1---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid2Thirdlid1Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---2---三级---1---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂2",
"label": "三级水厂2",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:01",
"id": "Firstlid2Secondlid2Thirdlid2",
"LID": "Thirdlid2",
"ShowCode": "一级---2---二级---2---三级---2",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid2Thirdlid2Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---2---三级---2---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid2Thirdlid2Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---2---三级---2---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid2Thirdlid2Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---2---三级---2---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid2Thirdlid2Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---2---三级---2---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "三级水厂3",
"label": "三级水厂3",
"Status": 1,
"Msg": [],
"IsFather": true,
"Depth": 3,
"Time": "13:02",
"id": "Firstlid2Secondlid2Thirdlid3",
"LID": "Thirdlid3",
"ShowCode": "一级---2---二级---2---三级---3",
"children": [
{
"Name": "四级水厂1",
"label": "四级水厂1",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:00",
"id": "Firstlid2Secondlid2Thirdlid3Fourlid1",
"LID": "Fourlid1",
"ShowCode": "一级---2---二级---2---三级---3---四级---1",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂2",
"label": "四级水厂2",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:01",
"id": "Firstlid2Secondlid2Thirdlid3Fourlid2",
"LID": "Fourlid2",
"ShowCode": "一级---2---二级---2---三级---3---四级---2",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂3",
"label": "四级水厂3",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:02",
"id": "Firstlid2Secondlid2Thirdlid3Fourlid3",
"LID": "Fourlid3",
"ShowCode": "一级---2---二级---2---三级---3---四级---3",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
},
{
"Name": "四级水厂4",
"label": "四级水厂4",
"Status": 1,
"Msg": [],
"IsFather": false,
"Depth": 4,
"Time": "13:03",
"id": "Firstlid2Secondlid2Thirdlid3Fourlid4",
"LID": "Fourlid4",
"ShowCode": "一级---2---二级---2---三级---3---四级---4",
"children": [],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
],
"List": [
{
"Title": "浊度",
"Data": 0.23
},
{
"Title": "PH",
"Data": 3
},
{
"Title": "湿度",
"Data": 0.63
},
{
"Title": "COD",
"Data": 0.23
}
]
}
]
}
]五、GitHub源码 ：
五、GitHub源码 ：https://github.com/volodyan/vue_g6
https://github.com/volodyan/vue_g6
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)