angular echart 实例

1.yjtjfx.html

 



    
        
             
    

预警数量统计

2.yjtjfxController.js

/**
 * Created by lcs on 2016/6/21.
 */

function yjtjfxController($rootScope, $scope, $http, $lang,
        yjtjChartConfig,yjxxChartConfig, jqgryjChartConfig,qjbhChartConfig ) {
    
    $scope.yjsltjTitle="预警数量统计";  
    
    $scope.declaration = function() {
        // 远程服务接口
        $scope.warningService = app.namingService.warning;
    }
    

    
    // 预警统计  预警信息
    $scope.getWarningType = function(timeType) {
        $http.post($scope.warningService.getYjslList,{
            timeType:timeType
        }).success( function(data) {
            var warningCaseDatas = new Array();
            if(null!= data && data.length>0){
                for (var i = 0; i < data.length; i++) {
                    var ls = new Object();
                    ls.text = data[i].name;
                    ls.value = parseInt(data[i].value);
                    ls.textValue = parseFloat(data[i].textValue);
                    warningCaseDatas.push(ls);
                }
            }else{
               warningCaseDatas.push({text : '无预警',value: [0,0]});
            }
            $scope.updateChartData( $scope.yjtjChartConfig, warningCaseDatas, false, "");//预警统计
            $scope.updateChartData( $scope.yjxxChartConfig, warningCaseDatas, '', "pie");//预警信息
            
            //注册点击事件的时候要先判断  否则会报registeEvents undefined
            if (null == $scope.yjtjChartConfig.api){
                return;
            }
            $scope.yjtjChartConfig.api.registeEvents(
                    $scope, [echarts.config.EVENT.CLICK ], function(param) {
                        var text = param.clientObj.text; // 获取分局代码
                        var textValue = param.clientObj.textValue;
                        if(textValue == "3" || textValue == "4" ) $scope.getYjsltjXzList(textValue,$scope.timeType,text);;
                        
            });

            
        });
            
    }    
    
/**
 * chartConfig ecahrt 对象
 * data 后台数据
 * flag 横纵坐标是否对调
 * type total：data value 为数组，值为数组相加;'':为 data value 为单个值，name  name： data value 为单个值
 * 更新报表数据
 */
    $scope.updateChartData = function(chartConfig, data, flag, type,name) {
        if (data == null || data.length < 1) {
            return;
        }
        if (type == 'pie') {
            
            if(name!=null && name != ""){
                $scope.yjxxtjTitle = name;
            }
            
            chartConfig.legend.data = $lang.concatListField2Arr(data, 'text');
            var dataArr = new Array();
            var datas = 0;
            data.forEach(function(item, index) {
                var obj = { name : item.text, value : item.value}
                dataArr.push(obj);
            });
            chartConfig.series[0].data = dataArr;
        } else {
            
            var catlgAxis = (!flag) ? chartConfig.xAxis : chartConfig.yAxis;
            catlgAxis[0].data = $lang.concatListField2Arr(data, 'text');
            
            if(name!=null && name != ""){//设置标题
                $scope.yjsltjTitle = name;
            }
            
          chartConfig.series[0].data = $lang.concatListField2Arr(data, 'value');
            
        }
        chartConfig.orginData = data;
        chartConfig.version = angular.uuid();
    };
    
    $scope.main = function() {

        $scope.getWarningType('day');//预警数量统计条形图  预警信息统计饼图

    };
    $scope.main();
};

app.controller('warningCtrl', yjtjfxController);

3.yjtjChartConfig.js

app.value('yjtjChartConfig', {
    version : 1.0,
    calculable : false,
    title : {
        //text: '预警数量统计',
        //subtext: '纯属虚构'
    },
    tooltip : {
        show : false,
        position:'top',
        trigger: 'axis'
    },
    color:[
        "#004b97"    
    ],
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'category',
            data : ['人流预警--','人员预警','偏高预警','高热预警','情报预警'],
            splitLine : {
                show : true
            }
            
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitLine : {
                show : true
            }
        }
    ],
    series : [
        {
            //clickable: true,
            itemStyle : {
                normal:
                    {
                    label :
                        {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#004b97'
                            }
                        }
                    }
            },
            name:'数量统计',
            type:'bar',
            data:[0,1,2,3,4],//没有这个无法点击
/*            markPoint : {
                data : [
                    {type : 'min', name: '最小值'},
                    {type : 'max', name: '最大值'}
                ]
            }*/
/*            tooltip:{
                axisPointer:{
                    crossStyle:{
                            
                    }
                }
            }*/
        },
        
    ]
});