<script src="${ctx}/resources/scripts/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: '${ctx}/resources/scripts/echarts/build/dist'
}
});
</script>
//区域统计
function areaStatics(beginDate,endDate,alarmType,area){
require(['echarts','echarts/chart/bar'],alarmArea);
var alarmAreaChart;
var sourceType = 0;
function alarmArea(ec) {
alarmAreaChart = ec.init(document.getElementById('alarmArea'));
alarmAreaChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
var areaData = new Array();
var jjgjData = new Array();
var zygjData = new Array();
var cygjData = new Array();
var jggjData = new Array();
$.ajax({
url:'${ctx}/statics!querySafeAlarmArea.json',
type:'POST',
data:{'beginTime':beginDate,'endTime':endDate,'typeMessage':alarmType,'areaMessage':area,'toolMessage':toolMessage},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
areaData.push(datas.areaName);
jjgjData.push(datas.jjgj);
zygjData.push(datas.zygj);
cygjData.push(datas.cygj);
jggjData.push(datas.jggj);
}
}
});
alarmAreaOption = {
title : {
text: '网络告警区域统计',
subtext: '行政区',
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
orient :'horizontal' ,
x : 'left',
data:['紧急告警','重要告警','次要告警','警告告警']
},
toolbox: {
show : true,
orient: 'horizontal',
x: 'right',
y: 'top',
feature : {
magicType : {show: true, type: ['stack', 'tiled']},
dataView : {show: true, readOnly: false},
myTool : {
show : true,
title : '刷新',
icon : '${ctx}/views/zwww/tjfx/refresh.png',
onclick : function (){
alarmAreaChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
alarmAreaChart.clear();
areaData = new Array();
jjgjData = new Array();
zygjData = new Array();
cygjData = new Array();
jggjData = new Array();
$.ajax({
url:'${ctx}/statics!querySafeAlarmArea.json',
type:'POST',
data:{'beginTime':beginDate,'endTime':endDate,'typeMessage':alarmType,'areaMessage':area,'toolMessage':'all'},
async:false,
success:function(result){
var re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
areaData.push(datas.areaName);
jjgjData.push(datas.jjgj);
zygjData.push(datas.zygj);
cygjData.push(datas.cygj);
jggjData.push(datas.jggj);
}
}
});
sourceType = 0;
alarmAreaOption.title.subtext='行政区';
alarmAreaOption.xAxis[0].data=areaData;
alarmAreaOption.series[0].data =jjgjData;
alarmAreaOption.series[1].data =zygjData;
alarmAreaOption.series[2].data =cygjData;
alarmAreaOption.series[3].data =jggjData;
alarmAreaChart.setOption(alarmAreaOption);
alarmAreaChart.hideLoading();
}
},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : areaData
}
],
yAxis : [
{
type : 'value',
}
],
series : [
{
name:'紧急告警',
type:'bar',
stack: '堆积',
data: jjgjData,
barMinHeight : 5 ,
itemStyle: {
normal: {
label: {
show: true,
position : 'inside',
formatter : '{a}:{c}个',
textStyle: {
color: '#000000'
}
}
}
}
},
{
name:'重要告警',
type:'bar',
stack: '堆积',
data:zygjData,
barMinHeight : 5 ,
itemStyle: {
normal: {
label: {
show: true,
position : 'inside',
formatter : '{a}:{c}个',
textStyle: {
color: '#000000'
}
}
}
}
},
{
name:'次要告警',
type:'bar',
stack: '堆积',
data:cygjData,
barMinHeight : 5 ,
itemStyle: {
normal: {
label: {
show: true,
position : 'inside',
formatter : '{a}:{c}个',
textStyle: {
color: '#000000'
}
}
}
}
},
{
name:'警告告警',
type:'bar',
stack: '堆积',
data:jggjData,
barMinHeight : 115 ,
itemStyle: {
normal: {
label: {
show: true,
position : 'inside',
formatter : '{a}:{c}个',
textStyle: {
color: '#000000'
}
}
}
}
}
]
};
var ecConfig = require('echarts/config');
function changeData(param) {
alarmAreaChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
toolMessage = param.name;
if(sourceType>=3){
alert("没有下级");
alarmAreaChart.hideLoading();
}else{
$.ajax({
url:'${ctx}/statics!querySafeAlarmArea.json',
type:'POST',
data:{'beginTime':beginDate,'endTime':endDate,'typeMessage':alarmType,'areaMessage':area,'toolMessage':toolMessage},
async:false,
success:function(result){
var re = result.data;
areaData = new Array();
jjgjData = new Array();
zygjData = new Array();
cygjData = new Array();
jggjData = new Array();
for(var i =0 ;i<re.length;i++){
var datas = re[i];
areaData.push(datas.areaName);
jjgjData.push(datas.jjgj);
zygjData.push(datas.zygj);
cygjData.push(datas.cygj);
jggjData.push(datas.jggj);
sourceType = datas.sourceType;
}
alarmAreaChart.clear();
alarmAreaOption.title.subtext=toolMessage;
alarmAreaOption.xAxis[0].data=areaData;
alarmAreaOption.series[0].data =jjgjData;
alarmAreaOption.series[1].data =zygjData;
alarmAreaOption.series[2].data =cygjData;
alarmAreaOption.series[3].data =jggjData;
alarmAreaChart.setOption(alarmAreaOption);
alarmAreaChart.hideLoading();
}
});
}
}
alarmAreaChart.on(ecConfig.EVENT.CLICK, changeData);
alarmAreaChart.setOption(alarmAreaOption);
alarmAreaChart.hideLoading();
}
}
echart,柱状图多列的展示
猜你喜欢
转载自yuhuiblog6338999322098842.iteye.com/blog/2193088
周排行