目录
前言一、安装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 文件中导入:
2.使用示例import G6 from '@antv/g6';
代码如下(示例):
1 创建容器需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器,通常为
div
标签。G6 在绘制时会在该容器下追加canvas
标签,然后将图绘制在其中。2 数据准备引入 G6 的数据源为 JSON 格式的对象。该对象中需要有 id 和 children 字段,否则会在渲染或者做收缩节点 *** 作时报错。
注意:1、生成树形图的数据中必须包含id 和 children 两个字段.2、id的数据类型必须为字符串类型.:3 创建关系图const data= { "id": "Firstlid1", "children": [ { "id": "Firstlid1Secondlid1", "children": [ { "id": "Firstlid1Secondlid1Thirdlid1", "children": [ { "id": "Firstlid1Secondlid1Thirdlid1Fourlid1", "children": [] } ] } ] } ] }
创建关系图(实例化)时,至少需要为图设置容器、宽和高。
4 配置数据源,渲染const graph = new G6.TreeGraph({ container: 'container', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身 width: 800, // Number,必须,图的宽度 height: 500, // Number,必须,图的高度 });
graph.data(data); // 读取 Step 2 中的数据源到图上 graph.render(); // 渲染图
三、完整代码
四、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_g6https://github.com/volodyan/vue_g6
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)