程式碼：

var option = {
backgroundColor: 'rgba(1,202,217,.2)',
color: ['#ff0000','yellow','#00ff00'],
tooltip: {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
legend: {
show : false,
x: 'right',
data:['睡眠深度','睡眠穩度'],
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize:'12'
}
//selectedMode: 'single'//預設顯示一條，其他隱藏
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
xAxis : [
{
type : 'category',
data : data.xData,
axisLabel: {
                    textStyle: {
                        fontSize:10,
color:'#ffffff'
                    }
                },
axisLine: {//x軸線的顏色以及寬度
show: true,
lineStyle: {
color: "#ffffff"
}
}
}
],
yAxis : [
{
type : 'value',
axisLine: {//x軸線的顏色以及寬度
show: true,
lineStyle: {
color: "#ffffff"
}
},
axisLabel: {
                    // rotate:-10,
                    interval:0,
                    textStyle: {
                        fontSize:10,
color:'#ffffff'
                    }
                },
splitLine: { //網格線
show: false
},
max:100,
min:0,
splitNumber:5
}
],
grid:{
top:"30px",
left:"30px",
right:"3px",
bottom:"30px"
},
series : [{
name: '睡眠質量',
type: 'line',
smooth: true,
data: data.sleep,
markArea: {
data: [ [{
name: '好',
yAxis: '100',
itemStyle:{
color:'green'
},
label:{
show: true,
offset: [125, 10],
color: 'red',
fontSize: 9,
zIndex: 10,
}
}, {
yAxis: '90'
}], [{
name: '較好',
yAxis: '75',
itemStyle:{
color:'#a1c387'
},
label:{
show: true,
offset: [125, 15],
color: 'red',
fontSize: 9,
zIndex: 10,
}
}, {
yAxis: '90'
}], [{
name: '正常',
yAxis: '60',
itemStyle:{
color:'#bdedce'
},
label:{
show: true,
offset: [126, 15],
color: 'red',
fontSize: 9,
zIndex: 10,
}
}, {
yAxis: '75'
}], [{
name: '較差',
yAxis: '40',
itemStyle:{
color:'#e8edbd'
},
label:{
show: true,
offset: [126, 18],
color: 'red',
fontSize: 9,
zIndex: 10,
}
}, {
yAxis: '60'
}], [{
name: '差',
yAxis: '0',
itemStyle:{
color:'#f7ef8d'
},
label:{
show: true,
offset: [125, 28],
color: 'red',
fontSize: 9,
zIndex: 10,
}
}, {
yAxis: '40'
}] ]
}
}
]

}