效果如图:
因为文字的多少是不确定的 所以背景图和小图标要分开来写,也有的说可以用html+css来写这个图标,我试了没成功~。因为是echarts的配置里面的图片不能被file-loader处理到,所以我用了base64的,当然也用绝对路径来代替。 代码:
markPoint: {
label: {
normal: {
padding: [5, 10, 10, 10],
fontSize: 14,
color: "#FF9200",
align: "center",
offset: [0, -30],
formatter: [`{a|}`, `{b|建议${month}月${day}日清洗}`].join(""),
rich: {
a: {
backgroundColor: {
image:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABG0lEQVQ4T62TP0sDQRDFf3OBdDamT2OXFHb2IjaivR/AJpCAYGGb1kIiXsAmH8ImNiFFPkAKIYHUYidarE1Q7kbuTyRcdiKRbDc7M2/fm3krFI52qRNzgXCMUk3TwgvKgICeNJkut8gi0DZlKtyiNIBSETiPI4QH3rmSNl8ZNpA27/IEHBmNxeshH5wkIBlASIjS9DQ/IsxRzldyQldatCTX/OylHbFHhKPMmwc8ImBf9J4OcOmlXqJGgOObV0PanWjIBKXuLYg5ABwBM29emCYMHLBjFBwiOGLGBoPP9QAxZzmDkQ2wTgL0gDl4N5SYIJVgDxFu8pev7SFm1vWvEU5RFKFvrvEPI9nGXBhpK1b+BfnvZ1rmuel3/gEna3Cfd8+7ZgAAAABJRU5ErkJggg=="
},
width: 16,
height: 16
},
b: {
color: "#FF9200",
lineHeight: 20,
padding: [0, 0, 0, 5]
}
}
},
emphasis: {
show: false
}
},
data: [
{
coord: [`${year}-${fullMonth}-${fullDay}`, this.data.value],
symbolSize: [1, 1],
label: {
normal: {
show: isShowPoint,
backgroundColor: {
image:
"data:image/png;base64,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"
},
rich: {
a: {
color: "#FF9200"
}
}
},
emphasis: {
show: false
}
}
},{
coord: [`${year}-${fullMonth}-${fullDay}`, this.data.value],
symbolSize: [1, 1],
label: {
normal: {
show: isShowPoint,
offset: [0, 0],
formatter: [`{a|}`].join(""),
backgroundColor: {
image: "transparent"
},
borderColor: "#f0f",
boderWidth: 6,
borderRadius: 6,
formatter: [`{a|}`].join(""),
rich: {
a: {
width: 18,
height: 18,
borderColor: "#f0f",
boderWidth: 6,
borderRadius: 6,
backgroundColor: {
image:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABb0lEQVRIS7WVu04CURCGv0mMMTGgNhZKg42JlQWFFhZa44U3kMrSSKEBayFaYNTKijcQL9RSWGhBYWW0okELG7mExBiSYxZ2ue0uRORsOfPvt//OOTMjuDwqwRTjbCJsoFgAZkzpB8ILiluq3EiULyeEdAdVijHK7CHsA5NuHzbjRRQneDmVMN/t2g6wSjLLCNdAoA+wO52jxpZEeLcSTbAJfQJ8f4Ra8gI1lix4HVz//QoPAzi1O/ewYpSlAT4jihAf0Gnna4qY7JIQ8/TzwIQj2B+ExQhMm2X/zMFzEvIZNx8lqvhFnbMNpBxVy0cQiDkDcnF4PHSDh0VdcIUiZFMYToN3vauTWXd2LqQNx6/AvI0Qugffam9wIQvpNSfNmwEuAx5bdqcMo/Zwh+6nApdeJ3BFK1hTKTQenqbr1hiPw2yQIlXm9LW01iFUhzdm8XDHpnXDtQz6Jry1mg5cJ16r10oojvuupvbe/O8y/QUfS6N/V40yfwAAAABJRU5ErkJggg=="
},
}
}
},
emphasis: {
show: false
}
}
}
]
}