Echarts加警⽰线markLine，双Y轴，附各标签含义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:{}}⾥⾯，
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="cdn.bootcss/echarts/4.2.1-rc1/echarts.min.js"></script> </head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
//创建初始数组
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',
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:{}}⾥⾯，
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",
}
},
position标签属性[
// 起点和终点的项⽬共⽤⼀个 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:{}}⾥⾯，
data : [
//可以有多条警⽰线，另外多条警⽰线还可以对应不同的yAxis，
//name警⽰线命名，type值有 max min average，
{name:'最⼤值',type:'max'}]
}
}
]
,
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。