双向立体柱状图echarts 柱状配置项内容和展示

      var data = [
    {
        name: '新市镇',
        value1: 4,
        value2: -4,
    },
    {
        name: '渡舟镇',
        value1: 9,
        value2: -9,
    },
    {
        name: '双龙镇',
        value1: 20,
        value2: -20,
    },
    {
        name: '云集镇',
        value1: 32,
        value2: -32,
    },
    {
        name: '龙河镇',
        value1: 13,
        value2: -13,
    },
    {
        name: '石堰镇',
        value1: 43,
        value2: -43,
    },
    {
        name: '葛兰镇',
        value1: 62,
        value2: -62,
    },
    {
        name: '八颗镇',
        value1: 4,
        value2: -40,
    },
    {
        name: '江南镇',
        value1: 13,
        value2: -13,
    },
    {
        name: '洪湖镇',
        value1: 70,
        value2: -70,
    },
];
var xData = [],
    list1 = [],
    list2 = [],
    max = 0,
    min = 0;
data.forEach(({ name, value1, value2 }) => {
    xData.push(name);
    list1.push(value1);
    list2.push(value2);
    max = value1 > max ? value1 : max;
    min = value2 < min ? value2 : min;
});
var maxList = new Array(data.length).fill(max * 1.1);
var minList = new Array(data.length).fill(min * 1.1);

option = {
    backgroundColor: 'rgb(15,54,95)',
    grid: [
        {
            show: false,
            left: '120px',
            top: '10%',
            bottom: '55%',
            width: '80%',
        },
        {
            show: false,
            left: '120px',
            top: '50%',
            bottom: '55%',
            width: '80%',
        },
        {
            show: false,
            left: '120px',
            top: '55%',
            bottom: '10%',
            width: '80%',
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                color:"#fff",
            },
            splitLine: {
                show: false,
            },
        },
        {
            gridIndex: 1,
            show: false,
        },
        {
            gridIndex: 2,
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                color:"#fff",
            },
            splitLine: {
                show: false,
            },
        },
    ],
    xAxis: [
        {
            gridIndex: 0,
            show: false,
            data: xData,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        {
            gridIndex: 1,
            type: 'category',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                interval: 0,
                align: 'auto',
                verticalAlign: 'middle',
                textStyle: {
                    color:"#fff",
                    fontSize: 16,
                    align: 'center',
                },
            },
            data: xData,
        },
        {
            gridIndex: 2,
            show: false,
            data: xData,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '飞行员',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: list1,
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                        {
                            offset: 0,
                            color: 'rgba(210,210,210,0.3)',
                        },
                        {
                            offset: 1,
                            color: '#5BFCF4',
                        },
                    ]),
                    opacity: 0.8,
                },
            },
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: 'rgba(255,255,255,0.1)',
                },
            },
            silent: true,
            barWidth: 50,
            barGap: '-175%',
            data: maxList,
        },
        {
            name: '上部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [20, 8],
            symbolOffset: [-7.5, -4],
            symbolPosition: 'end',
            z: 12,
            color: '#5BFCF4',
            data: list1,
        },
        {
            name: '底部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [20, 8],
            symbolOffset: [-7.5, 4],
            z: 12,
            color: '#5BFCF4',
            data: list1,
        },
        {
            name: '乘务员',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: list2,
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                        {
                            offset: 0,
                            color: 'rgb(255,245,217)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(255,200,57)',
                        },
                    ]),
                },
            },
        },
        {
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
                normal: {
                    color: 'rgba(255,255,255,0.1)',
                },
            },
            silent: true,
            barWidth: 50,
            barGap: '-175%',
            data: minList,
        },
        {
            name: '上部圆',
            xAxisIndex: 2,
            yAxisIndex: 2,
            type: 'pictorialBar',
            silent: true,
            symbolSize: [20, 8],
            symbolOffset: [-7.5, 4],
            symbolPosition: 'end',
            z: 12,
            color: 'rgb(255,245,217)',
            data: list2,
        },
        {
            name: '底部圆',
            xAxisIndex: 2,
            yAxisIndex: 2,
            type: 'pictorialBar',
            silent: true,
            symbolSize: [20, 8],
            symbolOffset: [-7.5, -4],
            z: 12,
            color: 'rgb(255,200,57)',
            data: list2,
        },
    ],
};