复杂的柱状图

app.title = '项目部物资采购统计表';

function suspensionFormatter(params, option) {
    console.log('ddd', params)
    var result = '';
    var result1 = '';
    var result2 = '';
    var series = option.series;
    var year_xAxis = option.xAxis[0].data; //第一个X轴的值
    var dataIndex = params[0].dataIndex;
    var years = 3;
    if (params.length > 0) {
        result += params[0].name + "</br>";
    }
    for (var i = 0; i < years; i++) {
        var index = dataIndex * years + i;
        result += year_xAxis[i] + "</br>";
        for (var p in series) {
            if (p >= '3')
                continue;

            result += series[p].name + "：" + series[p].data[index] + "</br>"
        }
    }
    result1 = params[1].seriesName + "：" + params[1].value + "</br>"
    result2 = params[2].seriesName + "：" + params[2].value + "</br>"

    return result + result1 + result2;
}
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            return suspensionFormatter(params, option);
        }
    },
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    legend: {
        orient: 'horizontal',
        left: 'center',
        itemWidth: 14,
        itemHeight: 8,
        itemStyle: {
            borderRadius: 50 // 设置图例图标的边角弧度为5
        },
        formatter: ['{a|{name}}'].join('\n'),
        textStyle: {
            fontSize: 12,
            color: '#aacbde',
            height: 8,
            rich: {
                a: {
                    verticalAlign: 'bottom',
                },
            },
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '30%',
        containLabel: true
    },
    xAxis: [{
             position: 'bottom',
        type: 'category',
        axisPointer: {
            type: 'none',
            show: false
        },

        axisLabel: {
            interval: 0,
            margin: 10,
            rotate: 70,
            color: '#aacbde',
            textStyle: {
                fontSize: 12
            },
        },
        data: [
            '2014-1', '2015-1', '2016-1',
            '2014-2', '2015-2', '2016-2',
            '2014-3', '2015-3', '2016-3',
            '2014-4', '2015-4', '2016-4',
            '2014-5', '2015-5', '2016-5',
            '2014-6', '2015-6', '2016-6',
            '2014-7', '2015-7', '2016-7',
            '2014-8', '2015-8', '2016-8',
            '2014-9', '2015-9', '2016-9',
            '2014-10', '2015-10', '2016-10',
            '2014-11', '2015-11', '2016-11',
            '2014-12', '2015-12', '2016-12',
        ],
        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#4068b7',
                width: 2
            }
        },
        axisTick: {
            show: false
        },
    },
    {
        position: 'bottom',
        xAxisIndex: 0,
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        axisTick: {
             show: false,
            inside: true,
            length: 50
        },
        axisLine: {
            show: false,
            lineStyle: {
                type: 'solid',
                color: '#4068b7',
                width: 1
            }
        },
        axisLabel: {
           show: false,

        },
    }

    ],
    yAxis: [
        {
            name: '个',
            min: 0,
            nameTextStyle: {
                color: '#aacbde',
                fontSize: 13,
                padding: [20, 20, 0, 0]
            },
            axisLabel: {
                color: '#aacbde',

                textStyle: {
                    fontSize: 12
                },
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#5A75FF',
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#5078c8'
                }
            }
        },
        {
            type: 'value',
            min: -100,
            max: 100,
            // alignTicks: true,
            splitLine: {
                show: false
            },
            name: '',
            nameTextStyle: {
                color: '#fff',
                align: 'left'
            },

            axisLabel: {
                color: '#5A75FF',
                formatter: function (a) {
                    return a.toFixed(0) + '%';
                }
            }
        }],
    series: [{
        name: "联通",
        yAxisIndex: 0,
        type: "bar",
        barWidth: 12,
        "barGap": "55.5",
        stack: 'total',
        itemStyle: {
            color: "#ff7302",
        },
        data: [
            1, 1, 1,
        2, 1, 1,
        3, 1, 1,
        4, 1, 1,
        5, 1, 1,
        6, 1, 1,
        7, 1, 1,
        8, 1, 1,
        9, 1, 1,
        10, 1, 1,
        11, 1, 1,
        12, 1, 1,
           ]
    },
    {
        name: "移动",
        yAxisIndex: 0,
        type: "bar",
        barWidth: 12,
        stack: 'total',
        itemStyle: {
            borderWidth: 1,
            color: "#3b8efe",
        },
        data: [500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222,]
    },
    {
        name: "电信",
        yAxisIndex: 0,
        type: "bar",
        stack: 'total',
        barWidth: 12,
        itemStyle: {
            borderWidth: 1,
            color: "#01ffa1",
        },
        data: [500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222, 500, 302, 301, 222,]
    },
    {
        type: 'bar',
        xAxisIndex: 1,
        label: {
            normal: {
                show: false,
            }
        },
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    {
        name: "21vs22",
        xAxisIndex: 1,
        yAxisIndex: 1,
        type: "line",
        smooth: false,
        itemStyle: {
            color: "#ff9c00",
        },
        data: [97, 66, 34, 99, 67, -46, 23, 64, 0, 43, 66, 3]
    },
    {
        name: "22vs23",
        xAxisIndex: 1,
        yAxisIndex: 1,
        type: "line",
        smooth: false,
        itemStyle: {
            color: "#fb96ff",
        },
        data: [46, 66, 0, 99, 0, -46, 0, 68, 0, 88, 55, 33]
    },
    ]
};