echarts 16配置项内容和展示

                  const manimage ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABGCAYAAACkPDbJAAADAklEQVRoge3aT4hVVRzA8c9cZypBHIgxkAJJUKZFQWEuSkQCtZ0bTcUWLgIh6I+20CcoWIktSqGNgaALQ6FA0I3YYkARWhQUtGgorJaFEEWihjm2OPfqc5i559z77sx7i/uFB+++9+N3v5x3zrm/c84bWnvsXzUYwzZswMr8+h6u4ydcwln8FUv0yt9HHroeriGzG/tziZlEn8EmHMD7+KxK8qyizDkcnUVmOktxHJ9XuUGVFrqIV6skz9mBEWxNCU5tocM1ZQpew3spgSlCK4U+0ysfCz9jKSlCh3p3uU8nFhATGsXmZlzAdpF+GxNaG0tQkTE8VxYQExpvziUtZ0zosQZFCkrnsJjQzQZFCm6XfRkT+qVBkYKfy76MCV1tUITQOt+UBcSEruOrxnQ4jxtlASkT4+FmXMBHsYAUoSu40LuLU/g+FpT6cN2KyR5kvsUbKYGpQrfxMr6rIXMZazDVpBD8iRfwaWL8HRzBOiTXyVUrRnhHKLh2Cn1rMr/5f/gRXwj1z6NqlC11hOBpYUr4QxjGU/nrH/wutOaTdRJXeZKPC62yBctniVmdv97Or3/Al0Jd/WvKTVJaaClOCD/H3hKZmXhWWHlMCn3v8V6FXs9FkoZsCY/grVxse12hgzgtVI1NsQRncKyq0CearaWn865Z1mszCe3DnjmUKdhhhlXtdKF1wmQ2X+yaGO3s7P6gW2hYGKLzzamJ0c79Oatb6ENpa/a54GTxphB6Qphj+sWGidHOKh4IvdlHmYK9MJRvWP2GZf20ER7OYxmeHwAZwqDamGF9v026WJPhxX5bdDGeYUW/Lbp4KpNQEswjizOhHB0URjIM9duii6lM2PAeGOoW+XNGKxSjFYrRCsVohSIMZ1jQb4suFmbC8nZQODOMD4QNprse3na7J+wDLWr4pjdxzYOH+ghuCQfHnaHIqfQl4eS5Sb7GS8XF9FPpWKdO2qisSGnOmNBcdPjSnIM27FuhKK1QjFYoRisUoxWKkfJnlKYpzRkTSjpSqkhpzv8BKsx0YHZ9dFQAAAAASUVORK5CYII='
            const womanimage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAABHCAYAAABxqdXfAAADZElEQVRoge2aSWgUQRRA30wSIUTckrjQSsAdTQQVFzBuRFDJfvGiuQhB1AheBHVOKnMRTwpG0JMgIkSUoCcRBFERBCMGD+olkjaCCF4CanA5VDqZNL3Ur6nJtDAP5jDV/3e96amurTs11t1NnswBDgDNwCqgBvgDjABvgH6gLyw56zhalZTnKXkCOAMsCjhWC6wDuoDXwHngvmlFacO8MuAecJlgST/rx+OzhvUZX9EnQKNB3llgNtAjTTS5olcxk/Q4DhySJklFG4Cj0koC6AUqJQlSUeM25mMm6kbURiI6F9UF2aJLEiwR3SmMj6MeWKwbLKl4udwllmW6gRLRagOROGp1AyWiowYi1s4pER02EInjk26gRPSZgUgUI8B73WCJ6AdgUKwTTj8wphss7W7OCeOjuCQJlor2oeaY+XIN+ChJMOnA24EfBnkeA6iJiQgT0SFgO/DVIPclsBu1AhBhOiS+AjYADwU5vcBW4LtJhfmM3cNAC9AK3A0RGAauAxuBY3nUlfeaCeDB+KcatbirBn4DX4B35NeeJ7Ah6vENeG7xfFPQEU0BB4EVwC+LdaeAsozrDgG3s47zMzI4Zl1fBrwANtnzC+QtsDnrOKHNJO5mOknhJUGtxU5FBcSJitY1edKTcd1U2MEo0Qagzr5PKPOJWIZHibbbd4mlNexAlGhnAUTiEIvWoYbI6WZ1xnVXBh0IE+0ooEwcgU0uTLQY7dOjJagwSHQesKOwLpE0Zly3xl8YJNqMGpGKRRrYG1Top5jt06PNX+AXrSTg1xSBfRnXrcgt8Is2AVXT5xPKLGBXboFfNAl/u8eUzt8vGtg1FIkpe7G5otuABdPrEsnSjOuu9b7kihZjbI9j4u5PBxUmiIkR0hOtR62JksaWjOsuhEnRJF5Nj/0wKZrE9unRBmoVugTBzm8RGAVq0iSrkw+iCtjzP4gCdKZR24BJpymN2lpJOrVp4EaxLTS4UA50A0+BNRGBKeAI6qUAmwwDt2JiHmcd55G3m3dT46Qd2BcdzDrOaZ1A3R3nFDDD3CcU7Um6zcfaBaUkapuSqG1KorYpidqmJGobiWgh5q3a9UtECzEpqYgPUeiK/sXwhYAYPusGSq6ozTd0PC7qBkqe199BvSF+GAh8FiRgALiCenKtxT8+2nh0MHkz/wAAAABJRU5ErkJggg=='
            
            let manval = 50;
            let womanval = 55;
             option = {
                tooltip: {
                    trigger: "item",
                    formatter: params => {
                        // return params.name + ":"+ params.value + "%";
                    }
                },
                grid: {
                containLabel: true,
                left: 1,
                right: 10,
                top: 25,
                bottom: 0,
                },
                color: ["#e34c4c", "#3a8eff"],
                xAxis: [
                    {
                        type: "value",
                        show: false
                    }
                ],
                yAxis: [
                    {
                        type: "category",
                        show: false,
                        data: ["性别比例"]
                    }
                ],
                series: [
                    {
                        type: "bar",
                        stack: "性别比例",
                        barWidth: 10,
                        label: {
                            normal: {
                                show: true,
                                position: "top"
                            }
                        },
                        data: [
                            {
                                name: "女",
                                value: womanval,
                                label: {
                                    normal: {
                                         formatter: (params) => {
                                            return `{Female|} {a|${params.value}}`
                                        },
                                        rich: {
                                            Female: {
                                                height: 30,
                                                align: "center",
                                                backgroundColor: {
                                                    image: womanimage
                                                }
                                            },
                                            a: {
                                                fontSize:'16',
                                                color:'#e34c4c'
                                            }
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    {
                        type: "bar",
                        stack: "性别比例",
                        label: {
                            normal: {
                                show: true,
                                position: "top"
                            }
                        },
                        barWidth: 10,
                        data: [
                            {
                                name: "男",
                                value: manval,
                                label: {
                                    normal: {
                                        formatter: (params) => {
                                            return `{Male|} {a|${params.value}}`
                                        },
                                        rich: {
                                            Male: {
                                                height: 30,
                                                align: "center",
                                                backgroundColor: {
                                                    image: manimage
                                                }
                                            },
                                           a: {
                                                fontSize:'16',
                                                color:'#3a8eff',
                                                margin:[0,0,0,20]
                                            }    
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            };