Echart结合圆形实现仪表盘的绘制详解
时间：2022-07-16 09:41:46 | 栏目：JavaScript代码 | 点击：次
效果图
注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。
效果
代码
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "80%",
startAngle: 190,
endAngle: -10,
// minAngle:10,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "-5%"],
fontSize: "14px",
ffontFamily: "Impact",
formatter: "{value} %",
color: "#fff",
},
data: data
},
]
};
效果图
主要使用：echarts中的仪表盘、和三个圆进行实现
代码
var option = {
series: [
{
type: "gauge",
center: ["50%", "50%"],
radius: "95%",
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
z: 5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#65e1fb",
},
{
offset: 1,
color: "#2e70f6",
},
]),
},
},
progress: {
show: true,
roundCap: true,
width: 5
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, "2%"],
fontSize: 12,
// fontWeight: "bolder",
formatter: "{value} %",
color: "#fff",
},
data: [
{
value: this.props.data || 100
}
]
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["70%", "70%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虚线
borderColor: "#78d7ff",// 虚线颜色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["65%", "65%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 1,
borderType: "dotted",//dotted 虚线
borderColor: "#78d7ff",// 虚线颜色
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: "55%",
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
color: "#53bcf9",
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
}
]
};