用echarts-line做一个自动告警图_echarts 实现图标警告提示-CSDN博客

本文链接：https://blog.csdn.net/qq_34485930/article/details/79790325

背景：设备仓储项目，计划用折线图展示近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();
});