let colorSet = {
color1: {
bg: "#FFF4D1",
bar: new this.echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#FFE9A5'
}, {
offset: 0.4,
color: '#FFD75B'
}, {
offset: 0.8,
color: '#FFC615'
}]
),
pin: "#FFBF37",
circle1: "#FFE48E",
circle2: new this.echarts.graphic.LinearGradient(
1, 1, 0, 0,
[{
offset: 0,
color: '#CBAC5C'
}, {
offset: 0.2,
color: '#E5BF70'
}, {
offset: 0.4,
color: '#A4752D'
}]
),
},
color2: {
bg: "#DCFFD1",
bar: new this.echarts.graphic.LinearGradient(
0, 1, 1, 0,
[{
offset: 0,
color: '#D8FDCC'
}, {
offset: 0.4,
color: '#ADE897'
}, {
offset: 0.8,
color: '#51BE26'
}]
),
pin: "#56CE28",
circle1: "#89DD69",
circle2: new this.echarts.graphic.LinearGradient(
0, 1, 1, 0,
[{
offset: 0,
color: '#75C65A'
}, {
offset: 0.5,
color: '#2A7521'
}, {
offset: 0.8,
color: '#58BC15'
}]
),
},
color3: {
bg: "#FFDFDF",
bar: new this.echarts.graphic.LinearGradient(
0, 1, 1, 0,
[{
offset: 0,
color: '#F6AFAF'
}, {
offset: 0.4,
color: '#F46969'
}, {
offset: 0.8,
color: '#F34E4E'
}]
),
pin: "#F45454",
circle1: "#F67474",
circle2: new this.echarts.graphic.LinearGradient(
1, 1, 0, 0,
[{
offset: 0,
color: '#CB5C5C'
}, {
offset: 0.5,
color: '#882A2A'
}, {
offset: 0.8,
color: '#D32222'
}]
),
}
}
let baseColor = colorSet.color1;
let score = 50;
option = {
graphic: {
type: 'text',
left: 'center',
top: "55%",
z: 100,
style: {
fill: '#fff',
text: '测试文字',
font: 'bolder 20px Microsoft YaHei'
}
},
tooltip: {
show: false
},
title: {
text: score,
left: 'center',
top: "40%",
triggerEvent: true,
textStyle: {
fontSize: 60,
fontFamily: "Microsoft YaHei",
color: '#fff',
}
},
angleAxis: {
show: false,
max: (100 * 360) / 265,
type: "value",
startAngle: 223,
splitLine: {
show: false,
},
},
barMaxWidth: 30,
radiusAxis: {
show: false,
type: "category",
z: 10,
},
polar: {
//圆环大小
radius: "157%",
},
series: [
{ // 进度条
type: "bar",
data: [
{
value: score,
itemStyle: {
color: baseColor.bar
},
},
],
barGap: "-100%",
coordinateSystem: "polar",
roundCap: true,
z: 2,
animationDuration: 1500,
},
{ // 进度条外框
name: "外部进度条",
type: "gauge",
center: ['50%', '50%'],
radius: '86%',
startAngle: 226,
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[1, baseColor.bg]
],
width: 60
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
pointer: {
show: false
}
},
{ // 刻度
name: '内部部刻度',
type: 'gauge',
radius: '60%',
min: 0,
max: 100,
splitNumber: 10,
startAngle: 225,
endAngle: -45,
axisLine: {
show: false,
lineStyle: {
width: 4,
color: [
[1, 'rgba(0,0,0,0)']
]
}
},
axisTick: {
show: true,
splitNumber: 10,
lineStyle: {
color: baseColor.pin,
width: 2,
},
length: -20
},
axisLabel: {
show: false,
},
splitLine: {
show: true,
length: -30,
lineStyle: {
width: 6,
color: baseColor.pin,
}
},
detail: {
show: false
},
pointer: {
show: false
}
},
{ // 圆环
name: "数量",
type: "pie",
animation: false,
hoverAnimation: false,
clockwise: false,
radius: ["53%", "53%"],
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
borderWidth: 6,
borderType: "solid",
borderColor: baseColor.circle1,
opacity: 0.5,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
},
{ // 内部圆
name: "数量",
type: "pie",
animation: false,
hoverAnimation: false,
clockwise: false,
radius: "50%",
center: ["50%", "50%"],
data: [10],
itemStyle: {
normal: {
color: baseColor.circle2,
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
fontSize: "14",
},
},
},
labelLine: {
normal: {
show: false,
},
},
}
]
};
function mockData() {
score = Math.floor(Math.random() * 100 + 1);
if(score >= 0 && score < 50) {
baseColor = colorSet.color3;
}
if(score >= 50 && score < 85) {
baseColor = colorSet.color1;
}
if(score >= 85) {
baseColor = colorSet.color2;
}
}
setInterval(() => {
mockData();
option.title.text = score;
option.series[0].data[0].value = score;
option.series[0].data[0].itemStyle.color = baseColor.bar;
option.series[1].axisLine.lineStyle.color[0][1] = baseColor.bg;
option.series[2].axisTick.lineStyle.color = baseColor.pin;
option.series[2].splitLine.lineStyle.color = baseColor.pin;
option.series[3].itemStyle.normal.borderColor = baseColor.circle1;
option.series[4].itemStyle.normal.color = baseColor.circle2;
myChart.setOption(option);
}, 2000)