echarts 柱状配置项内容和展示

配置项如下
      option = {
    backgroundColor: '#031245',
    color: [
        '#63caff',
        '#49beff',
        '#03387a',
        '#03387a',
        '#03387a',
        '#6c93ee',
        '#a9abff',
        '#f7a23f',
        '#27bae7',
        '#ff6d9d',
        '#cb79ff',
        '#f95b5a',
        '#ccaf27',
        '#38b99c',
        '#93d0ff',
        '#bd74e0',
        '#fd77da',
        '#dea700',
    ],
    grid: {
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 10,
        top: 40,
    },
    xAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
            interval: 0,
        },
        axisTick: {
            lineStyle: {
                color: '#384267',
            },
            show: true,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: '#384267',
                width: 1,
                type: 'dashed',
            },
            show: true,
        },
        data: ['0点~2点', '3点~5点', '6点~8点', '0点~2点', '3点~5点', '6点~8点', '0点~2点', '3点~5点'],
        type: 'category',
    },
    yAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
        },
        axisTick: {
            lineStyle: {
                color: '#384267',
                width: 1,
            },
            show: true,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#384267',
                type: 'dashed',
            },
        },
        axisLine: {
            lineStyle: {
                color: '#384267',
                width: 1,
                type: 'dashed',
            },
            show: true,
        },
        name: '',
    },
    series: [
        {
            data: [200, 85, 112, 275, 305, 415, 741, 405],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 30,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#0b9eff',
                        },
                        {
                            offset: 1,
                            color: '#63caff',
                        },
                    ],
                },
            },
            label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff',
            },
        },
        {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [30, 15],
        },
        {
            data: [200, 85, 112, 275, 305, 415, 741, 405],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 12],
            zlevel: 2,
        },
        {
            data: [741, 741, 741, 741, 741, 741, 741, 741],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 30,
            barGap: '-100%',
            zlevel: -1,
        },
        {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [30, 15],
            zlevel: -2,
        },
        {
            data: [741, 741, 741, 741, 741, 741, 741, 741],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 12],
            zlevel: -1,
        },
    ],
    tooltip: {
        trigger: 'axis',
        show: false,
    },
};

    
截图如下