视频演示：https://mpvideo.qpic.cn/0bc3n4acwaaajiamjernjrsva36dfnxqakya.f10002.mp4?
主要代码
代码语言：javascript复制 private static object GetOptin(double data)
{
return new
{
series = new object[]
{
new
{
type = "gauge",
startAngle = 180,
endAngle = 0,
min = 0,
max = 240,
splitNumber = 12,
itemStyle = new
{
color = "#58D9F9",
shadowColor = "rgba(0,138,255,0.45)",
shadowBlur = 10,
shadowOffsetX = 2,
shadowOffsetY = 2
},
progress = new
{
show = true,
roundCap = true,
width = 18
},
pointer = new
{
icon = "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
length = "75%",
width = 16,
offsetCenter = new object[] { 0, "5%" }
},
axisLine = new
{
roundCap = true,
lineStyle = new
{
width = 18
}
},
axisTick = new
{
splitNumber = 2,
lineStyle = new
{
width = 2,
color = "#999"
}
},
splitLine = new
{
length = 12,
lineStyle = new
{
width = 3,
color = "#999"
}
},
axisLabel = new
{
distance = 30,
color = "#999",
fontSize = 20
},
title = new
{
show = false
},
detail = new
{
backgroundColor = "#fff",
borderColor = "#999",
borderWidth = 2,
width = "60%",
lineHeight = 40,
height = 40,
borderRadius = 8,
offsetCenter = new object[] { 0, "35%" },
valueAnimation = true,
formatter = "{value|" Math.Round(data,1) "}{unit|km/h}",
rich = new
{
value = new
{
fontSize = 50,
fontWeight = "bolder",
color = "#777"
},
unit = new
{
fontSize = 20,
color = "#999",
padding = new[] { 0, 0, -20, 10 }
}
}
},
data = new object[]
{
new
{
value = data
}
}
}
}
};
}
https://echarts.apache.org/examples/zh/editor.html?c=gauge-progress
