option = {
backgroundColor: "",
color: ["#27d391", "#eddb76", "#fe3838"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: [{
gridIndex: 0,
axisLabel: {
show: true
},
axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: 'rgba(151,184,216,0.5)',
type: "dashed"
}
},
type: 'category',
boundaryGap: true,
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00']
}, {
gridIndex: 1,
axisLabel: {
show: true
},
axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: 'rgba(151,184,216,0.5)',
type: "dashed"
}
},
type: 'category',
boundaryGap: false,
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00']
}, {
gridIndex: 2,
axisLabel: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(151,184,216,0.5)',
type: "dashed"
}
},
type: 'category',
boundaryGap: false,
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00']
}],
yAxis: [{
gridIndex: 0,
axisLabel: {
show:true
},
axisTick: {
show: true
},
axisLine: {
show: true,
},
splitLine: {
show: false
},
splitNumber: 5,
name: 'CPU',
nameLocation: 'center',
nameTextStyle: {
color: '#27d391',
fontSize: 14
},
nameRotate: 360
}, {
gridIndex: 1,
axisLabel: {
show:true
},
axisTick: {
show: false
},
axisLine: {
show: true,
},
splitLine: {
show: true
},
splitNumber: 5,
name: '内存',
nameLocation: 'center',
nameTextStyle: {
color: '#eddb76',
fontSize: 14
},
nameRotate: 360
}, {
gridIndex: 2,
axisLabel: {
show:true
},
axisTick: {
show: false
},
axisLine: {
show: true,
},
splitLine: {
show: true
},
splitNumber: 5,
name: '磁盘',
nameLocation: 'center',
nameTextStyle: {
color: '#fe3838',
fontSize: 14
},
nameRotate: 360
}],
grid: [{
top: '5%',
left: '10%',
right: '4%',
bottom: '4%',
height: '30%'
}, {
top: '40%',
left: '10%',
right: '4%',
bottom: '4%',
height: '30%'
}, {
top: '74%',
left: '10%',
right: '4%',
bottom: '4%',
height: '30%'
}],
series: [{
type: 'line',
data: [0, 41, 30, 65, 53, 53, 53, 41, 30, 65, 53, 0],
xAxisIndex: 0,
yAxisIndex: 0,
smooth: false,
lineStyle: {
color: '#92c690'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#92c690',
}
},
itemStyle: {
normal: {
color: '#92c690',
borderColor: '#92c690'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#98f195'
}, {
offset: 1,
color: '#98f19503'
}])
}
}, {
type: 'line',
data: [12, 45, 15, 2, 56, 15, 12, 45, 15, 2, 56, 15],
xAxisIndex: 1,
yAxisIndex: 1,
smooth: false,
lineStyle: {
color: '#219cab'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#219cab',
}
},
itemStyle: {
normal: {
color: '#219cab',
borderColor: '#219cab'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#69d0e1'
},
{
offset: 1,
color: '#69d0e103'
}
])
}
}, {
type: 'line',
data: [0, 74, 67, 79, 46, 46, 46, 74, 67, 79, 46, 0],
xAxisIndex: 2,
yAxisIndex: 2,
smooth: false,
lineStyle: {
color: '#F18F24'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#F18F24',
}
},
itemStyle: {
normal: {
color: '#F18F24',
borderColor: '#F18F24'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#F18F24'
}, {
offset: 1,
color: '#F18F2403'
}])
}
}]
};