实现效果
实现思路
和常规柱图类似,配置项type: "bar"
,只有图片路径需要注意下。
实现代码
customBarCharts() {
this.$api.dataDeck.manStructure().then(res => {
var customBar = this.$echarts.init(
document.getElementById("customBar")
);
var img2 = {
a: "../../../static/girl.png", //要写静态路径,否则会拿不到图片
b: "../../../static/lightG.png"
};
var img1 = {
a: "../../../static/boy.png",
b: "../../../static/lightM.png"
};
var value = 1; // >0
var option = {
title: {
text: "",
subtext: "",
textStyle: {
color: "#000",
fontSize: 16
},
left: "5%",
top: "5%"
},
backgroundColor: "#fff",
grid: {
left: "10%",
top: "5%",
bottom: "10%",
right: "10%",
containLabel: true
},
tooltip: {
trigger: "item"
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
yAxis: [
{
type: "category",
inverse: false,
data: [
"男 " + (res.data.malePercent * 100).toFixed(2) + "%",
"女 " + (res.data.femalePercent * 100).toFixed(2) + "%"
],
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: "dotted",
color: "#000"
}
},
axisLabel: {
margin: 20,
textStyle: {
color: "#000",
fontSize: 14
}
}
}
],
series: [
{
tooltip: {
show: false
},
z: 2,
type: "pictorialBar",
symbolSize: ["10", "14"],
symbolRepeat: "fixed",
data: [
{
value: value,
symbol: "image://" + img1.b //图片前要加’image://‘,否则也不会显示图片
},
{
value: value,
symbol: "image://" + img2.b
}
]
},
{
z: 3,
type: "pictorialBar",
symbolSize: ["10", "14"], //上下图大小
animation: true,
symbolRepeat: "fixed",
symbolClip: true,
symbolPosition: "start",
symbolOffset: [0, 0],
data: [
{
value: res.data.maleCount,
symbol: "image://" + img1.a
},
{
value: res.data.femaleCount,
symbol: "image://" + img2.a
}
],
label: {
normal: {
show: true,
textStyle: {
color: "#000",
fontSize: 14
},
position: "right",
offset: [6, 0]
}
}
},
{
type: "bar"
}
]
};
customBar.setOption(option);
});
}