背景：设备仓储项目，计划用折线图展示近7天的库存量，与使用量，当库存量过低时，显示告警图标

var myChart1=echarts.init(document.getElementById("echart-zb"),'macarons');//设置一个echarts容器

option1 = {  
    tooltip: {  
        trigger: 'axis',  
        axisPointer: {  
            type: 'cross',  
            crossStyle: {  
                color: '#999'  
            }  
        }  
    },  
    legend: {  //显示的图例
    show:true,
    bottom:10,
    left:50,
    textStyle:{
    color:'#666',
    fontSize:12
    },
    itemGap:20,
        data:['设备一','设备二','设备三'],
        selectedMode:'single',  //每次显示一种设备，点击图例时切换
    },  
    grid: {              //图表相对于容器的位置
    show:false,
    top:'30',
    bottom:'60',
    right:'60',
    left:'60'
    },
    xAxis: [  //x轴为日期
        {  
            type: 'category',  
            data: ['2018/03/23','2018/03/24','2018/03/25','2018/03/26','2018/03/27',
            '2018/03/28','2018/03/29'],   
            interval:0,
        }  
    ],  
    yAxis: [     //y轴位数据
        {  
            name:'终端数量',
            type: 'value',   
        }
    ],  
    series: [  
        {  
            name:'设备一',  
            type:'line',  
            smooth: true,        //圆滑的折线
            data:[30000,25000,18000,40000,30000,20000,11000],
            symbolSize:10,        //拐点图标大小
            itemStyle: {
                  normal: {color: '#00CCFF'},  //折线图颜色
                       },

            markPoint: {        //告警标识

//告警的位置，除了这种坐标样式还有很多，这里适合我用

                data: [{coord:["2018/03/29",11000]}]，
                itemStyle: {                                             
                    normal: {
                    color:'#f00',      //告警图表的颜色
                    label: {
                            show: true,
                            formatter: "预警 : 库存低于7000",  //显示的告警文字
                            fontSize:20,
                            position:'top',        //文字位置
                            textStyle: {
                                   color: '#f00'       //告警文字颜色
                                    }
                                },
                        },
                       
                      }
        },
        areaStyle: {                              //下边为设置阴影的区域
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
        },
         {  
            name:'设备一',  
            type:'line',  
            smooth: true,
            symbolSize:10,
            data:[5000,7000,8000,10000,9000,8000,7000],
            itemStyle: {
            normal: {
                color: '#f7b851'
            }
        },
             areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
         },
        {  
            name:'设备二',  
            type:'line',  
            smooth: true,
            symbolSize:10,
            data:[35000,30000,23000,40000,28000,20000,11000],
            itemStyle: {
                  normal: {color: '#00CC66'},
                       },
           markPoint: {
                data: [
                    {coord:["2018/03/29",11000]}
                ],
               itemStyle: {
               normal: {
                    color:'#f00',
                    label: {
                            show: true,
                            formatter: "预警 : 库存低于7000",
                            fontSize:20,
                            position:'top',
                            textStyle: {
                                   color: '#f00'
                                    }
                                },
                        },
                      }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
        },
         {  
            name:'设备二',  
            type:'line',  
           smooth: true,
           symbolSize:10,
            data:[5000,9000,8000,10000,9000,8000,7000],
              itemStyle: {
            normal: {
                color: '#f7b851'
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
         },
          {  
            name:'设备三',  
            type:'line',  
            smooth: true,
            symbolSize:10,
            data:[35000,30000,23000,40000,28000,20000,11000],
            itemStyle: {
                  normal: {color: '#6600CC'},
                       },
           markPoint: {
                data: [
                    {coord:["2018/03/29",11000]}
                ],
               itemStyle: {
               normal: {
                    color:'#f00',
                    label: {
                            show: true,
                            formatter: "预警 : 库存低于7000",
                            fontSize:20,
                            position:'top',
                            textStyle: {
                                   color: '#f00'
                                    }
                                },
                        },
                      }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
        },
         {  
            name:'设备三',  
            type:'line',  
           smooth: true,
           symbolSize:10,
            data:[5000,9000,8000,10000,9000,8000,7000],
              itemStyle: {
            normal: {
                color: '#f7b851'
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(216, 244, 247,1)'
                }, {
                    offset: 1,
                    color: 'rgba(216, 244, 247,1)'
                }], false)
            }
        },
         }
    ]  
};
//以下注释为：交互时自动控制预警图表，说一下大体思路，后台交互，采用ajax传递过来的参数，每种的设备的库//存量-使用量，若<7000时，告警，只需将你获取的数据，满足条件时将，告警坐标放到data[]里就可以了。
//for(var i=0;i<datas.length;i++){
// var gm_warn=datas[i].all_gm-datas[i].use_gm;
// var jdh_warn=datas[i].all_jdh-datas[i].use_jdh;
// var znwg_warn=datas[i].all_znwg-datas[i].use_znwg;
//  
// if(gm_warn<7000){
// var res=[];
// res.push(datas[i].dat);
// res.push(datas[i].all_gm);
//      var res1=[];
//      res1.push(res);
// series[0].markPoint.data=res1;
// }
// if(jdh_warn<7000){
// var res=[];
// res.push(datas[i].dat);
// res.push(datas[i].all_gm);
//      var res1=[];
//      res1.push(res);
// series[1].markPoint.data=res1;
// }
// if(znwg_warn<7000){
// var res=[];
// res.push(datas[i].dat);
// res.push(datas[i].all_gm);
//      var res1=[];
//      res1.push(res);
// series[2].markPoint.data=res1;
// }
//}

myChart1.setOption(option1);

 //这块代码也很重要，因为echarts图表的容器必须要设置一个有确定大小

 //，height、width的容器，但是对于每个屏幕大小不一的电脑就会有问题

//，所以，这里resize可 自适应一下

$(window).resize(function() {  

myChart1.resize();           
});                                            

//后台交互你们也测试不了，那么我就展示一下大体图样吧

本人原创，非本人允许禁止转载