配置项如下
option = {
title: {
text: '统计1',
left: '45%',
top: '0%'
},
animation: false,
yAxis: {
type: 'value',
min: 36,
max: 39,
splitNumber: 20,
axisLine:{
show:true,
lineStyle:{
color:'#d1d1d1'
}
},
axisTick:{
show:false
},
axisLabel: {
color:'#343434'
},
splitLine: {
show: true,
lineStyle: {
color: '#d1d1d1'
}
}, //去除网格线
splitArea: {
show: false
}, //保留网格区域
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLine:{
show:true,
lineStyle:{
color:'#d1d1d1'
}
},
axisTick:{
show:false
},
axisLabel: {
color:'#343434'
},
splitLine: {
show: true,
lineStyle: {
color: '#d1d1d1'
}
}, //去除网格线
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(255,93,93,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(170,153,254,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(214,206,255,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)',
'rgba(90,207,173,0.3)'
]
},
}, //保留网格区域
data: [
'1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
'1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
]
},
grid: {
top: '5%',
bottom: '0%',
left: '0%',
right: '1%',
containLabel: true
},
dataZoom: [{
type: 'inside',
show: false,
xAxisIndex: [0],
startValue: 0,
endValue: 30,
zoomLock: true,
throttle: 0,
moveonmousemove: 'ctrl'
}],
series: [ //就是从这个地方开始的 主要用的是markArea 和legend
{
type: 'line',
smooth: true,
offset: 500,
symbol:'circle',
itemStyle: {
color:'#ff5690',
borderColor:'#ff5690',
borderWidth:4
},
data: ['36.6', '36.7', '37.4', '36.5', '36.7', '36.5', '36.7', '37.3', '36.6', '37.2', '36.5', '37.6', '36.9', '37.2', '36.5',
'36.7', '36.9', '37.5', '36.9', '37.6', '36.9', '36.7', '36.9', '36.4', '37.0', '36.6', '37.5', '37.5', '37.3', '36.7',
'37.0', '37.4', '36.5', '37.5', '37.0', '37.3', '36.4', '37.2', '37.2', '37.3', '36.6', '37.1', '37.1', '37.1', '37.3',
'37.2', '37.4', '36.5', '37.0', '36.4', '36.6', '36.8', '37.1', '36.9', '36.5', '36.9', '37.2', '37.3', '36.5', '37.5', '36.6', '36.7', '37.4', '36.5', '36.7', '36.5', '36.7', '37.3', '36.6', '37.2', '36.5', '37.6', '36.9', '37.2', '36.5',
'36.7', '36.9', '37.5', '36.9', '37.6', '36.9', '36.7', '36.9', '36.4', '37.0', '36.6', '37.5', '37.5', '37.3', '36.7',
'37.0', '37.4', '36.5', '37.5', '37.0', '37.3', '36.4', '37.2', '37.2', '37.3', '36.6', '37.1', '37.1', '37.1', '37.3',
'37.2', '37.4', '36.5', '37.0', '36.4', '36.6', '36.8', '37.1', '36.9', '36.5', '36.9', '37.2', '37.3', '36.5', '37.5'
],
}
],
};