效果图
<div id="echartsBox" :key="indexKey"></div>
import * as echarts from "echarts";
const option = {
"tooltip": {
"trigger": "item",
"formatter": "{b}",
"show": false
},
"grid": {
"show": false,
"top": "10px",
"right": "10%",
"bottom": "10px",
"left": "10px"
},
"series": [
{
"roam": true,
"type": "tree",
"lineStyle": {
"normal": {
"color": "#CCCCCC",
"type": "dashed",
"width": 1
}
},
"edgeShape": "polyline",
"name": "树图",
"data": [
{
"name": "质量留痕上报",
"key": null,
"value": null,
"type": null,
"dataList": [
{
"name": "工序名称: 浇筑混凝土",
"key": "工序名称",
"value": "浇筑混凝土",
"type": null,
"dataList": null,
"children": null
},
{
"name": "留痕时间: 2023-03-03 09:25:37",
"key": "留痕时间",
"value": "2023-03-03 09:25:37",
"type": null,
"dataList": null,
"children": null
},
{
"name": "留痕人员: 管理员",
"key": "留痕人员",
"value": "管理员",
"type": null,
"dataList": null,
"children": null
}
],
"children": [
{
"name": "形象进度自动上报",
"key": null,
"value": null,
"type": null,
"dataList": [
{
"name": "设计量: 1根",
"key": "设计量",
"value": "1根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "本次自动上报: 1根",
"key": "本次自动上报",
"value": "1根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前开累完成量: 1根",
"key": "当前开累完成量",
"value": "1根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前剩余量: 0根",
"key": "当前剩余量",
"value": "0根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前开累完成率: 100%",
"key": "当前开累完成率",
"value": "100%",
"type": null,
"dataList": null,
"children": null
},
{
"name": "BIM可视化",
"key": null,
"value": null,
"type": "bim",
"dataList": null,
"children": null
}
],
"children": [
{
"name": "产值进度自动上报",
"key": null,
"value": null,
"type": null,
"dataList": [
{
"name": "本次自动上报产值（万元）: 6.0889",
"key": "本次自动上报产值（万元）",
"value": "6.0889",
"type": null,
"dataList": null,
"children": null
},
{
"name": "总产值（万元）: 6.0889",
"key": "总产值（万元）",
"value": "6.0889",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前开累产值（万元）: 6.0889",
"key": "当前开累产值（万元）",
"value": "6.0889",
"type": null,
"dataList": null,
"children": null
}
],
"children": null,
"label": {
"backgroundColor": "#ffffff",
"color": "black",
"formatter": "{title| 产值进度自动上报}\n{hr|}\n{name0| 本次自动上报产值（万元）: 6.0889}\n{name1| 总产值（万元）: 6.0889}\n{name2| 当前开累产值（万元）: 6.0889}",
"rich": {
"name0": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name1": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name2": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"title": {
"color": "black",
"fontSize": 14,
"fontWeight": 400,
"width": "100%",
"backgroundColor": "#F2F4F6",
"padding": [
10,
10,
10,
10
]
},
"hr": {
"fontSize": 10,
"borderColor": "#E2E6EC",
"width": "100%",
"borderWidth": 0.5,
"height": 0
}
}
}
},
{
"name": "关键节点自动上报：4#混凝土浇筑",
"key": null,
"value": null,
"type": null,
"dataList": [
{
"name": "计划结束时间: 2023-03-10",
"key": "计划结束时间",
"value": "2023-03-10",
"type": null,
"dataList": null,
"children": null
},
{
"name": "关联构件数: 1",
"key": "关联构件数",
"value": "1",
"type": null,
"dataList": null,
"children": null
},
{
"name": "本次自动上报: 1",
"key": "本次自动上报",
"value": "1",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前开累完成: 1",
"key": "当前开累完成",
"value": "1",
"type": null,
"dataList": null,
"children": null
},
{
"name": "当前开累完成率: 100%",
"key": "当前开累完成率",
"value": "100%",
"type": null,
"dataList": null,
"children": null
},
{
"name": "关键节点状态: 已完成",
"key": "关键节点状态",
"value": "已完成",
"type": null,
"dataList": null,
"children": null
},
{
"name": "实际结束时间: 2023-03-03",
"key": "实际结束时间",
"value": "2023-03-03",
"type": null,
"dataList": null,
"children": null
}
],
"children": null,
"label": {
"backgroundColor": "#ffffff",
"color": "black",
"formatter": "{title| 关键节点自动上报：4#混凝土浇筑}\n{hr|}\n{name0| 计划结束时间: 2023-03-10}\n{name1| 关联构件数: 1}\n{name2| 本次自动上报: 1}\n{name3| 当前开累完成: 1}\n{name4| 当前开累完成率: 100%}\n{name5| 关键节点状态: 已完成}\n{name6| 实际结束时间: 2023-03-03}",
"rich": {
"name0": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name1": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name2": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name3": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name4": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name5": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name6": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"title": {
"color": "black",
"fontSize": 14,
"fontWeight": 400,
"width": "100%",
"backgroundColor": "#F2F4F6",
"padding": [
10,
10,
10,
10
]
},
"hr": {
"fontSize": 10,
"borderColor": "#E2E6EC",
"width": "100%",
"borderWidth": 0.5,
"height": 0
}
}
}
},
{
"name": "安全风险:4#桩基安全风险",
"key": null,
"value": null,
"type": null,
"dataList": [
{
"name": "分险控制级别: 基坑风险",
"key": "分险控制级别",
"value": "基坑风险",
"type": null,
"dataList": null,
"children": null
},
{
"name": "风险等级: III",
"key": "风险等级",
"value": "III",
"type": null,
"dataList": null,
"children": null
},
{
"name": "风险类型: 基坑风险",
"key": "风险类型",
"value": "基坑风险",
"type": null,
"dataList": null,
"children": null
},
{
"name": "安全受控状态: 总部级",
"key": "安全受控状态",
"value": "总部级",
"type": null,
"dataList": null,
"children": null
},
{
"name": "开始量: 0根",
"key": "开始量",
"value": "0根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "结束量: 1根",
"key": "结束量",
"value": "1根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "本次关联上报量: 1根",
"key": "本次关联上报量",
"value": "1根",
"type": null,
"dataList": null,
"children": null
},
{
"name": "风险状态: 未实施",
"key": "风险状态",
"value": "未实施",
"type": null,
"dataList": null,
"children": null
}
],
"children": null,
"label": {
"backgroundColor": "#ffffff",
"color": "black",
"formatter": "{title| 安全风险:4#桩基安全风险}\n{hr|}\n{name0| 分险控制级别: 基坑风险}\n{name1| 风险等级: III}\n{name2| 风险类型: 基坑风险}\n{name3| 安全受控状态: 总部级}\n{name4| 开始量: 0根}\n{name5| 结束量: 1根}\n{name6| 本次关联上报量: 1根}\n{name7| 风险状态: 未实施}",
"rich": {
"name0": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name1": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name2": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name3": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name4": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name5": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name6": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name7": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"title": {
"color": "black",
"fontSize": 14,
"fontWeight": 400,
"width": "100%",
"backgroundColor": "#F2F4F6",
"padding": [
10,
10,
10,
10
]
},
"hr": {
"fontSize": 10,
"borderColor": "#E2E6EC",
"width": "100%",
"borderWidth": 0.5,
"height": 0
}
}
}
}
],
"label": {
"backgroundColor": "#ffffff",
"color": "black",
"formatter": "{title| 形象进度自动上报}\n{hr|}\n{name0| 设计量: 1根}\n{name1| 本次自动上报: 1根}\n{name2| 当前开累完成量: 1根}\n{name3| 当前剩余量: 0根}\n{name4| 当前开累完成率: 100%}\n{name5| BIM可视化}",
"rich": {
"name0": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name1": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name2": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name3": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name4": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name5": {
"color": "#2f88ff",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"title": {
"color": "black",
"fontSize": 14,
"fontWeight": 400,
"width": "100%",
"backgroundColor": "#F2F4F6",
"padding": [
10,
10,
10,
10
]
},
"hr": {
"fontSize": 10,
"borderColor": "#E2E6EC",
"width": "100%",
"borderWidth": 0.5,
"height": 0
}
}
}
}
],
"label": {
"backgroundColor": "#ffffff",
"color": "black",
"formatter": "{title| 质量留痕上报}\n{hr|}\n{name0| 工序名称: 浇筑混凝土}\n{name1| 留痕时间: 2023-03-03 09:25:37}\n{name2| 留痕人员: 管理员}",
"rich": {
"name0": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name1": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"name2": {
"color": "black",
"align": "left",
"padding": [
15,
5,
5,
5
]
},
"title": {
"color": "black",
"fontSize": 14,
"fontWeight": 400,
"width": "100%",
"backgroundColor": "#F2F4F6",
"padding": [
10,
10,
10,
10
]
},
"hr": {
"fontSize": 10,
"borderColor": "#E2E6EC",
"width": "100%",
"borderWidth": 0.5,
"height": 0
}
}
}
}
],
"top": "10px",
"left": "10px",
"right": "30%",
"bottom": "10px",
"initialTreeDepth": -1,
"label": {
"normal": {
"position": "center",
"verticalAlign": "middle",
"backgroundColor": "#ffffff",
"borderWidth": 1,
"borderColor": "#E2E6EC"
}
},
"expandAndCollapse": false,
"animationDuration": 550,
"animationDurationUpdate": 750
}
]
}
console.log(option, "option");
myChart && myChart.setOption(option, true);
