let option = {
grid: {
show: false,
containLabel: true,
},
angleAxis: {
show: false,
max: 200, //-45度到225度,二者偏移值是270度除360度
type: "value",
startAngle: 180, //极坐标初始角度
splitLine: {
show: false,
},
},
barMaxWidth: 7, //圆环宽度
radiusAxis: {
show: false,
type: "category",
},
//圆环位置和大小
polar: {
center: ["50%", "50%"],
radius: "180%",
},
series: [
{
type: "bar",
data: [
{
//上层圆环,显示数据
value: 50,
itemStyle: {
color: data.isBig ? 'red' : "green",
},
},
],
coordinateSystem: "polar",
roundCap: true, //顶端圆角
z: 2, //圆环层级,同zindex
},
{
//下层圆环,显示最大值
type: "bar",
data: [
{
value: 100,
itemStyle: {
color: data.isBig ? 'green' : "red",
},
},
],
barGap: "-100%",
coordinateSystem: "polar",
roundCap: true,
z: 1,
},
{
type: "gauge",
startAngle: 180, //起始角度,同极坐标
endAngle: 0, //终止角度,同极坐标
radius: "100%",
splitNumber: 2,
max: 1,
center: ["50%", "57%"],
axisLine: {
show: false,
},
splitLine: {
show: false,
length: 5,
distance: 1,
lineStyle: {
color: "#eee",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#ffffff",
fontSize: 6,
},
pointer: {
show: true,
length: "50%",
width: 3,
offsetCenter: [0, 0],
},
itemStyle: {
color: "#CCCCCC",
},
detail: {
color: "rgba(4, 228, 199, 1)",
fontSize: 14,
offsetCenter: [0, 18],
borderRadius: 8,
},
data: [
{
value: data.value,
},
],
},
],
};
06-13
4384
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-24
1204
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-01
628
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-20
7683
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)