Echarts加警示线/markLine，双Y轴，附各标签含义_echarts markline

作者：凡人多烦事01 | 2024-02-19 12:37:52

踩

echarts markline

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>

   <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:500px;"></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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/114739