angular echart 实例

1.yjtjfx.html

<fedc-script src="fed.chart"></fedc-script>

<fed-script src="app.layout"></fed-script>
<fedc-script src="modules/yjtjfx/echartConfig/yjtjChartConfig.js"></fedc-script>

<fedc-script src="modules/yjtjfx/yjtjfxController.js"></fedc-script>
</style>
<body >

   <table ng-controller = "warningCtrl" style="margin-left:60px">
       <tr>
          <td>
                    <div class="title" ng-bind="yjsltjTitle">预警数量统计</div>
                   <fedc-chart class="echarts" config="yjtjChartConfig" width="700" height="250">
               </div>
           </td>
   </table>

</body>

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:{

                   }
               }
            }*/
        },

    ]
});

猜你喜欢