找回密码
 立即注册

QQ登录

只需一步,快速开始

vickdracula 活字格认证

高级会员

16

主题

193

帖子

1039

积分

高级会员

积分
1039

活字格高级认证活字格认证圣诞拼拼乐

vickdracula 活字格认证
高级会员   /  发表于:2021-8-4 11:26  /   查看:4104  /  回复:7
最近在弄一个类似ERP中的业务单据联查场景 image.png651469726.png


之前想用树形图实现,后来详细思考发现业务实际情况不是树形,所以突然想到了桑基图来实现


桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图。它是一种特定类型的流程图,右图中延伸的分支的宽度对应数据流量的大小,通常应用于能源、材料成分、金融等数据的可视化分析。


思路:
1.利用桑基图体现单据流向。
2.数据源自己处理,转JSON拼接成字符串转成对象
3.利用JS结合ECHARTS展现

参考资料:https://echarts.apache.org/examp ... l#chart-type-sankey
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=93516


实现效果

image.png281851195.png
1.录入数据,数据源可根据项目自行处理
2.获取业务单据节点
3拼接参数
4.汇总OPTION值
5.展现效果。


单据联查.fgcc

391.27 KB, 下载次数: 50

售价: 5 金币  [记录]

评分

参与人数 4金币 +1000 满意度 +15 收起 理由
13794930121 + 5
Chelsey.Wang + 1000 赞一个!
lovert + 5
amtath + 5

查看全部评分

7 个回复

倒序浏览
lovert
银牌会员   /  发表于:2021-8-4 14:25:14
推荐
本帖最后由 lovert 于 2021-8-4 14:29 编辑

highcharts图表也可以作为补充,前几天用到了一个双对数坐标图,感觉echarts画出来的不是很满意,就用了highcharts图表
highcharts图表和echarts图表用法几乎一模一样,可以去看看,highcharts图表是商业图表,商用收费,个人学习免费 image.png678026427.png
回复 使用道具 举报
lovert
银牌会员   /  发表于:2021-8-4 15:36:04
板凳
忘了告诉你,如果你用echarts图表,那个 image.png415390014.png
可以不用上传,活字格本身的图表就是echarts图表,一级自己在系统加载了,你只要用就行了
回复 使用道具 举报
vickdracula活字格认证
高级会员   /  发表于:2021-8-4 15:53:50
地板
本帖最后由 vickdracula 于 2021-8-4 16:19 编辑
lovert 发表于 2021-8-4 15:36
忘了告诉你,如果你用echarts图表,那个
可以不用上传,活字格本身的图表就是echarts图表,一级自己在系统 ...

THK U不过删掉之后就不好用了活字格自带那个好像里边没含桑基图
回复 使用道具 举报
遇见未知的自己
银牌会员   /  发表于:2021-8-6 14:51:15
5#

回复 使用道具 举报
sz_xd
金牌服务用户   /  发表于:2024-6-7 09:01:04
6#
发现这位大神分享的桑基图使用不错的,非常适合做ERP类似项目的参考,且提供工程示例,非常暖心的!谢谢!



回复 使用道具 举报
牧野流云
初级会员   /  发表于:2024-7-1 14:35:15
7#
学习一下,谢谢分享!
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2024-7-2 11:10:03
8#
image.png626302795.png
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部