用图表形式展示单个设备告警开始时间、结束时间、持续时长;以及告警类型、是否恢复等等
该图表示:
1、矩形首尾:告警开始、结束时间
2、矩形长度:告警持续时常
3、颜色:告警等级
4、白色边框:该告警是否为误告
5、模糊光圈:该告警是否恢复
initChart=()=>{
echarts.init(document.getElementById('profileChart')).dispose(); // 销毁实例
let chart = echarts.init(document.getElementById('profileChart'))
let detailList=JSON.parse(JSON.stringify(this.state.detailSource));
//x轴时间
let xArr=[]
for(let i=0;i<detailList.length;i++){
xArr.push(detailList[i].OccTime)
xArr.push(this.calEndTime(detailList[i].OccTime,detailList[i].Period))
}
let minTime=xArr.length>0 && xArr[0].split(' ')[0]
let maxTime=xArr.length>0 && moment(new Date(xArr[xArr.length-1]).getTime()+24*3600*1000).format('YYYY-MM-DD HH:mm:ss').split(' ')[0]
//series中的data
let sdata=[]
for(let i=0;i<detailList.length;i++){
sdata.push(
{
itemStyle: {
normal: detailList[i].IsRestore?
{
color: almLvl[detailList[i].AlarmLevel].LevelColor, //条形颜色
borderColor:"#fff",
borderWidth:detailList[i].IsFAlm?3:0,
}:
{
color: almLvl[detailList[i].AlarmLevel].LevelColor, //条形颜色
borderColor:"#fff",
borderWidth:detailList[i].IsFAlm?3:0,
// opacity:detailList[i].IsRestore?1:0.6,
shadowColor:almLvl[detailList[i].AlarmLevel].LevelColor,
shadowBlur:5,
shadowOffsetY:-5
}
},
name: '',
value: [0, detailList[i].OccTime, this.calEndTime(detailList[i].OccTime,detailList[i].Period),detailList[i].Text]//第一位0,1,2代表y轴的索引,后两位代表x轴数据开始和结束,最后一位表示文本描述
}
)
}
console.log(xArr,sdata)
chart.setOption({
tooltip: {
formatter: function (params) {
return params.value[3];
}
},
dataZoom: [//缩放条
{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 150,//距离顶部位置
height: 5,//缩放条粗细
borderColor: 'transparent',
backgroundColor: '#043e69',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 10,//手柄粗细
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
},
{
type: 'inside',
filterMode: 'weakFilter'
}
],
grid: {
left: '10%',
right: '10%',
top: '40%',
bottom: '10%',
containLabel: true,
height:60
},
xAxis: {
type:'time',
min: minTime,
max: maxTime,
axisLine:{
lineStyle:{
color:'#ccc'
}
},
axisTick:{
alignWithLabel:true
},
splitLine:{
show:false
}
// data:xArr//['2018-06-15','2018-06-25', '2018-07-01','2018-08-25','2018-11-14', '2018-12-13']
},
yAxis: {
axisLine:{
lineStyle:{
color:'#ccc'
}
},
data:['']
},
series: [{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = 24;
return {
type: 'rect',
shape:echarts.graphic.clipRectByRect({// _that.$echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
encode: {
x: [1, 2],
y: 0
},
data:sdata
}]
})
}