性别比例echarts 配置项内容和展示

      option = {
    title: {
        text: "性别比例",
        subtext: "{b|" +
            "总数[" +
            "}" +
            "{a|" +
            1000 +
            "}" +
            "{b|" +
            "]" +
            "}",
        subtextStyle: {
            fontSize: 14,
            rich: {
                a: {
                    color: "#ffff66",
                    fontSize: 14
                },
                b: {
                    color: "#61c1ed",
                    padding: [0, 0, 0, 0],
                    fontSize: 14
                }
            }
        },
        left: "center",
        textStyle: {
            color: "#ADD1FF"
        }
    },
    tooltip: {
        trigger: "item",
        formatter: (params, ticket, callback) => {
            return `${params.seriesName}<br />${params.name}：${params.value}(${((params.value / 1000)* 100).toFixed(2)}%)`
        }
    },
    xAxis: {
        type: "value",
        splitLine: { //垂直x轴的线
            show: false
        },
        axisLine: { //x轴线
            show: false
        },
        axisLabel: { //x坐标标语
            show: false
        },
        axisTick: { //刻度
            show: false
        }
    },
    yAxis: [{
        type: "category",
        data: ["男", "女"],
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: -4,
            textStyle: {
                color: "#fff",
                fontSize: 16
            }
        }
    }],
    series: [{
            name: "性别比例",
            type: "pictorialBar",
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 22.5,
            symbolPosition: "start",
            symbolOffset: [20, 0],
            data: [{
                    value: 235, //男
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAZRJREFUSA3tVLFKA0EQnbkEY1KFEDQYrCxsVARTRa21TZFf0EL8BysbsRErKwNqoWhnIViIWioqWCiWmihEsBECJnfj28QjR8zNHWKZgWVnZ3be2x3eLlNIK7xcFIVknYW/rEhk6XAofxKm1AqzaaFylSChEsYwSEZsp7EjIhymNhTBZ6IWI6ZYG5ATi3Qdba/9vVAEe8nZD5x8w4XB0Ve3OFd319oceM1leYq9VqpTDjlpYR4kcWwmfncs620g03cTRKQSFMuXow1Hjk3fu50SRPfReGT+IJ0vd8ubmNqiusimH7gpRm6sUbPXjO9nKgGK8sQQJrPTCcBMtolBS9OdOe9aJUD/+pnkgUROvUVNX3gfxFXsif/KeQIqgWffn90eQWDr1OcOGd5B64/QSsoH6VYIn4hiKsFkdja3AokWns9bPyfzGdBS+OgmDOZRdmbOzBqDSmDADYDHGrhVU/8mBpniArr1VKT3B9lei/6pRcwtaQokKj++GwugUN+BWwu9l/Cax/GitkGQhJ8hS3bdvDZ/A8dbeE6ZWY8dAAAAAElFTkSuQmCC",
                },
                {
                    value: 765, //女
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAr5JREFUSA3NVk1oE1EQnnn5q1Brd6WiZ8GiIFgQxYt49iAWbGiTrUREELUHDwpSIh4U8fciHipahWwSsFoRxKsUoYIUREQk4LEqan5aUOjupvucF3lh/7d48pEwb2a+me/NvHkhCGtYfOJlZqnevGIDzws4MiwpqlrEOweNuPBkHED4W43GTQ5wRmK5zc81680U6WelLUyyMIe0c86RPgWpS4nIfTbpc8pYApiZYYDcVylVlBLkzmRB+1gCzGZXkeMzbzACziKV4bV7dd/JvAChM8TTq8DTRHSYVJF0FnrTE8IXt2JLbB2tDkG7vd8GlmJgryM6bgOsUOkmsMScoo++jyKJJGjm9etiYqISAOLljRWtGIYJJaDkGiUvhQU67QmGI/1l7YnTJveBBL8KjzebhvmRA1clMEpSkp9JSOzoq+bqXlzgFFHyKZmcgs/TxOjeQGrNI7JfEHa69YE22Hd9GDL4CDqtAX5IgGkM3yiD2i3AzuR44jlXhtM3CPRWOOhA2aW8fsQDolDHcrUGYYXGZhemMk3LMGv0qBQHVJC3kpxtwyQbsNrWO6oiE9QqVwWmZRa7reFwsU8fr5mGcc2bXBAJG73Aq+tLo5+o1ksdG7XKAntS7OVyEaAN34WDevtaGc7cboxV9tHjKkiwVxLJ8eVceY9oFZ1+XvhJui7a1SIBoDvYqWxKf4YNI0arpi9Q6UPCHrEW1EFtL3x90dP6vbxVLWsfnFgfgXQ2x/RT1K7AyZAYKSnJSbU6PiV1pwwk4IVXPS1z8Rvn0O8Eh+0RoaH0bt+C93ZbXozrDrrOhwcMas1TCpwTX+ps5266frFB+EGnmxdf+tV+HpT8L8wVFaw0cqVpGvRjTi9Ddl+p5E84bUH74AqCkP9o+z8I6F34/j3QhPlsQUWuqQKWSDyg4C/dBIiLjPHprh6x+QOP5fUXvxzvJQAAAABJRU5ErkJggg==",
                }
            ],
            z: 10
        },
        {
            name: "性别比例",
            type: "pictorialBar",
            itemStyle: {
                normal: {
                    opacity: 0.3
                }
            },
            label: {
                normal: {
                    show: false
                }
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolSize: 22.5,
            symbolPosition: "start",
            symbolOffset: [20, 0],
            data: [{
                    value: 235, //男
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAZRJREFUSA3tVLFKA0EQnbkEY1KFEDQYrCxsVARTRa21TZFf0EL8BysbsRErKwNqoWhnIViIWioqWCiWmihEsBECJnfj28QjR8zNHWKZgWVnZ3be2x3eLlNIK7xcFIVknYW/rEhk6XAofxKm1AqzaaFylSChEsYwSEZsp7EjIhymNhTBZ6IWI6ZYG5ATi3Qdba/9vVAEe8nZD5x8w4XB0Ve3OFd319oceM1leYq9VqpTDjlpYR4kcWwmfncs620g03cTRKQSFMuXow1Hjk3fu50SRPfReGT+IJ0vd8ubmNqiusimH7gpRm6sUbPXjO9nKgGK8sQQJrPTCcBMtolBS9OdOe9aJUD/+pnkgUROvUVNX3gfxFXsif/KeQIqgWffn90eQWDr1OcOGd5B64/QSsoH6VYIn4hiKsFkdja3AokWns9bPyfzGdBS+OgmDOZRdmbOzBqDSmDADYDHGrhVU/8mBpniArr1VKT3B9lei/6pRcwtaQokKj++GwugUN+BWwu9l/Cax/GitkGQhJ8hS3bdvDZ/A8dbeE6ZWY8dAAAAAElFTkSuQmCC",
                },
                {
                    value: 765, //女
                    symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAr5JREFUSA3NVk1oE1EQnnn5q1Brd6WiZ8GiIFgQxYt49iAWbGiTrUREELUHDwpSIh4U8fciHipahWwSsFoRxKsUoYIUREQk4LEqan5aUOjupvucF3lh/7d48pEwb2a+me/NvHkhCGtYfOJlZqnevGIDzws4MiwpqlrEOweNuPBkHED4W43GTQ5wRmK5zc81680U6WelLUyyMIe0c86RPgWpS4nIfTbpc8pYApiZYYDcVylVlBLkzmRB+1gCzGZXkeMzbzACziKV4bV7dd/JvAChM8TTq8DTRHSYVJF0FnrTE8IXt2JLbB2tDkG7vd8GlmJgryM6bgOsUOkmsMScoo++jyKJJGjm9etiYqISAOLljRWtGIYJJaDkGiUvhQU67QmGI/1l7YnTJveBBL8KjzebhvmRA1clMEpSkp9JSOzoq+bqXlzgFFHyKZmcgs/TxOjeQGrNI7JfEHa69YE22Hd9GDL4CDqtAX5IgGkM3yiD2i3AzuR44jlXhtM3CPRWOOhA2aW8fsQDolDHcrUGYYXGZhemMk3LMGv0qBQHVJC3kpxtwyQbsNrWO6oiE9QqVwWmZRa7reFwsU8fr5mGcc2bXBAJG73Aq+tLo5+o1ksdG7XKAntS7OVyEaAN34WDevtaGc7cboxV9tHjKkiwVxLJ8eVceY9oFZ1+XvhJui7a1SIBoDvYqWxKf4YNI0arpi9Q6UPCHrEW1EFtL3x90dP6vbxVLWsfnFgfgXQ2x/RT1K7AyZAYKSnJSbU6PiV1pwwk4IVXPS1z8Rvn0O8Eh+0RoaH0bt+C93ZbXozrDrrOhwcMas1TCpwTX+ps5266frFB+EGnmxdf+tV+HpT8L8wVFaw0cqVpGvRjTi9Ddl+p5E84bUH74AqCkP9o+z8I6F34/j3QhPlsQUWuqQKWSDyg4C/dBIiLjPHprh6x+QOP5fUXvxzvJQAAAABJRU5ErkJggg==",
                }
            ],
            z: 5
        },
    ]
};