先看看效果圖，玩了兩天還有太多沒玩出來
剛開始學的時候看官網文檔總是迷迷糊糊的，一直在到處搜索，最終得到此效果
但是還有個小問題，這三條線，當鼠標移動上去的時候文字會隱藏，不知道爲什麼
看看實現這三條線的js
data: [
{
name: '藍色預警',
yAxis: 187,
itemStyle : {
normal : {
lineStyle:{
color:'yellow',
type:'dotted' //'dotted'虛線 'solid'實線
},
label:{
show: true,
formatter: '{b} : {c}' ,
color:"black",
position: 'middle',/*****文字顯示的位置**********/
},
labelLine :{show:true}
}
}
},
[
{
name: '黃色預警',
coord: [10, 20]
},
{
coord: [20, 30]
}
],
{
name: '黃色預警',
yAxis: 310,
itemStyle : {
normal : {
lineStyle:{
color:'blue',
type:'dotted' //'dotted'虛線 'solid'實線
},
label:{
show: true,
formatter: '{b} : {c}' ,
color:"black",
position: 'middle',
align:"left",
align:"top"
},
labelLine :{show:true}
}
}
},
[
{
name: '紅色預警',
coord: [10, 20]
},
{
coord: [20, 30]
}
],
{
name: '紅色預警',
yAxis: 450,
itemStyle : {
normal : {
lineStyle:{
color:'red',
type:'dotted' //'dotted'虛線 'solid'實線
},
label:{
show: true, //是否正常顯示標籤
formatter: '{b} : {c}' ,
lineHeight:12,
color:"black",
position: 'middle',//標籤顯示的位置 'start' 線的起始點。'middle' 線的中點。'end' 線的結束點。
align:"left",
padding: [3, 4, 5, 6],
verticalAlign:"bottom",
offset:[30,40],
animation:{
show: false
}
},
labelLine :{show:true}
}
}
},
[
{
name: '紅色預警',
coord: [10, 20]
},
{
coord: [20, 30]
}
]
],
},這樣就畫出的需要的標示線，想畫多少條就在data中添加相應的數據就可以。