series:[{第一组数据},{第二组数据}]：series里面放生成柱状图或折线图的数组，
而markLine是数组的一个属性，要放在数组内，每组数组可以有自己独立的markLine，
series:[{
name: ''销量'',
type: ''bar'',
data: datas1,
yAxisIndex:0,
//警示线
markLine :{...}},{
name: ''百分比'',
type: ''line'',
data: datas2,
yAxisIndex:1,
//警示线
markLine :{...}}]
markLine先设置公共属性，然后再写data[]，
markLine : {
symbol:[''circle'', ''arrow''], //表示箭头从左向右
//symbol:[''arrow'', ''circle''], //表示箭头从右向左
//symbol:"none", //表示没有箭头的直线
//警示线标签
label:{
show:true,
position:"middle", //将警示值放在哪个位置，start middle end 开头 中间 结尾
//formatter: "60%", //警示线上显示内容
},
//警示线的样式，虚实 颜色
lineStyle:{
type:"solid",
color:"#FF4B5C",
},
//symbol,label,lineStyle也可以包裹在itemStyle:{normal:{symbol...}}里面，
data : [{......}]
markLine的data的两种常用三种常用样式：
//name警示线命名，type值有 max min average，
{name:''平均值'',type:''average''},
//警示线标签及样式单独设置
{name:''Y轴值为80的水平线'',yAxis:80},
//两个坐标之间的标线
[
{name: ''起点'', xAxis:''衬衫'' , yAxis:''40'', symbol:''circle''},
{name: ''终点'', xAxis:''羊毛衫'', yAxis:''110'', symbol:''circle''}
],
每个markLine内的data数组还可以设置自己独立的样式，但一定要放在{}内，不能放在[]内，
即 [ { 起点坐标，属性设置symbol:''circle'' , label:{} , lineStyle:{} } , { 终点坐标 } ]。
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EChartsTest</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(''main''));
//创建初始数组
var datas = [10,20,50,100,80,70];
var rates = [75,85,80,90,85,90];
//指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例"
},
//提示框取默认值，即鼠标移动到柱状图会显示内容
tooltip: {
trigger: ''axis'', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
axisPointer: { //坐标轴指示器，坐标轴触发有效，
type: ''cross'', //默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: ''#fff''
}
}
},//图例
legend: {
data:[''销量'']
},
//X轴内容
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: [
//第一条Y轴
{
position:''left'',
name:''数量'',
min:0,
max:120
},
//第二条Y轴
{
position:''right'',
name:''比例'',
min:0,
max:100,
//坐标轴线
axisLine: {show: false},
//分割线/网格线
splitLine: {show: false}
}],
//显示数据
series: [
//第一组数据参考坐标轴yAxisIndex:0
{
name: ''销量'',
type: ''bar'',
data: datas,
yAxisIndex:0,
//警示线
markLine : {
symbol:[''circle'', ''arrow''], //表示箭头从左向右
//symbol:[''arrow'', ''circle''], //表示箭头从右向左
//symbol:"none", //表示没有箭头的直线
//警示线标签
label:{
show:true,
position:"middle", //将警示值放在哪个位置，start middle end 开头 中间 结尾
//formatter: "60%", //警示线上显示内容
},
//警示线的样式，虚实 颜色
lineStyle:{
type:"solid",
color:"#FF4B5C",
},
//symbol,label,lineStyle也可以包裹在itemStyle:{normal:{symbol...}}里面，
data : [
//可以有多条警示线，另外多条警示线还可以对应不同的yAxis，
//name警示线命名，type值有 max min average，
{name:''平均值'',type:''average''},
//警示线标签及样式单独设置
{name:''Y轴值为80的水平线'',yAxis:80,
label:{
show:true,
position:"middle",
},
lineStyle:{
type:"solid",
color:"#008000",
}
},
[
// 起点和终点的项目共用一个 name
{name: ''最小值到最大值'',type: ''min''},
{type: ''max''}
],
[
{name: ''两个坐标之间的标线'',coord: [''衬衫'', 20]},
{coord: [''羊毛衫'', 30]}
],
[
// 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
{yAxis:''max'', x:''80%''},
{type: ''max''}
],
[
{
name: ''两个屏幕坐标之间的标线'',
x: 100,
y: 180,
lineStyle:{
type:"solid",
color:"#4169E1",
}
},
{
x: 500,
y: 300
}
]
]
}
},
//第二组数据参考坐标轴yAxisIndex:1
{
name: ''%'',
type: ''line'',
data: rates,
yAxisIndex:1,
//警示线
markLine : {
symbol:''none'',
//警示线标签
label:{
show:true,
position:"middle", //将警示值放在哪个位置，start middle end 开头 中间 结尾
formatter: "第二个坐标轴的警示线", //警示线上显示内容
},
//警示线的样式，虚实 颜色
lineStyle:{
type:"solid",
color:"#FF4B5C",
},
//symbol,label,lineStyle也可以包裹在itemStyle:{normal:{symbol...}}里面，
data : [
//可以有多条警示线，另外多条警示线还可以对应不同的yAxis，
//name警示线命名，type值有 max min average，
{name:''最大值'',type:''max''}]
}
}
],
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
