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:{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:{} } , { 终点坐标 } ]。

效果如下:

Echarts加警示线/markLine,双Y轴,附各标签含义_第1张图片

代码如下:




   
    EChartsTest
   
    


   
   


    
   
    

你可能感兴趣的:(Echarts加警示线/markLine,双Y轴,附各标签含义)