统计按单位统计每个单位下子系统的信息
html
<div id="chart" style="height: 100%;"></div>
js
option = {
color: ['#3e6591', '#eb7d22', '#d73f45'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: 250
},
xAxis: {
axisLine: {
lineStyle: {color: '#ccc'}
},
axisLabel: {
textStyle: {color: '#777'}
}
},
yAxis: [{
inverse: true,
splitLine: {
show: true
},
axisTick: {
length: 100,
lineStyle: {color: '#ccc'}
},
axisLine: {
lineStyle: {color: '#ccc'}
},
data: ['-', '-', '-', '-', '-','-', '-','-', '-','-']
}, {
name: '',
nameLocation: 'start',
nameTextStyle: {
fontWeight: 'bold'
},
position: 'left',
offset: 130,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: '#ccc'}
},
axisLabel: {
inside: true
},
inverse: true,
data: []
}, {
name: ' 下属单位',
nameLocation: 'start',
nameTextStyle: {
fontWeight: 'bold'
},
position: 'left',
offset: 220,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 100,
inside: true,
lineStyle: {color: '#ccc'}
},
axisLabel: {
inside: true
},
inverse: true,
data: ['xxx站', 'YYY站', 'nnn站', 'ppp站', 'qqq站','eee站', 'aaa站', 'bbb站', 'ccc站','ddd站']
}],
series: [{
name:"火警未处理",
stack: '火警',
type: 'bar',
data:[220, 182, 191, 234, 290,123, 131, 254, 278,121],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#008000'},
formatter: '火灾报警系统',
}
}
},{
name:"故障未处理",
stack: '火警',
type: 'bar',
data:[220, 182, 191, 234, 290,212, 131, 254, 278,121],
// label: {
// normal: {
// show: true,
// position: 'left',
// textStyle: {color: '#000'},
// formatter: '火灾报警系统',
// }
// }
},{
name:"告警未处理",
stack: '火警',
type: 'bar',
data:[220, 182, 191, 234, 290,230, 131, 254, 278,121]
}, {
name:"任务完成",
type: 'bar',
stack: '巡检',
data:[210, 132, 91, 204, 220,132, 131, 254, 278,121],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#FFA500'},
formatter: '巡检系统',
}
}
}, {
name:"任务未完成",
type: 'bar',
stack: '巡检',
data:[210, 132, 91, 204, 220,153, 131, 254, 278,121]
}, {
name:"告警数",
type: 'bar',
stack: '电气火灾',
data:[210, 132, 91, 204, 220,261, 131, 254, 278,121],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#B10E81'},
formatter: '电气火灾系统',
}
}
}, {
name:"告警数",
type: 'bar',
stack: '电气火灾',
data:[210, 132, 91, 204, 220,201, 131, 254, 278,121]
}, {
name:"告警数",
type: 'bar',
stack: '防火门',
data:[210, 132, 91, 204, 220,211, 131, 254, 278,121],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: 'cadetblue'},
formatter: '防火门系统',
}
}
},, {
name:"故障数",
type: 'bar',
stack: '防火门',
data:[210, 132, 91, 204, 220,152, 131, 254, 278,121]
}, {
name:"压力异常",
type: 'bar',
stack: '水',
data:[120, 132, 131, 254, 278,162, 131, 254, 278,121],
label: {
normal: {
show: true,
position: 'left',
textStyle: {color: '#000'},
formatter: '水系统',
}
}
}, {
name:"液位异常",
type: 'bar',
stack: '水',
data:[120, 132, 131, 254, 278,121, 131, 254, 278,121]
}, {
type: 'bar',
data:['-', '-', '-', '-', '-','-', '-','-', '-','-'],
yAxisIndex: 1
}, {
type: 'bar',
data:['-', '-', '-', '-', '-','-', '-','-', '-','-'],
yAxisIndex: 2
}]
};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);