option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["PM10", "国控点PM10"],
textStyle: {
fontSize: "12px",
// color: "#FFFFFF",
lineHeight: "18",
fontFamily: "Source Han Sans CN",
},
},
grid: {
left: "2%",
right: "2%",
bottom: "15%",
top: "5%",
containLabel: true,
},
xAxis: {
type: "category",
splitLine: {
show: true,
lineStyle: {
color: 'black',
},
},
data: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时'],
},
yAxis: {
type: "value",
splitLine: {
show: false,
},
},
dataZoom: {
type: "inside",
show: true,
height: 10,
start: 0,
end: 100,
},
series: [
{
name: "PM10",
type: "line",
color: "#30B883 ",
data: [45, 67, 89, 34, 89, 24, 67, 90, 156, 178, 286, 267, 89, 134, 89, 324, 67, 90, 456, 78, 86, 89],
label: {
show: true,
position: 'top'
},
markArea: {
tooltip: { show: false },
silent: true,
label: { position: 'insideLeft' },
data: [
[
{
yAxis: "150"
},
{
yAxis: 50,
name: '良',
itemStyle: { color: "#ffff00", opacity: 0.9 }
}
], [
{ valueDim: "y" }, {
yAxis: 50, itemStyle: { color: "#00E400", opacity: 0.9 },
name: '优',
}
],
[
{
yAxis: "250"
},
{
yAxis: 150, itemStyle: { color: "#ff7e00", opacity: 0.9 }, name: '轻度',
}
],
[
{
yAxis: "350"
},
{
yAxis: 250, itemStyle: { color: "#ff0000", opacity: 0.9 }, name: '中度',
}
], [
{
yAxis: "350"
},
{
yAxis: 420, itemStyle: { color: "#99004c", opacity: 0.9 }, name: '重度',
}
], [
{ yAxis: 420, itemStyle: { color: "#7e0023", opacity: 0.9 }, name: '严重', },
{ valueDim: "y" }
],]
}
},
{
name: "国控点PM10",
type: "line",
color: "#FFB502 ",
data: [45, 24, 156, 178, 286, 267, 89, 134, 89, 324, 67, 67, 89, 34, 89, 56, 78, 86, 89, 90],
label: {
show: true,
position: 'top'
},
},
],
};