option = {
backgroundColor: 'black',
angleAxis: {
type: "value",
clockwise: true,
startAngle: 90,
min: 0,
max: 200,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
radiusAxis: {
type: "category",
data: ["PM2.5", "PM10", "CO", "NO2", "O3", "SO2"],
z: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
margin: 6,
fontSize: 10,
textStyle: {
color: "#96F5F6"
},
interval: 0
}
},
polar: {
center: ["51%", "40%"],
radius: ['10%', '80%']
},
tooltip: {
show: true
},
series: [
{
type: "bar",
barWidth: "40%",
data: [12],
coordinateSystem: "polar",
name: "PM2.5",
stack: "a",
z:2,
roundCap: true,
itemStyle: {
color: "#BFA27C",
barBorderRadius: 5
},
showBackground: false,
backgroundStyle: {
color: "#27333F",
barBorderRadius: 50
}
},
{
type: "bar",
data: [0, 25],
coordinateSystem: "polar",
name: "PM10",
stack: "a",
z:2,
roundCap: true,
itemStyle: {
color: "#328CD9"
},
showBackground: false,
backgroundStyle: {
color: "#27333F"
}
},
// {
// type: "bar",
// barWidth: "40%",
// data: [150],
// coordinateSystem: "polar",
// name: "PM2.5",
// stack: "b",
// z:1,
// barGap: '-100%',
// roundCap: true,
// itemStyle: {
// color: "#aaa",
// barBorderRadius: 5
// },
// showBackground: false,
// backgroundStyle: {
// color: "#27333F",
// barBorderRadius: 50
// }
// },
{
type: "bar",
data: [0, 150],
coordinateSystem: "polar",
name: "PM10",
stack: "b",
z:1,
barGap: '-100%',
roundCap: true,
itemStyle: {
color: "#aaa"
},
showBackground: false,
backgroundStyle: {
color: "#27333F"
}
},
{
type: "bar",
data: [0, 0, 40, 0],
coordinateSystem: "polar",
name: "CO",
stack: "a",
roundCap: true,
itemStyle: {
color: "#1FB4A7",
barBorderRadius: 5
},
showBackground: true,
backgroundStyle: {
color: "#27333F"
}
},
{
type: "bar",
data: [0, 0, 0, 60],
coordinateSystem: "polar",
name: "NO2",
stack: "a",
roundCap: true,
itemStyle: {
color: "#424CB9",
barBorderRadius: 5
},
showBackground: true,
backgroundStyle: {
color: "#27333F"
}
},
{
type: "bar",
data: [0, 0, 0, 0, 80],
coordinateSystem: "polar",
name: "O3",
stack: "a",
roundCap: true,
itemStyle: {
color: "#255CB9",
barBorderRadius: 5
},
showBackground: true,
backgroundStyle: {
color: "#27333F"
}
},
{
type: "bar",
data: [0, 0, 0, 0, 0, 80],
coordinateSystem: "polar",
name: "SO2",
stack: "a",
roundCap: true,
itemStyle: {
color: "#213AF9",
barBorderRadius: 5
},
showBackground: true,
backgroundStyle: {
color: "#27333F"
}
}
],
legend: {
bottom: 6,
icon: "circle",
itemHeight: 10,
show: true,
data: ["PM2.5", "PM10", "CO", "NO2", "O3", "SO2"],
selectedMode: false,
textStyle: {
color: "#96F5F6",
fontSize: 8
}
}
}