瀑布图是柱状图的特例，适用于展示复杂结构的分解。相较于饼图，当分解项多时，瀑布图能更清晰地呈现细节。本文以深圳月最低生活费为例，演示如何利用echarts绘制瀑布图，并提供了关键的itemStyle代码段，通过调整颜色透明度实现瀑布效果。
瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解，如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图，瀑布图的优势在于：拆解项较多时，瀑布图通过数字的标记仍可清晰辨识，而饼图在分解项大于5时会不易辨别。 利用深圳月最低生活费组成数据绘制瀑布图，如图所示
绘制瀑布图与一般柱状图的代码差别不大，最为关键的代码是itemStyle代码块。itemStyle代码块设置了柱子堆叠部分或堆叠部分边框的颜色，将每根柱子堆叠部分的颜色设置为透明色。 如果需要将颜色设置成不透明，那么需要改变一下代码“barBorderColor:'rgba (20,20,0,0.5)'”和“color:'rgba (0,220,0,0.8)'”，得到的效果如图所示。此时，已看不到瀑布的效果。
如图所示
源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div
最低0.47元/天 解锁文章
扫一扫
1603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
