网站首页 > 技术文章 正文
概要说明
瀑布图采用绝对值与相对值结合的方式,来表达数个特定数值之间的数量变化关系。这种效果的图形能够在反映数据多少的同时,更能直观反映出数据的增减变化过程。
瀑布图的特点说明如下:
优势:展示两个数据点之间的演变过程。
劣势: 没有柱状图的使用场景多,适用情况单一。
数据要求:一个分类值,一个指标值。数据之间要有演变过程 。
适用场景: 适用于解释两个数据值之间的差异是由哪几个因素贡献,每个因素的贡献比例,展示两个数据值之间的演变过程。例如:某公司当年的现金流情况,从年初的现金流,经过当年各种增加、减少的情况,最终演变成年底的现金流。
实现方案
业务场景描述:
统计一周的收支增减变化情况。
数据结构:
收支情况有正负之分,而且是一个随时间变动的数据流,需要有一个最终的汇总情况,表示最后的余额。
定制要点:
将"日期"字段作为"分类(X)轴","收支情况"字段作为"指标(Y)轴"。
预览效果:
关于柱条的起点和终点说明如下:
· 收入柱条的下方表示起点,上方表示终点。
· 支出柱条的上方表示起点,下方表示终点。
柱条的高度:表示该日期所对应的值,后一个柱条是以前一个柱条的终点高度作为起点,最后一个柱条终点所在高度对应的值就是收入支出后的余额。
如图:
9月2日对应的柱条表示收入,下方为起点,上方为终点,柱条的高度代表收入值为253;
9月3日对应的柱条表示支出,上方为起点,下方为终点,柱条的高度代表支出的值为18。
9月3日的柱条是以9月2日的柱条的终点作为起点。
从9月1日到9月3日收入支出余额为9月3日柱条终点即下方对应高度的值。
猜你喜欢
- 2024-12-26 小程序echarts和分包使用 小程序echarts动态获取数据
- 2024-12-26 【开源资讯】ECharts 发布第 100 个版本 4.7.0
- 2024-12-26 Vue+Echarts可视化大屏系统前端雷达图设计(附代码)
- 2024-12-26 给大家开源分享上一回基于JS、ECharts的可视化大屏
- 2024-12-26 目前见过最牛的一个SpringBoot商城项目(附源码)还有人没用过吗
- 2024-12-26 8、echarts 和 chart 对比(必会) echarts和highcharts
- 2024-12-26 echarts架构是如何设计的? echarts技术
- 2024-12-26 快收藏前端干货!antv初识:antv和echarts的对比
- 2024-12-26 数据可视化—Echarts图表应用 数据可视化图表制作工具
- 2024-12-26 基于 Vue3 + ECharts 的拖拽式低代码数据可视化开发平台
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)