效果图
<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);
