行业男女人员增减12月统计分析echarts 柱状配置项内容和展示

12月行业男女人员增减变化

              var chart_title = '行业';
        //图表X轴数据
        var Xdata = ["行业1", "行业2", "行业3", "行业4", "行业5", "行业6", "行业7", "行业8", "行业9", "行业10"];

        //图表项目
        var fp_key = ['男', '女', '总'];
        var fp_coler = ['#4A65EA','rgba(241, 109, 115, 1)', '#4AC9E9',  '#258df6', '#f5814b', '#6fce7d'];
        //图表项目数据
        var fp_nan = {
            1: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,],
            2: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,],
            3: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,],
            4: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            5: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,],
            6: [521, 388, 233, 309, 133, 308, 297, 283, 349, 273,],
            7: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            8: [580, 129, 173, 101, 310, 393, 386, 296, 366, 268,],
            9: [563, 396, 388, 108, 325, 120, 180, 292, 200, 309,],
            10: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163],
        };
        var fp_nv = {
            1: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,],
            2: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,],
            3: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,],
            4: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            5: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,],
            6: [521, 388, 233, 309, 133, 308, 297, 283, 349, 273,],
            7: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            8: [580, 129, 173, 101, 310, 393, 386, 296, 366, 268,],
            9: [563, 396, 388, 108, 325, 120, 180, 292, 200, 309,],
            10: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163],
        };
        var fp_val = {
            1: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,],
            2: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,],
            3: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,],
            4: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            5: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,],
            6: [521, 388, 233, 309, 133, 308, 297, 283, 349, 273,],
            7: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,],
            8: [580, 129, 173, 101, 310, 393, 386, 296, 366, 268,],
            9: [563, 396, 388, 108, 325, 120, 180, 292, 200, 309,],
            10: [300, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            11: [100, 350, 300, 250, 200, 150, 100, 150, 200, 250],
            12: [280, 128, 255, 254, 313, 143, 360, 343, 338, 163],
        };
        //图表月份
        var timeLineData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,];
         option = {
            baseOption: {
                backgroundColor:"#061740",
                timeline: {
                    show: true,
                    axisType: 'category',
                    tooltip: {
                        show: true,
                        formatter: function (params) {
                            return params.name + '月份数据统计';
                        }
                    },
                    autoPlay: true,
                    currentIndex: 10,
                    playInterval: 2000,
                    label: {
                        normal: {
                            show: true,
                            color: '#20dbfd',
                            interval: 'auto',
                            formatter: function (params) {
                                return params
                            }
                        },
                    },
                    lineStyle: {
                        show: true,
                        color: '#20dbfd'
                    },
                    itemStyle: {
                        show: true,
                        color: '#20dbfd'
                    },
                    /*                    checkpointStyle: {
                                            show: true,
                                            color: '#20dbfd'
                                        },*/
                    controlStyle: {
                        show: true,
                        color: '#20dbfd',
                        borderColor: '#20dbfd'
                    },
                    left: "0",
                    right: "0",
                    bottom: '0',
                    padding: [15, 0],
                    data: timeLineData,
                },
                title: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                },
                legend: {
                    data: fp_key,
                    top: 8,
                    right: '20%',
                    textStyle: {
                        color: '#fff',
                    },
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    //formatter: '{b}<br/>{a}: {c}人',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                grid: [{
                    show: false,
                    left: "2%",
                    top: 60,
                    bottom: 60,
                    containLabel: true,
                    width: '43%',
                }, {
                    show: false,
                    left: '50.5%',
                    top: 80,
                    bottom: 60,
                    width: '14%',
                }, {
                    show: false,
                    right: "2%",
                    top: 60,
                    bottom: 60,
                    containLabel: true,
                    width: '43%',
                },],

                xAxis: [
                    {
                        type: 'value',
                        triggerEvent: true,
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'top',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B2B2B2',
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1F2022',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                    {
                        gridIndex: 1,
                        show: false,
                    },
                    {
                        gridIndex: 2,
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'top',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B2B2B2',
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1F2022',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    }
                ],
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    position: 'right',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        margin: 8,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },

                    },
                    data: Xdata,
                }, {
                    gridIndex: 1,
                    type: 'category',
                    inverse: true,
                    position: 'left',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9D9EA0',
                            fontSize: 12,
                        },

                    },
                    data: Xdata.map(function (value) {
                        return {
                            value: value,
                            textStyle: {
                                align: 'center',
                            }
                        }
                    }),
                }, {
                    gridIndex: 2,
                    type: 'category',
                    inverse: true,
                    position: 'left',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: '#9D9EA0',
                            fontSize: 12,
                        },

                    },
                    data: Xdata,
                },],
                series: [],

            },
            options: [],
        };
        for (var i = 0; i < timeLineData.length; i++) {
            // option.baseOption.timeline.data.push(timeLineData[i]);
            option.options.push({
                title: {
                    text: timeLineData[i] + '月份统计',
                },
                series: [
                    {
                        name: fp_key[0],
                        type: 'bar',
                        stack: 'one',
                        barGap: 15,
                        barWidth: 15,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    color: '#fff',

                                    fontSize: 12,
                                },
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[0]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },
                        data: fp_nan[timeLineData[i]],
                    },
                    {
                        name: fp_key[1],
                        type: 'bar',
                        stack: 'one',
                        barGap: 15,
                        barWidth: 15,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    color: '#fff',

                                    fontSize: 12,
                                },
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[1]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },
                        data: fp_nv[timeLineData[i]],
                    },
                    {
                        name: fp_key[2],
                        stack: 'one',
                        type: 'bar',
                        barGap: 15,
                        barWidth: 15,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[2]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },
                        data: fp_val[timeLineData[i]],
                    },
                    {
                        name: fp_key[0],
                        stack: 'right',
                        type: 'bar',
                        barGap: 15,
                        barWidth: 15,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[0]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },

                        data: fp_nan[timeLineData[i]],
                    },
                    {
                        name: fp_key[1],
                        stack: 'right',
                        type: 'bar',
                        barGap: 15,
                        barWidth: 15,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                },
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[1]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },
                        data: fp_nv[timeLineData[i]],
                    },
                    {
                        name: fp_key[2],
                        stack: 'right',
                        type: 'bar',
                        barGap: 15,
                        barWidth: 15,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                },
                            },
                            emphasis: {
                                show: true,
                                position: 'inside',
                                offset: [0, 0],
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return fp_coler[2]
                                },
                                opacity: 1,

                            },
                            emphasis: {
                                opacity: 1,
                            },
                        },
                        data: fp_val[timeLineData[i]],
                    },
                ]
            });
        }