option = {
backgroundColor: 'white',
grid: {
top: '20%',
left: '5%',
right: '5%',
bottom: '8%',
containLabel: true
},
tooltip: {
trigger: 'axis',
borderWidth: 1,
axisPointer: {
type: 'shadow'
},
extraCssText: 'z-index:2'
},
legend: [{
top: 'top',
left: 'center',
orient: 'horizontal',
data: ['进水量', '出水量'],
itemWidth: 15,
itemHeight: 10,
itemGap: 15,
borderRadius: 4,
textStyle: {
color: '#000',
fontFamily: 'Alibaba PuHuiTi',
fontSize: 14,
fontWeight: 400
}
}],
xAxis: {
type: 'category',
data: ['13:00', '14:00', '15:00', '16:00', '17:00'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#393939' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '',
nameTextStyle: {
color: '#000',
fontFamily: 'Alibaba PuHuiTi',
fontSize: 14,
fontWeight: 600
// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
},
nameGap: 30, // 表现为上下位置
axisLine: {
show: true,
lineStyle: {
color: '#eeeeee'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#393939',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#eeeeee'
}
}
}
],
series: [
{
name: '进水量',
type: 'line',
showAllSymbol: true, //显示所有图形。
//标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#5470c6',
normal: {
color: '#5470c6'//拐点颜色
}
},
lineStyle: {
color: '#5470c6'
},
data: [175, 160, 153, 121, 156]
},
{
name: '出水量',
type: 'line',
showAllSymbol: true, //显示所有图形。
symbolSize: 8, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: 'white',
borderWidth: '2',
borderColor: '#91cc75',
normal: {
color: '#91cc75'//拐点颜色
}
},
lineStyle: {
color: '#91cc75'
},
data: [200, 140, 205, 162, 175]
}
]
}