象形柱图-性别分布echarts pictorialBar配置项内容和展示

      let icon = 'path://M512.584639,219.893708c40.41173,0.258019,73.19961-32.274913,73.199609-72.557634,0-40.025725-32.78788-72.559681-73.199609-72.559681-40.473163,0-73.196538,32.533956-73.196538,72.559681,0,40.089206,32.723375,72.557634,73.196538,72.557634z,m73.330666,16.396499H439.129058c-55.266258,0-91.39098,48.28336-91.390981,94.203594v220.945238c0,42.847553,60.780905,42.847553,60.780905,0V347.144224h11.782872v555.564273c0,59.179548,82.417649,57.316077,84.337434,0V582.569248h15.696162V902.96754c3.391108,60.650871,84.340506,54.817796,84.340506-0.258019V347.144224h9.800631v204.234406c0,42.837314,62.696594,42.837314,62.696594,0V330.433391c0.126962-45.72979-36.116531-94.143184-91.257876-94.143184z'

option = {
    backgroundColor: '#012248',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        'formatter': '{b0}: {c0}%'
    },
    grid: {
        containLabel: true,
        height: '200px',
        width: '500px',
        left: 'center',
        top: 'center',
    },
    xAxis: {
        max: 100,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['男', '女'],
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            // margin: 10,
            fontSize: 20,
            color: 'white'
        },
        axisPointer: {
            label: {
                show: true,
                margin: 100
            }
        }
    },
    series: [{
            type: 'pictorialBar',
            symbolRepeat: 'fixed',
            symbolMargin: '6!',
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [3, 0],
                    formatter: (param) => {
                        return (param.value).toFixed(0) + '%'
                    },
                    textStyle: {
                        fontSize: 20,
                        color: 'white'
                    }
                }
            },
            symbolClip: true,
            symbolSize: [14, 30],
            symbolPosition: 'start',
            // symbolOffset: [
            //   10,
            //   0
            // ],
            symbolBoundingData: 100,
            data: [{
                value: 50,
                symbol: icon,
                itemStyle: {
                    color: '#1DDBF9'
                }
            }, {
                value: 40,
                symbol: icon,
                itemStyle: {
                    color: '#ff5983'
                }
            }],
            z: 10
        },
        {
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    opacity: 0.2
                }
            },
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '6!',
            symbolSize: [14, 30],
            symbolBoundingData: 100,
            symbolPosition: 'start',
            // symbolOffset: [
            //   10,
            //   0
            // ],
            data: [{
                value: 100,
                symbol: icon,
                itemStyle: {
                    color: '#1DDBF9'
                }
            }, {
                value: 100,
                symbol: icon,
                itemStyle: {
                    color: '#ff5983'
                }
            }],
            z: 5
        }
    ]
}