pictorialBar柱状颗粒比例图echarts pictorialBar配置项内容和展示

柱状颗粒组成的男女占比关系图

      var uploadedDataURLm = "/asset/get/s/data-1577417356639-vTU6A83C.png";
var uploadedDataURLf = "/asset/get/s/data-1577417351926-_UCv3D1y.png";
const barData = [36.4]
const lineData = [100]
option = {
    grid: {
        top: '70%',
        left: '5%',
        right: '5%'
    },
    tooltip: {
        show: false
    },
    xAxis: {
        show: false
    },
    yAxis: {
        data: [],
        show: false
    },
    graphic: [{
            type: 'image',
            id: 'logo',
            right: '10%',
            top: '30%',
            z: 10,
            bounding: 'raw',
            style: {
                image: uploadedDataURLf,
                width: 200,
                height: 200,
                opacity: 1
            }
        },
        {
            type: 'image',
            id: 'logo1',
            left: '10%',
            top: '30%',
            z: 10,
            bounding: 'raw',

            style: {
                image: uploadedDataURLm,
                width: 200,
                height: 200,
                opacity: 1
            }
        },
        {
            type: 'text',
            id: 'text1',
            left: '16%',
            top: '60%',
            z: 10,
            bounding: 'raw',

            style: {
                text: '36.4%',
                color: '#1EBF8E',
                fontSize: 24
            }
        },
        {
            type: 'text',
            id: 'text2',
            right: '16%',
            top: '60%',
            z: 10,
            bounding: 'raw',
            style: {
                text: '63.6%',
                color: '#1B87ED',
                fontSize: 24
            }
        },
    ],
    series: [{ // 蓝柱下面方块
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: 20,
            symbolOffset: [0, -12],
            itemStyle: {
                normal: {
                    color: '#1EBF8E'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: 20,
            data: lineData,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30
            }
        },
        { // 蓝柱
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '20',
            symbolOffset: [0, -12],
            symbolRepeat: true,
            symbolSize: 20,
            // symbolClip: true,
            data: barData,
            label: {
                normal: {
                    show: false
                }
            },
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        },
        { // 蓝柱下面方块
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '20',
            symbolOffset: [0, -38],
            itemStyle: {
                normal: {
                    color: '#1EBF8E'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: 20,
            data: lineData,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30
            }
        },
        { // 蓝柱
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '20',
            symbolOffset: [0, -38],
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#1B87ED'
                }
            },
            symbolRepeat: true,
            symbolSize: 20,
            // symbolClip: true,
            data: barData,
            label: {
                normal: {
                    show: false
                }
            },
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        },
        { // 蓝柱
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: 20,
            symbolOffset: [0, -12],
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#1B87ED'
                }
            },
            symbolRepeat: true,
            symbolSize: 20,
            // symbolClip: true,
            data: barData,
            label: {
                normal: {
                    show: false
                }
            },
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        },
        { // 蓝柱下面方块
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '20',
            symbolOffset: [0, -64],
            itemStyle: {
                normal: {
                    color: '#1EBF8E'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: 20,
            data: lineData,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30
            }
        },
        { // 蓝柱
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '20',
            symbolOffset: [0, -64],
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#1B87ED'
                }
            },
            symbolRepeat: true,
            symbolSize: 20,
            // symbolClip: true,
            data: barData,
            label: {
                show: false
            },
            symbolClip: true,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        }
    ]
};