网站首页 > 技术文章 正文
概要说明
瀑布图采用绝对值与相对值结合的方式,来表达数个特定数值之间的数量变化关系。这种效果的图形能够在反映数据多少的同时,更能直观反映出数据的增减变化过程。
瀑布图的特点说明如下:
优势:展示两个数据点之间的演变过程。
劣势: 没有柱状图的使用场景多,适用情况单一。
数据要求:一个分类值,一个指标值。数据之间要有演变过程 。
适用场景: 适用于解释两个数据值之间的差异是由哪几个因素贡献,每个因素的贡献比例,展示两个数据值之间的演变过程。例如:某公司当年的现金流情况,从年初的现金流,经过当年各种增加、减少的情况,最终演变成年底的现金流。
实现方案
业务场景描述:
统计一周的收支增减变化情况。
数据结构:
收支情况有正负之分,而且是一个随时间变动的数据流,需要有一个最终的汇总情况,表示最后的余额。
定制要点:
将"日期"字段作为"分类(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 的拖拽式低代码数据可视化开发平台
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)