3d柱状图echarts pictorialBar配置项内容和展示

      // mock数据
const dataArr = {
    xdata: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
    vaccination: [1000, 1300, 1200, 800, 600, 700, 900],
    unvaccinated: [700, 800, 900, 500, 300, 400, 500],
    unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300],
    rateDataOne: [98, 96, 97, 92, 94, 95, 100],
    rateDataTwo: [88, 86, 87, 82, 84, 85, 95],
}

// tooltip
const tooltip = { 
    trigger: "axis",
    textStyle: { fontSize: '100%' },
    formatter: params => {
        let rander = params.map(item => item.seriesType !== "pictorialBar" ? `<div>${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value + "%"}</div>` : '').join('')
        return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `
    }
}
const legend = {
    data: ['应接种', '已完成第一次接种', '已完成第二次接种', '完成第一次接种率', '完成第二次接种率'],
    textStyle: { fontSize: 14, color: '#fff'},
    itemWidth: 25,
    itemHeight: 15,
    itemGap: 15,
    bottom: '5%',
    selectedMode: false
}
const grid = { top: '18%', left: '10%', right: '6%', bottom: '25%'}
// xAxis
const xAxis = { 
    axisTick: { show: true },
    axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
    axisLabel: { textStyle: { fontSize: 12, color: '#fff'  }, },
    data: dataArr.xdata
}

// yAxis
const yAxis = [{ 
    axisTick: { show: false },
    axisLine: { show: false, },
    splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
    axisLabel: { textStyle: { fontSize: 16, color: '#fff' } }
},{
    show: true,
    max: 100,
    splitLine: { show:false },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { 
        textStyle: { fontSize: 16, color: '#fff' },
        formatter: params => {
            return `${params}%`
        }
    }
}]

// series
const series = [{
    z: 1,
    name: '上部1',
    type: 'pictorialBar',
    symbolPosition: 'end',
    data: dataArr.vaccination,
    symbol : 'diamond',
    symbolOffset: ['-50%', '-50%'],
    symbolSize: [29, 19],
    itemStyle: {
        borderColor: '#2fffa4',
        color: '#2fffa4'
    },
},{
    z: 1,
    type: 'bar',
    name: '应接种',
    barWidth: 30,
    barGap: '-50%',
    data: dataArr.vaccination,
    itemStyle: {
        color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [
                { offset: 0, color: 'rgba(29, 245, 160, .7)' }, 
                { offset: 0.5, color: 'rgba(29, 245, 160, .7)' }, 
                { offset: 0.5, color: 'rgba(29, 245, 160, .3)' }, 
                { offset: 1, color: 'rgba(29, 245, 160, .3)' }
            ]
        }
    },
},{
    z: 2,
    name: '上部1',
    type: 'pictorialBar',
    symbolPosition: 'end',
    data: dataArr.unvaccinated,
    symbol : 'diamond',
    symbolOffset: [0, '-50%'],
    symbolSize: [29, 19],
    itemStyle: {
        borderColor: '#32ffee',
        color: '#32ffee'
    },
},{
    z: 2,
    type: 'bar',
    name: '已完成第一次接种',
    barWidth: 30,
    data: dataArr.unvaccinated,
    itemStyle: {
        color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [
                { offset: 0, color: 'rgba(50, 255, 238, .7)' }, 
                { offset: 0.5, color: 'rgba(50, 255, 238, .7)' }, 
                { offset: 0.5, color: 'rgba(50, 255, 238, .3)' }, 
                { offset: 1, color: 'rgba(50, 255, 238, .3)' }
            ]
        }
    },
}, {
    z: 3,
    name: '上部1',
    type: 'pictorialBar',
    symbolPosition: 'end',
    data: dataArr.unvaccinatedTwo,
    symbol : 'diamond',
    symbolOffset: ['50%', '-50%'],
    symbolSize: [29, 19],
    itemStyle: {
        borderColor: '#ffd11a',
        color: '#ffd11a'
    },
},{
    z: 3,
    type: 'bar',
    name: '已完成第二次接种',
    barWidth: 30,
    data: dataArr.unvaccinatedTwo,
    itemStyle: {
        color: {
            type: 'linear',
            x: 0, x2: 1, y: 0, y2: 0,
            colorStops: [
                { offset: 0, color: 'rgba(255, 209, 26, .7)' }, 
                { offset: 0.5, color: 'rgba(255, 209, 26, .7)' }, 
                { offset: 0.5, color: 'rgba(255, 209, 26, .3)' }, 
                { offset: 1, color: 'rgba(255, 209, 26, .3)' }
            ]
        }
    },
}, {   
    z: 9,
    yAxisIndex: 1,
    name: '完成第一次接种率', type: 'line',
    symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
    symbolSize: [10, 10],
    color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5'}],
        global: false // 缺省为 false
    },
    lineStyle: { color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5'}],
        global: false // 缺省为 false
    }}, 
    // 修改的是线下区域的颜色
    areaStyle: { 
        color: new echarts.graphic.LinearGradient(
        // 右/下/左/上
        0, 0, 0, 1,[
            { offset: 0, color: 'rgba(50, 255, 238, .1)' },
            { offset: 1, color: 'transparent' }
        ])
    },
    label: {
        show: true,
        position: 'insideBottomLeft',
        formatter: params => {
            return `${params.value}%`
        },
        textStyle: { fontSize: 16, color: '#32ffee' } 
    },
    data: dataArr.rateDataOne
}, {   
    z: 9,
    yAxisIndex: 1,
    name: '完成第二次接种率', type: 'line',
    symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
    symbolSize: [10, 10],
    color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}],
        global: false // 缺省为 false
    },
    lineStyle: { color: { 
        type: 'linear',x: 1, y: 0, x2: 0, y2: 0,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}],
        global: false // 缺省为 false
    }}, 
    // 修改的是线下区域的颜色
    areaStyle: { 
        color: new echarts.graphic.LinearGradient(
        // 右/下/左/上
        0, 0, 0, 1,[
            { offset: 0, color: 'rgba(255, 209, 26, .2)' },
            { offset: 1, color: 'transparent' }
        ])
    },
    label: {
        show: true,
        position: 'insideBottomRight',
        formatter: params => {
            return `${params.value}%`
        },
        textStyle: { fontSize: 16, color: '#ffd11a' } 
    },
    data: dataArr.rateDataTwo
}]
option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor: 'rgba(0, 0, 0, .7)' }