echarts带背景阴影的柱状图设置

echarts图表，带背景阴影渐变的柱状图

const datas = [10, 23, 55, 67];
function max(datas) {
    var max = datas[0];
    for (var i = 0; i < datas.length; i++) {
        if (max < datas[i]) {
            max = datas[i];
        }
    }
    return max;
}
// 背景xdata  渐变色柱状图   间隔色 两种  你可以设置多种
var bgData = [];
for (var i = 0; i < datas.length; i++) {
    bgData.push(max(datas) + 40);
}
getSymbolData = (datas) => {
    let arr = [];
    for (var i = 0; i < datas.length; i++) {
        arr.push({
            value: datas[i],
            symbolPosition: 'end',
        });
    }
    return arr;
};
option = {
    backgroundColor: '#000F32',
    grid: {
        left: '8%',
        right: '10%',
        top: '20%',
        bottom: '15%',
    },
    xAxis: [
        {
            axisLine: {
                show: false, //you边线条
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
                fontSize: 20,
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu'],
        },
        {
            data: datas,
            axisLine: {
                show: false, //背景线条
                lineStyle: {
                    color: '#CED5E1',
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
    ],
    yAxis: [
        {
            position: 'left',
            type: 'value',
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false, //左边线条
            },
            axisLabel: {
                //左轴汉字
                show: false,
            },
        },
    ],
    series: [
        {
            type: 'bar',
            data: datas,
            label: {
                show: true,
                position: 'top', // 汉字位于上方
                padding: 40, // 汉字距离柱状图间距
                color: '#fff',
                fontSize: 18,
                fontWeight: 800,
            },
            itemStyle: {
                color: '#1F77D7',
            },
            barWidth: 32,
        },
        {
            type: 'pictorialBar',
            symbol:'image://图片地址',
            symbolSize: [85, 3],
            symbolOffset: [1, -2],
            z: 12,
            itemStyle: {
                normal: {
                    color: '#fff',
                },
            },
            data: getSymbolData(datas),
        },
        {
            type: 'bar',
            xAxisIndex: 1,
            data: bgData,
            itemStyle: {
                normal: {
                    // barBorderRadius: 20,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 1,
                            color: '#082858',
                        },
                        {
                            offset: 0.5,
                            color: '#000F32',
                        },
                        {
                            offset: 0.4,
                            color: '#000F32',
                        },
                        {
                            offset: 0.1,
                            color: '#082858',
                        },
                    ]),
                },
            },
            z: 1,
        },
    ],
};