option = {
backgroundColor: 'black',
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '15%',
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "rgba(255,255,255,0.7)"
}
},
backgroundColor: "rgba(255,255,255,0.1)",
padding: [5, 10],
textStyle: {
color: "rgb(255,255,255)"
}
},
legend: {
x: "center",
y: "15",
icon: "stack",
itemWidth: 6,
itemHeight: 5,
textStyle: {
color: "#FFFFFF"
},
data: ["温度", "湿度"]
},
xAxis: {
type: "category",
data: ["8:00", "09:00", "10:00", "11:00", "12:00"],
boundaryGap: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.5)"
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: "#DEEBFF"
}
}
},
yAxis: [
{
type: "value",
position: "left",
name: "温度",
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.2)']
}
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.3)"
}
},
nameTextStyle: {
color: "#DEEBFF",
fontSize: 12,
lineHeight: 0
},
axisLabel: {
margin: 2,
textStyle: {
fontSize: 12,
color: "#DEEBFF"
}
}
},
{
type: "value",
name: "湿度",
position: "right",
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.2)']
}
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.3)"
}
},
nameTextStyle: {
color: "#DEEBFF",
fontSize: 12,
lineHeight: 0
},
axisLabel: {
margin: 2,
textStyle: {
fontSize: 12,
color: "#DEEBFF"
}
}
}],
series: [
{
name: "温度",
type: "line",
smooth: true,
showSymbol: false,
data: [20, 25, 22, 10, 36],
itemStyle: {
normal: {
color: "#006CFF"
}
},
lineStyle: {
normal: {
width: 3
}
}
}, {
name: "湿度",
type: "line",
smooth: true,
yAxisIndex: 1,
showSymbol: false,
symbol: "circle",
symbolSize: 6,
data: [22, 15, 36, 9, 6],
itemStyle: {
normal: {
color: "#06F5FF"
}
},
lineStyle: {
normal: {
width: 3
}
}
}]
};