echart,柱状图多列的展示

<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();
        }
    }