写echarts时,通常ui会设计有背景图,而且会有文字;
使用css布局时,如果宽高发生变化,图表可以进行resize,但这时背景图就不好重新设计了
查看echarts,结果发现了graphic -- 原生图形元素组件
Documentation - Apache ECharts
const options ={
graphic: [
// 插入图片
{
type: "image",
left: "center",
top: "center",
style: {
image: "图片路径",
width: 130,
height: 130
}
},
// 文字
{
type: "text",
left: "center", // 相对父元素居中
top: "130", // 相对父元素上下的位置
style: {
fill: "#c8c8c894",
text: "文字",
font: "12px Arial Normal"
}
},
// 文字
{
type: "text",
left: "center", // 相对父元素居中
top: "center", // 相对父元素上下的位置
style: {
fill: "#fdfdfc",
text: "2578",
font: "22px Arial Normal"
}
},
// 外置圆环
{
type: "ring",
left: "center", // 相对父元素居中
top: "center", // 相对父元素上下的位置
style: {
fill: "rgba(128, 128, 128, 0.3)",
lineWidth: 4
},
shape: {
cx: 0,
cy: 0,
r: 92,
r0: 85
}
}
],
}
最后呈现的效果就是