echarts的折線圖中添加一條警戒線

如下圖：

模擬後臺數據：
var reg_data ={datas: [{desccode: “EfficiencyGraph”, yield: “97”, y: “81”, description: “08:00-09:00”, x: “1”},
{desccode: “EfficiencyGraph”, yield: “97”, y: “99.67”, description: “09:00-10:00”, x: “2”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “105.20”, description: “10:00-11:00”, x: “3”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “105.71”, description: “11:00-13:00”, x: “4”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “94.67”, description: “13:00-14:00”, x: “5”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “79.67”, description: “14:00-15:00”, x: “6”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “0”, description: “15:00-16:00”, x: “7”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “0”, description: “16:00-18:00”, x: “8”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “0”, description: “18:00-19:00”, x: “9”}
,{desccode: “EfficiencyGraph”, yield: “97”, y: “0”, description: “19:00-20:00”, x: “10”}]};

將以上數據轉換成可用的：
如：var data = {x:arrX,y:arrY,warnNum:s[0].yield,maxY:maxy};

以下是上圖的配置原碼：
function lineChartL(id,data) {
var lineChartDom = echarts.init($("#" + id).get(0));
// 圖表的配置項和數據
var option = {
title:{
/text:“警戒(”+data.warnNum+")",
right:18,
bottom:10 + (data.warnNum<=0?23:data.warnNum),/
textStyle:{
color:“red”,
fontSize:13,
fontWeight:“normal”,
fontFamily:“微軟雅黑”
}
},
series: [
{
name: “總直通率”, //鼠標懸停點的顯示名稱
data: data.y, //y點數據
type: ‘line’,
z:10,
areaStyle: { //漸變色
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: ‘rgba(2,237,255,0.6)’},
{offset: 0.5, color: ‘rgba(2,237,255,0.3)’},
{offset: 1, color: ‘rgba(2,237,255,0.1)’}
]
)
}},
smooth: true,
itemStyle: {
// color: ‘#02edff’,
normal:{
label:{show:true},
color:"#02edff"
}
},
showSymbol: true,
symbol: ‘circle’, //設定爲實心點
symbolSize: 10, //設定實心點的大小
center: [20, 50],
markLine : { //添加警戒線
symbol:“none”, //去掉警戒線最後面的箭頭
name:“警戒線”,
silent:true,
label:{
position:“end”, //將警示值放在哪個位置，三個值“start”,“middle”,“end” 開始 中點 結束
formatter: “警戒線(” +data.warnNum+ “)”,
color:“red”,
fontSize:14
},
data : [{
silent:true, //鼠標懸停事件 true沒有，false有
lineStyle:{ //警戒線的樣式 ，虛實 顏色
type:“solid”,
color:“red”
},
name: ‘警戒線’,
yAxis: data.warnNum
}]
}
}],
xAxis: {
type: ‘category’,
data: data.x,
axisLine: { // 座標軸小標記
lineStyle: { // 屬性lineStyle控制線條樣式
// fontWeight : ‘bolder’,
color: ‘#1d364a’,
// shadowColor : ‘#1d364a’, // 默認透明
width: 1
}
},
boundaryGap: false,
},
yAxis: [
{
type: ‘value’,
show: true,
minInterval: 0,
maxInterval: data.maxY,
min:0,
max:data.maxY,
splitNumber: 3,
nameTextStyle: {
color: “#fff”,
rich: {
color: “#fff”
}
},
axisLine: { // 座標軸小標記
lineStyle: { // 屬性lineStyle控制線條樣式
// fontWeight : ‘bolder’,
color: ‘#1d364a’,
// shadowColor : ‘#1d364a’, // 默認透明
width: 1
}
},
// 控制網格線是否顯示
splitLine: {
show: true,
// 改變軸線顏色
lineStyle: {
// 使用深淺的間隔色
color: [’#1d364a’],
width: 1
}
}
},
{
type: “value”,
// name:“abc”,
// nameLocation:“start”,
axisLine: { // 座標軸小標記
lineStyle: { // 屬性lineStyle控制線條樣式
// fontWeight : ‘bolder’,
color: ‘#1d364a’,
// shadowColor : ‘#1d364a’, // 默認透明
width: 1
}
}
}],
legend: {
data: [“Y”]
},
grid: { //修改圖表顯示位置
top: ‘10%’,
bottom: ‘10%’,
containLabel: true
},
tooltip: { //懸停顯示數據
// trigger: ‘axis’
},
textStyle: {
color: “#fff”
},
lineStyle: {
color: “#02edff”
}
};
lineChartDom.setOption(option);
}