记录echarts绘制流程图，及自定义样式

最新推荐文章于 2024-05-01 18:39:22 发布
最新推荐文章于 2024-05-01 18:39:22 发布
阅读量1.3k 收藏 2
点赞数
文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45952434/article/details/129318285
版权
效果图

在这里插入图片描述

<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);
面向百度丶CV开发
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts画工作流（流程图）
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
使用echarts创建流程图
热门推荐
mermanangel的博客
05-26 1万+
使用echarts创建流程图使用echarts创建流程图 使用echarts创建流程图 为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。 首先创建一个div，为echarts准备一个具备大小的Dom <div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div> <script type="text/javascript"> // 基
echars实现全流程图
weixin_51935690的博客
01-08 4608
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 1.vue引入echars 终端下载echarts npm install echarts@4.8.0 --save 2.在main.js中引入 import echarts from "echarts" Vue.prototype.$echarts = echarts; 3.在组件中代码如下(已标注) <template> <div class="server"> &lt
vue echarts动态效果流水线流程图
weixin_44006009的博客
03-15 1185
vue echarts流程图流水线效果功能。
前端ECharts可视化框架快速上手详解(一)(1)
2401_84437530的博客
05-01 184
我们除了柱形图还可以选择其他不同的图表，唯一不同的步骤就在于步骤三指定图表的配置项和数据官网 - 示例。里面有很多的图表，我们点进去只需要将代码替换我们步骤三的代码即可。下面有记录详细流程。2、ECharts通用配置2.1、title标题组件标题组件，包含主标题和副标题text：String类型，主标题文本，支持使用\n换行textStyle：Object类型，文字样式标题边框： number类型，标题的边框线宽：number/Array，圆角半径：标题的边框颜色标题位置。
echarts 流程图
yangchuangxyz的博客
04-22 6106
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
用echarts绘制流程图
liuli0927的博客
07-20 3663
当这两个流程图进行切换展示时，一定要使用v-show。
echarts+流程图
weixin_44727080的博客
08-22 4186
前言： echarts+流程图 效果图： 实现源码： var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...
china.js，ECharts绘制地图
11-12
《ECharts绘制地图：以china.js为例》 在信息技术领域，数据可视化是至关重要的工具，它可以帮助我们理解和解析复杂的数据信息。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、...
vue+echarts实现饼图的自定义标签.zip
04-22
7. **自定义样式**: 除了基本配置项外，还可以通过CSS调整图表容器和ECharts的默认样式，使其与项目设计风格保持一致。 通过以上步骤，我们就能在Vue项目中成功地使用ECharts实现一个自定义标签的饼图。这个项目...
echarts全国省市地图js.rar
08-14
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上动态渲染交互式的2D、3D图表。在"echarts全国省市地图js.rar"这个压缩包中...
Echarts重庆地图
03-23
它提供了丰富的图表类型，如折线图、柱状图、饼图以及地图等，支持自定义交互和美观的视觉效果。在这个“Echarts 重庆地图”压缩包中，我们有两个关键文件：一个 HTML 文件和一个 JSON 文件，它们是实现 ECharts ...
河南省echarts地图资源
12-30
【正文】 ...同时，ECharts的灵活性和扩展性也允许你自定义地图样式、添加交互效果，以满足各种复杂需求。在实际项目中，开发者还可以结合后端数据接口，实现地图数据的实时更新和动态加载，提升用户体验。
echart流程图-工序及状态
yefeng1308的博客
09-17 1799
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 9952
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
weixin_44006009的博客
03-22 352
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 2732
实现如下，可以横着排竖着排都可以。
echarts绘制流程图
YLiu77的博客
11-02 3740
先上效果图： js代码： // 图标坐标，预先调好每个点的坐标 var nodes = [{ x: 100, y: 950, nodeName: '', svgPath: './Images/tank.png', symbolSize: 80, position: 'inside' }, { x: 300, y: 950, nodeName: '', svgPath: './Images/tank.png',
echarts绘制云南地图
最新发布
05-17
5.绘制地图，使用 Echarts 提供的API，可以设置地图样式、区域颜色、边界线等。 6.添加交互功能，比如设置鼠标悬浮时弹出提示框，或者添加点击事件等。 7.最后通过Echarts的实例方法setOption将配置好的参数传入，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值