共计 7581 个字符，预计需要花费 19 分钟才能阅读完成。
效果图
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);
原文地址: 记录 echarts 绘制流程图，及自定义样式
正文完
