横向3d柱形图echarts pictorialBar配置项内容和展示

横向3d柱形图，展示相关数据

      var barWidth = 100,
    symbolSize = [25, barWidth],
    totalVal = 15000,
    centerVal = 8170;

var colorList = [

    '#C1232B',

];
option = {
    // backgroundColor: '#0e202d',
    tooltip: {
        show: false
    },
    xAxis: {
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false,
            textStyle: {
                color: 'red'
            }
        },
        splitLine: {
            show: false
        },
    },
    yAxis: {
        data: [""],
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [{
        name: '最后面',
        type: 'pictorialBar',
        symbolSize: symbolSize,
        symbolPosition: 'end',
        symbolOffset: ['50%', 0],
        z: 12,
        itemStyle: {
            normal: {
                color: function(params) {

                    // build a color map as your need.

                    return colorList[params.dataIndex]

                },
            }
        },
        zlevel: 2,
        data: [totalVal]
    }, {
        name: '最前面',
        type: 'pictorialBar',
        symbolSize: symbolSize,
        symbolPosition: 'end',
        symbolOffset: ['50%', 0],
        z: 12,
        itemStyle: {
            normal: {
                color: function(params) {

                    // build a color map as your need.

                    return colorList[params.dataIndex]

                },
            }
        },
        zlevel: 1,
        data: [centerVal]
        // data: [{
        //     value: '100%',
        //     symbolPosition: 'end'
        // }]
    }, {
        name: '中间',
        type: 'pictorialBar',
        symbolSize: symbolSize,
        symbolOffset: ['-50%', 0],
        z: 12,
        zlevel: 1,
        itemStyle: {
            normal: {
                color: function(params) {

                    return colorList[params.dataIndex]

                },
            }
        },
        data: [100]
    }, {
        type: 'bar',
        itemStyle: {
            normal: {
                color: '#25A4FF',
                opacity: 1
            }
        },
        zlevel: 1,
        silent: true,
        barWidth,
        label: {
            show: true,
            formatter: [`{a|${centerVal}}`, `{b|/${totalVal}}`].join(""),
            rich: {
                a: {
                    color: '#54FF00'
                },
                b: {
                    color: '#999999'
                }
            },
            fontWeight: 600,
            position: "insideTopRight",
            offset: [40, -20],
            color: "#00B9FF",

        },

        // barGap: '-100%', // Make series be overlap
        data: [centerVal]
    }, {
        type: 'bar',
        itemStyle: {
            normal: {
                // color: '#25A4FF',
                color: '#c6e0f2',
                // opacity: 0.2,
            }
        },
        label: {
            show: true,
            formatter: '当前客流负载',
            position: "insideTopLeft",
            offset: [0, -20],
            color: "#00B9FF",

        },
        silent: true,
        barWidth,
        barGap: '-100%', // Make series be overlap
        data: [totalVal]
    }]
};