奉天全省疫毙男女人数echarts 配置项内容和展示

          var xData = ['承德县', '铁岭县', '义州', '新民府', '广宁县', '镇安县', '昌图府', '绥中县', '法库厅', '兴京府', '奉化县', '抚顺县', '怀德县', '本溪县', '开源县', '锦县', '康平县', '锦西厅', '辽中县', '宁远州', '辽源州', '西安县', '西丰县', '辽阳州', '彰武县', '海龙府', '东平县', '盘山厅'];
    var lastYearData = [2170, 86, 89, 422, 140, 83, 515, 42, 273, 8, 254, 60, 534, 31, 157, 25, 135, 14, 57, 45, 14, 86, 78, 37, 9, 7, 4, 15, ];
    var thisYearData = [401, 11, 84, 180, 85, 24, 103, 28, 83, , 108, 25, 140, , 63, 8, 63, 11, 22, 34, 12, 27, 5, 16, 1, 4, , 12, ];
    let legend = ['女性', '男性'];
    var background = "#363636"; //背景 
    let textColor = "#fff";
    let lineColor = "rgba(255,255,255,0.2)";
    let colors = [{
            borderColor: "rgba(227,161,96,1)",
            start: "rgba(227,161,96,0.8)",
            end: "rgba(227,161,96,0.3)"
        },
        {
            borderColor: "rgba(0,222,255,1)",
            start: "rgba(0,222,255,0.3)",
            end: "rgba(0,222,255,0.8)"
        },
    ];

    var option = {
        baseOption: {
                    title: {
            text: '奉天全省疫毙男女人数',
            left:"center"
        },
            backgroundColor: background,
            timeline: {
                show: false,
                top: 0,
                data: []
            },
            legend: {
                top: '5%',
                right: '5%',
                itemWidth: 20,
                itemHeight: 5,
                // itemGap: 343,
                icon: 'horizontal',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 20,
                },
                data: legend
            },
            grid: [{
                show: false,
                left: '3%',
                top: '14%',
                bottom: '5%',
                containLabel: true,
                width: '43%'
            }, {
                show: false,
                left: '50%',
                top: '17.5%',
                bottom: '4.5%',
                width: '100%',
                containLabel: false,
            }, {
                show: false,
                right: '4%',
                top: '14%',
                bottom: '5%',
                containLabel: true,
                width: '43%'
            }],
            xAxis: [{
                type: 'value',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'top',
                axisLabel: {
                    show: true,
                    color: textColor
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
            }, {
                gridIndex: 1,
                show: false
            }, {
                gridIndex: 2,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'top',
                axisLabel: {
                    show: true,
                    color: textColor
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
            }],
            yAxis: [{
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },

                axisTick: {
                    show: true
                },
                axisLabel: {
                    show: false
                },
                data: xData
            }, {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    padding: [0, 0, 0, 5],
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 13
                    },
                    align: "center"

                },
                data: xData.map(function(value) {
                    return {
                        value: value,
                        textStyle: {
                            align: 'center'
                        }
                    }
                })
            }, {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: true
                },
                axisLabel: {
                    show: false

                },
                data: xData
            }],
            series: []

        },
        options: []
    }

    option.options.push({
        series: [{
                name: "女性",
                type: "bar",
                barWidth: 12,
                stack: "1",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: colors[0].start
                            },
                            {
                                offset: 1,
                                color: colors[0].end
                            }
                        ]),
                    }
                },
                label: {
                    normal: {
                        show: false,
                    }
                },
                data: lastYearData,
                //animationEasing: "elasticOut"
            },
            {
                name: "男性",
                type: "bar",
                stack: "2",
                barWidth: 12,
                xAxisIndex: 2,
                yAxisIndex: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: colors[1].start
                            },
                            {
                                offset: 1,
                                color: colors[1].end
                            }
                        ]),
                    }
                },
                label: {
                    normal: {
                        show: false,
                    }
                },
                data: thisYearData,
                // animationEasing: "elasticOut"
            },

        ]
    });