echarts 男女比例柱

 

 

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]
}
}
}
}
}
]
}
]
};