如何使用echart的Graph图实现一个流程控制图
前言:
最近接到一个新需求,需要写一个新模块,这个模块主要是用于查看当前每个生产计划的完成情况,然后所有的生产计划都列在了表格里,而流程控制图用于直观展示选中的生产计划的完成进度
1、首先看一下这个生产计划的流程控制图大概的样子
2、我们分析一下后端给出的数据接口(这是根据事先约定好的数据)
data属性对应后台返回的数据,是一个数组,数组里面的元素对应流程控制图的每一个节点,id字段表示当前节点的id号,用于关联其他节点,next-process字段是一个数组,用于表示该节点的子节点,process表示当前节点计划完成了多少,pre-process字段在这里不是表示该节点的所有父级节点
3、echart的Graph图及其配置
Graph图的原始配置,我稍微做了更改,就是links属性中的每一个元素代表了节点间的关系,由于生产计划的名称可能存在重名的情况,所以我们改用节点元素在data属性中的索引来建立节点之间的联系
option = {title: {text: 'Graph 简单示例'},tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series : [{type: 'graph',layout: 'none',symbolSize: 50,roam: true,label: {normal: {show: true}},edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [4, 10],edgeLabel: {normal: {textStyle: {fontSize: 20}}},data: [{name: '节点1',x: 300, //节点在图上的x坐标y: 300 //节点在图上的y坐标}, {name: '节点2',x: 800,y: 300}, {name: '节点3',x: 550,y: 100}, {name: '节点4',x: 550,y: 500}],// links: [],links: [{source: 0,target: 1,symbolSize: [5, 20],label: {normal: {show: true}},lineStyle: {normal: {width: 5,curveness: 0.2}}}, {source: 1,target: 0,label: {normal: {show: true}},lineStyle: {normal: { curveness: 0.2 }}}, {source: 0,target: 2}, {source: 1,target: 2}, {source: 1,target: 3}, {source: 0,target: 3}],lineStyle: {normal: {opacity: 0.9,width: 2,curveness: 0}}}]
};
该段配置对应的原始Graph图
4、我的思考
我开始的想法是既然给出了next-process字段,也就知道了当前节点的下级子节点,所以我开始的想法也是从上往下构建树就行了,首先构建这棵树我的想法是由于节点之间的联系依赖于节点在data属性对应的数组中的索引(也就是在data属性中的位置),所以我们只能一级一级的找出同级节点,然后给每一级同级节点编号,比如第一级的节点有三个元素掘金计划,爬山计划,看书计划,所以这三个节点属于同一个级别,但是我这里想说的是,登山计划理应属于第二级的节点,但是你找第一级节点肯定是找那些没有父级节点的节点,所以这里就有问题了,登山计划和掘金计划,爬山计划,看书计划成了同一级别,这样计算位置肯定会有问题,所以我决定从下往上拼树就可以完美避开这个问题,但是从小网上拼树就一些小地方需要特别处理,就是纵坐标的位置怎么确立,我首先就找出了最后一个节点,我怎么知道把它的y坐标设置成多少,放在哪里?所以我灵机一动,我第一次循环只把所有的节点分出级别,然后第二次循环再根据级别确定y轴的坐标位置并添加节点信息,第三次循环找出所有节点之间的联系,给它们加上指向箭头
5、具体实现
echart原始配置数据:
具体实现(这三幅图是一个函数):
有错或者有更好的实现方式欢迎指正和交流!!!
如何使用echart的Graph图实现一个流程控制图相关推荐
- 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
- ADT: Graph 图
ADT: Graph 图 文章目录 ADT: Graph 图 简介 参考 正文 名词解释 图的定义和表示 抽象接口 两种存储实现 邻接矩阵(Adjacent-Matrix) 邻接链表(Adjacent ...
- Echart实现折线图
前言 之前参加数学建模的时候需要将数据展示成图表形式,当时知道主流是MATLAB,pathon也可以,但是却不知道JS也可以绘制图表,甚至可以做出像地图.雷达图等更高级的东西. Echart ECha ...
- 腾讯 Angel Graph 图计算框架在智能风控中的应用
本文约6800字,建议阅读15+分钟 本文为你分享腾讯的姜亚松老师的图计算框架Angel Graph. [ 导读 ] 图计算在智能风控场景有着广泛的应用,但是图的规模和计算的复杂度往往会制约落地的使用 ...
- CUDA Graph图详解
CUDA图 CUDA Graphs 为 CUDA 中的工作提交提供了一种新模型.图是一系列操作,例如内核启动,由依赖关系连接,独立于其执行定义.这允许一个图被定义一次,然后重复启动.将图的定义与其执行 ...
- python使用matplotlib可视化3D曲面图、曲面图表示一个指定的因变量y与两个自变量x和z之间的函数关系
python使用matplotlib可视化3D曲面图.曲面图表示一个指定的因变量y与两个自变量x和z之间的函数关系 目录
- boost::graph模块实现一个只读隐式加权图的简单示例的测试程序
boost::graph模块实现一个只读隐式加权图的简单示例的测试程序 实现功能 C++实现代码 实现功能 boost::graph模块实现一个只读隐式加权图的简单示例的测试程序 C++实现代码 #i ...
- C语言实现Graph图的算法(附完整源码)
C语言实现Graph图的算法 C语言实现Graph图的算法完整源码(定义,实现) C语言实现Graph图的算法完整源码(定义,实现) #ifndef _GRAPH_H #define _GRAPH_H ...
- matlab两个图共用一个x轴_SCI论文写作MATLAB出图(2)
接着SCI论文写作MATLAB出图(1)(以下介绍均由出图(1)代替),现在来讲第二部分,曾经也在出图这块走了不少弯路,现在呢,对出图这部分有一些心得,对有需求的同学略尽微薄之力吧.另外,提一嘴,当时 ...
最新文章
- 并发编程基础篇——第二章(如何创建线程)
- SpringBoot微信公众号授权访问认证文件部署
- python获取cookies
- 获取redis实例绑定cpu的情况
- 【TensorFlow-windows】keras接口——BatchNorm和ResNet
- C++:17---函数指针
- Python:List、tuple、dict、set
- java 随机手机验证码_基于Java随机生成手机短信验证码的实例代码|chu
- vite创建vue3,8月版本
- python模型预测_《Python机器学习——预测分析核心算法》——1.5 构建预测模型的流程...
- 清华大学操作系统OS学习(三)——启动、中断、异常和系统调用
- Linux的匿名访问Samba
- 知名互联网公司网站架构图
- 基于java的薪资工资管理系统
- Android6.0之AMS启动App下篇
- 图文笔记,带你走进《未来简史》(11-15)
- 再劫面包店(村上春树)
- 赵明magic4升鸿蒙,荣耀Magic新机生猛:折叠屏+骁龙888+鸿蒙系统,赵明:超越华为...
- 基本函数依赖和候选键_[总结]关系数据库设计基础(函数依赖、无损连接性、保持函数依赖、范式、……)...
- 在同一网段和不同网段通信的区别