户口性质echarts 柱状配置项内容和展示

      var xData = ['东城', '西城', '朝阳', '丰台', '石景山', '海淀', '门头沟', '通州', '大兴', '昌平', '顺义', '房山', '怀柔', '平谷', '延庆', '密云', '经开'];
var data0 = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var data1 = [0, 30, 23, 15, 13, 32, 20, 10, 10, 20, 32, 35, 30, 20, 25, 30, 20]; //上衣
var data4 = [67, 56, 55, 49, 47, 25, 20, 15, 15, 10, 20, 26, 20, 20, 21, 22, 23]; //裤子

var data3 = [];
var data5 = [];
for (let i = 0; i < data1.length; i++) {
    data3.push(data1[i] + data4[i]);
}
for (let i = 0; i < data1.length; i++) {
    data5.push(data1[i]);
}

dom = 350;
barWidth = dom / 20;

option = {
    backgroundColor: '#000E1A', //背景色
    tooltip: {
        trigger: 'axis',
        borderColor: 'rgba(255,255,255,.3)',
        backgroundColor: 'rgba(13,5,30,.6)',
        textStyle: {
            color: 'white', //设置文字颜色
            fontSize: 12
        },
        borderWidth: 1,
        padding: 5,
        formatter: function (parms) {
            var str =
                '区域：' +
                parms[0].axisValue +
                '</br>' +
                parms[0].marker +
                '农业：' +
                parms[0].value +
                '</br>' +
                parms[1].marker +
                '非农业：' +
                parms[1].value;
            return str;
        },
    },
    textStyle: {
        color: '#C9C9C9',
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        selectedMode: false,
        right: '5',
        top: '5',
        itemWidth: 10,
        itemHeight: 6,
        textStyle: {
            color: '#ffffff',
            fontSize: 12,
        }
    },
    grid: {
        containLabel: true,
        left: '5',
        top: '5',
        bottom: '5',
        right: '5',
    },
    xAxis: {
        type: 'category',
        data: xData,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            margin: 10,
            interval: 0,
            textStyle: {
                fontFamily: 'Microsoft YaHei',
                color: '#FFF',
            },
            fontSize: 12,
            formatter: function(value) {
                return value.split('').join('\n');
            }
        },
    },
    yAxis: [
        {
            type: 'value',
            max: 120,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
        },
        {
            show: false
        },
    ],
    series: [
        {
            type: 'bar',
            name: '农业',
            type: 'bar',
            data: data1,
            stack: 'zs',
            barWidth: barWidth,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(251,217,31,0.5)',
                        },
                        {
                            offset: 1,
                            color: '#fbd91f',
                        },
                    ],
                },
            },
        },

        {
            name: '非农业',
            type: 'bar',
            data: data4,
            stack: 'zs',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(0,158,255,0.5)',
                        },
                        {
                            offset: 1,
                            color: '#009BFF',
                        },
                    ],
                },
            },
        },

        {
            data: data0,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#fbd91f',
                },
            },
        },
        {
            data: data1,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            zlevel: 2,
        },
        {
            data: data1,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            zlevel: 2,
        },
        {
            data: data5,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [0, barWidth * 0.5],
            zlevel: 2,
        },
        {
            data: data5,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#fbd91f',
                },
            },
        },
        {
            data: data3,
            type: 'pictorialBar',
            barWidth: barWidth,
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            zlevel: 2,
            itemStyle: {
                normal: {
                    color: '#009BFF',
                },
            },
        },
    ],
};