配置项如下
option = {
backgroundColor: '#091C3D',
title: {
text: '告警次数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['一般', '严重'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
name: '时间',
nameTextStyle:{
color:'white',
},
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}, {
axisPointer: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisTick: {
show: false
},
position: 'bottom',
offset: 20,
data: ['', '', '', '', '', '', '', '', '', '', {
value:"",
textStyle: {
align: 'left'
}
},]
}],
yAxis: [{
type: 'value',
name: '单位(次)',
nameTextStyle:{
color:'white',
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '一般',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
itemStyle: {
normal: {
color: '#FF9A22',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [12, 11, 12, 14, 12, 16, 12, 22, 18, 19, 13, 15]
}, {
name: '严重',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
itemStyle: {
normal: {
color: 'red',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [22, 18, 12, 14, 12, 19, 13, 15, 12, 11, 16, 12]
}, ]
};