const value = 79;
const meterOption = ref({
title: [
{
text: value+'%',
subtext:'体温指数',
y: "38%",
x: "center",
textStyle: {
fontSize: 27,
fontFamily: 'PangMenZhengDao-Regular, PangMenZhengDao',
color: "#ffffff",
},
subtextStyle: {
fontSize: 14,
color: "#ffffff",
},
},
],
series: [
{
type: "pie",
color: ["transparent", 'transparent','transparent'],
startAngle: 180,
center: ["50%", "70%"],
radius: ['115%', '130%'],
hoverAnimation: false,
labelLine: {
show: false
},
data: [
{
name: "外圈渐层",
value: value,
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset: 0,
color: "rgba(19, 42, 90, 0.4)",
},
{
offset: 1,
color: "rgba(1, 171, 243, 0.9)",
},
],false),
},
},
},
{ //圆球
name: "",
value: 5,
label: {
rotate: 90,
position: 'inside',
width: 10,
height: 10,
backgroundColor: '#fff',
borderRadius: 10,
borderWidth: 4,
borderColor: 'rgba(11, 189, 244, 0.89)',
shadowColor: 'rgba(11, 189, 244, 0.89)',
shadowBlur: 4,
shadowOffsetY: 2
},
},
{ //画剩余的刻度圆环
name: "",
value: 100 - value,
itemStyle: {
color: 'rgba(1, 171, 243, 0.20)'
},
},
{ //画剩余的刻度圆环
name: "",
value: 100,
}
]
}
]
})
echarts 半圆进度球
于 2023-01-04 09:54:19 首次发布