用echarts绘制瀑布图

瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解，如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图，瀑布图的优势在于：拆解项较多时，瀑布图通过数字的标记仍可清晰辨识，而饼图在分解项大于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 id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '深圳月最低生活费组成（单位:元）',
                subtext: '数据来自ExcelHome',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[0];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品费用']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {  //设置正常情况下柱子的样式
                            //barBorderColor: 'rgba(0,0,0,0)',  //设置柱子边框的颜色
                            barBorderColor:'rgba(20,20,0,0.5)',
                            barBorderWidth: 5,  //设置柱子边框的宽度
                            //color: 'rgba(0,0,0,0)'  //设置柱子的颜色
                            color:'rgba(0,220,0,0.8)'
                        },
                        emphasis: {  //设置鼠标滑过时柱子的样式
                            barBorderColor: 'rgba(0,0,0,0)',  //设置鼠标滑动到柱子边框的颜色
                            barBorderWidth: 25,  //设置鼠标滑动到柱子边框的宽度
                            color: 'rgba(0,0,0,0)'  //设置鼠标滑动到柱子的颜色
                        }
                    },
                    data: [0, 1700, 1400, 1200, 300, 0]
                },
                {
                    name: '生活费',
                    type: 'bar',  //设置柱状图
                    stack: '总量',  //设置堆积
                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [2900, 1200, 300, 200, 900, 300]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>