<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="markline.aspx.cs" Inherits="BaiduSDKDemo1203.EchartDemo.markline" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="width: 100%; height: 400px;">
</div>
</form>
</body>
</html>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/echarts-all.js" type="text/javascript"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// app.title = '坐標軸刻度與標簽對齊';
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接訪問',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
markLine: {
data : [{
silent:false, //鼠標懸停事件 true沒有，false有
lineStyle:{ //警戒線的樣式 ，虛實 顏色
type:"solid",
color:"#3398DB",
},
label:{
position:'end',
formatter:"及格(150)"
},
yAxis:150 // 警戒線的標注值，可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分為最大，最小，平均值
},
{
silent:false, //鼠標懸停事件 true沒有，false有
lineStyle:{ //警戒線的樣式 ，虛實 顏色
type:"solid",
color:"#FA3934",
},
label:{
position:'end',
formatter:"優秀(350)",
fontSize:'8'
},
yAxis:350 // 警戒線的標注值，可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分為最大，最小，平均值
}
]
}
}
]
};
//設置series.markline.data.yAxis的屬性
console.log(option);
// console.log(option.series);
// console.log(option.series[0].markLine);
option.series[0].markLine.data[0].yAxis=140;
option.series[0].markLine.data[1].yAxis=208;
myChart.setOption(option);
</script>
<script type="text/javascript">
//https://blog.csdn.net/haijun1993/article/details/80005785
//markline是在series: [{}]里面的，記住位置，同下級，找了一會。
//markLine : {
// symbol:"none",
//
// /*symbol:"none", //去掉警戒線最后面的箭頭
// label:{
// position:"end" , //將警示值放在哪個位置，三個值“start”,"middle","end" 開始 中點 結束
//
//
// },*/
// data : [{
//
// silent:false, //鼠標懸停事件 true沒有，false有
// lineStyle:{ //警戒線的樣式 ，虛實 顏色
// type:"solid",
// color:"#3398DB",
// },
// label:{
// position:'end',
// formatter:"及格(150)"
// },
// yAxis:150 // 警戒線的標注值，可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分為最大，最小，平均值
//
// },
// {
//
// silent:false, //鼠標懸停事件 true沒有，false有
// lineStyle:{ //警戒線的樣式 ，虛實 顏色
// type:"solid",
// color:"#FA3934",
//
// },
// label:{
// position:'end',
// formatter:"優秀(350)",
// fontSize:'8'
// },
// yAxis:350 // 警戒線的標注值，可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分為最大，最小，平均值
//
// }
// ]
// }
</script>
效果圖:
