跨象限阶梯瀑布图ECharts Gallery

20:11:45图表已生成
代码
var titleStyle = {
    fontSize: 14
};
var subjectsData = {
    "yearMonth": "2018年1-7月",
    "xData": [
        "指标1",
        "指标2",
        "指标3",
        "指标4",
        "指标5",
        "指标6",
        "指标7",
        "指标8",
        "指标9",
        "指标10",
        "指标11",
        "指标12",
        "指标13",
        "指标14",
        "指标15",
        "指标16"
    ],
    "yData": [74756, -5424, -19416, 2558, 615, 7997, -15708, -29782, 2848, -7974, -5777, -7055, -4145, 13120, 6490, 4571]
}

var myJson = [];
var updata = [];
var downdata = [];
var auxdata = []; //辅助1的数据，存放每个堆子的总数
var auxdataDown = []; //支出的辅助数据，当堆子跨y轴的正负区域的时候做的辅助
var auxdataUp = []; //支出的辅助数据，当堆子跨y轴的正负区域的时候做的辅助
formatStackData(subjectsData, myJson, updata, downdata, auxdata, auxdataDown, auxdataUp)

option = {
    title: {
        text: subjectsData.yearMonth + '财务费用',
        left: 'center',
        textStyle: titleStyle
    },
    toolbox: {
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    tooltip: { //提示框组件
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
            var tar;
            var tar2;
            if (params[3].value != '-') {
                tar = params[3]; //收入
            } else {
                tar = params[4]; //支出
            }
            var str;
            for (var i = 0; i < myJson.length; i++) {
                if (tar.name === myJson[i].xData) {
                    str = Math.abs(tar.value) + Math.abs(myJson[i].auxdataDown) + Math.abs(myJson[i].auxdataUp);
                }
            }
            return tar.name + '<br/>' + tar.seriesName + ' : ' + str;
        }
    },
    legend: {
        data: ['收入', '支出'],
        selectedMode: false, //禁用点击图表改变显示状态
        left: 10,
        top: 18
    },
    grid: {
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        axisLabel: {
            rotate: 40
        },
        data: subjectsData.xData
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        }
    },
    series: [{
            name: '辅助', //辅助1是总量数据，将主要柱状图按堆叠位置开始展示
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                    show: false
                }
            },
            data: auxdata
        },
        {
            name: '支出辅助', //支出辅助是当支出跨越y轴的正负轴的时候做的辅助
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#FF0033'
                },
                emphasis: {
                    show: false
                }
            },
            data: auxdataDown
        },
        {
            name: '收入辅助', //收入辅助是当收入跨越y轴的正负轴的时候做的辅助
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#33CC33'
                },
                emphasis: {
                    show: false
                }
            },
            data: auxdataUp
        },
        {
            name: '收入',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#33CC33'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: function(params) {
                        return formatNormal(params, myJson);
                    }
                }
            },
            data: updata
        },
        {
            name: '支出',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#FF0033'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'bottom',
                    formatter: function(params) {
                        return formatNormal(params, myJson);
                    }
                }
            },
            data: downdata
        }
    ]
};
//构造各个指标的数据
function formatStackData(subjectsData, myJson, updata, downdata, auxdata, auxdataDown, auxdataUp) {
    var myData = subjectsData.yData;
    var xData = subjectsData.xData;
    var sum = 0;
    for (var i = 0; i < myData.length; i++) {
        var sign = sum + myData[i];
        if (sign > 0) {
            if (myData[i] > 0) {
                if (sum < 0) {
                    //这种情况的时候柱子要从负数跨到正数，收入的时候会出现的情况，所以是收入辅助存放sum，其余辅助存放0
                    updata.push(sign);
                    auxdataUp.push(sum);
                    auxdataDown.push(0);
                    auxdata.push(0);
                } else {
                    updata.push(myData[i]);
                    auxdataUp.push(0);
                    auxdataDown.push(0);
                    auxdata.push(sum);
                }
                downdata.push('-');
            } else {
                auxdata.push(sign);
                updata.push('-');
                downdata.push(Math.abs(myData[i]));
                auxdataDown.push(0);
                auxdataUp.push(0);
            }
        } else {
            if (myData[i] > 0) {
                auxdata.push(sign);
                updata.push(-myData[i]);
                downdata.push('-');
                auxdataDown.push(0);
                auxdataUp.push(0);
            } else {
                updata.push('-');
                if (sum > 0) {
                    //这种情况的时候柱子要从正数跨到负数，支出数据的情况，所以这时候是支出辅助存放sum，其余辅助存放0
                    downdata.push(sign);
                    auxdataDown.push(sum);
                    auxdataUp.push(0);
                    auxdata.push(0);
                } else {
                    downdata.push(myData[i]);
                    auxdataDown.push(0);
                    auxdataUp.push(0);
                    auxdata.push(sum);
                }
            }
        }
        sum = sum + myData[i];

        //将各个分离的指标整理成json放入myJosn中
        var a = {
            xData: xData[i],
            auxdata: auxdata[i],
            auxdataUp: auxdataUp[i],
            auxdataDown: auxdataDown[i],
            updata: updata[i],
            downdata: downdata[i]
        };
        myJson.push(a);
    }
}
//控制数字显示的值
function formatNormal(params, myJson) {
    var str;
    for (var i = 0; i < myJson.length; i++) {
        if (params.name === myJson[i].xData) {
            str = Math.abs(params.value) + Math.abs(myJson[i].auxdataDown) + Math.abs(myJson[i].auxdataUp);
        }
    }
    return str;
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
