zuel-itsm-3.0.2/assets/js/controllers/charts1.js

'use strict';
app.controller('charts1Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "Restangular", "api_hkreport", function($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, Restangular, api_hkreport) {
//     // 球
// var dom_ball = document.getElementById("container_ball");
// var myChart_ball = echarts.init(dom_ball);
// var app = {};
// var option_ball = null;
// option_ball = {
//     globe: {
//         baseTexture: "assets/images/daping/xingxing.png",
//         shading: 'realistic',
//         realisticMaterial: {
//             roughness: 10
//         },
//         postEffect: {
//             enable: true
//         },
//         light: {
//             main: {
//                 intensity: 0.1,
//                 shadow: false
//             },
//             ambientCubemap: {
//             }
//         }
//     }
// };;
// if (option_ball && typeof option_ball === "object") {
//     myChart_ball.setOption(option_ball, true);
// }
// 事件处理近五年统计分析图
var dom_call = document.getElementById("incident_handle");
var myChart_incident_handle = echarts.init(dom_call);
myChart_incident_handle.showLoading({　　
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#fff',
    maskColor: 'rgba(255,255,255,0)',
    zlevel: 0
});
var app = {};
var option_incident_handle = null;
option_incident_handle = {
    backgroundColor: "transparent",
    tooltip: {},
    grid: {
        top: '8%',
        left: '1%',
        right: '1%',
        bottom: '8%',
        containLabel: true,
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.4)'
            },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
                color: 'rgba(255,255,255,1)',
                margin: 15,
            },
        },
        axisTick: {
            show: false,
        },
        data: ['2015', '2016', '2017', '2018', '2019'],
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        splitNumber: 5,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.6)'
            }
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            margin: 20,
            textStyle: {
                color: 'rgba(255,255,255,1)',

            },
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
        name: '注册总量',
        type: 'line',
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
            normal: {
                color: "#228ed7", // 线条颜色
            },
            borderColor: '#f0f'
        },
        itemStyle: {
            normal: {
                color: "#228ed7",
            }
        },
        tooltip: {
            show: false
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        // color: 'rgba(0,154,120,1)'
                        color: 'rgba(34,142,215,0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(0,0,0, 0)'
                    }
                ], false),
                // shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                shadowColor: 'rgba(34,142,215, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: [393, 438, 485, 631, 689]
    }, 
    {
        name: '最新注册量',
        type: 'bar',
        barWidth: 20,
        tooltip: {
            show: false
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = ['#228ed7', '#118178', '#9735ab', '#f98f3b', '#ecc625', '#1cfffb', '#1dfff1'];
                    return colorList[params.dataIndex];
                }
            }
        },
        data: [393, 438, 485, 631, 689]
    }
]
};;
// 工作组处理事件统计及占比
var dom_incident_group = document.getElementById("charts1_incident_group");
var myChart_incident_group = echarts.init(dom_incident_group);
myChart_incident_group.showLoading({　　
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#fff',
    maskColor: 'rgba(255,255,255,0)',
    zlevel: 0
});
var app = {};
var option_incident_group = null;
option_incident_group = {
    title: {
        subtext: '0',
        text: "事件总数（件）",
        itemGap: 3,
        "x": '44%',
        "y": '33%',
        textAlign: "center",
        "textStyle": {
            "fontWeight": 'normal',
            "fontSize": 16,
            "color": '#18f0ff',

        },
        "subtextStyle": {
            "fontWeight": 'normal',
            "fontSize": 22,
            "color": 'white',
            "lineHeight": 44
        },

    },
    grid: {
        top: '8%',
        left: '1%',
        right: '1%',
        bottom: '8%',
        containLabel: true,
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: 'bottom',
        left:"23%",
        data:['工作组1','工作组2','工作组3','工作组4','工作组5','工作组6'],
        textStyle: {
            color: 'white',
            borderColor: '#fff',
            fontSize:13
        },
        formatter: function(param) {
            console.log(param);
            // for (var i = 0; i < $scope.incident_handler_group_data.length; i++) {
            //     if ($scope.incident_handler_group_data[i].name == param) {
            //         return ' ' + $scope.incident_handler_group_data[i].toname + '   ' + $scope.incident_handler_group_data[i].tovalue + ' ' + $scope.incident_handler_group_data[i].proportion + '%';
            //     }
            // }
            for (var i = 0; i < $scope.incident_handler_group_data.length; i++) {
                if ($scope.incident_handler_group_data[i].name == param) {
                    return ' ' + $scope.incident_handler_group_data[i].toname;
                }
            }
        }, 
        itemWidth:15,
        width:450,
        height:100,
        itemGap:20,
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '50%'],
            center: ['45%', '40%'],
            avoidLabelOverlap: true,
            label: {
                align: 'left',
                normal: {
                    show: true,
                    position: 'outside',
                    rich:"rich",
                    formatter:function(param){
                        // console.log(param)
                        return param.value+'   '+param.percent+"%"
                    },
                    color:"rgba(255,255,255,0.6)"
                },
                // emphasis: {
                //     show: false,
                //     textStyle: {
                //         fontSize: '30',
                //         fontWeight: 'bold'
                //     }
                // }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            data:[
                {value:335, name:'工作组1'},
                {value:310, name:'工作组2'},
                {value:234, name:'工作组3'},
                {value:135, name:'工作组4'},
                {value:1548, name:'工作组5'},
                {value:154, name:'工作组6'}
            ]
        }
    ],
    color:["#228ed7","#d0402f","#f98f3b","#ecc625","#118178","#c053d5"]
};;
// 人员处理事件TOP10
// var people_myColor = ['#18f0ff', '#18f0ff', '#18f0ff', '#18f0ff', '#18f0ff', '#18f0ff', '#00ccff', '#ddf514', '#f5db14', '#ff333d'];
var people_myColor = ['rgba(34,142,215,1)', 'rgba(34,142,215,1)', 'rgba(34,142,215,1)', 'rgba(34,142,215,1)', 'rgba(34,142,215,1)', 'rgba(34,142,215,1)', 'rgba(34,142,215,1)','rgba(208,64,47,1)', 'rgba(249,143,59,1)', 'rgba(236,198,37,1)'];
var people_myColor2 = ['rgba(34,142,215,0)', 'rgba(34,142,215,0)', 'rgba(34,142,215,0)', 'rgba(34,142,215,0)', 'rgba(34,142,215,0)', 'rgba(34,142,215,0)', 'rgba(34,142,215,0)','rgba(208,64,47,0)', 'rgba(249,143,59,0)', 'rgba(236,198,37,0)'];
var dom_incident_people = document.getElementById("charts1_incident_people");
var myChart_incident_people = echarts.init(dom_incident_people);
myChart_incident_people.showLoading({　　
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#fff',
    maskColor: 'rgba(255,255,255,0)',
    zlevel: 0
});
var app = {};
var option_incident_people = null;
option_incident_people = {
    grid: {
        left: '11%',
        top: '12%',
        right: '0%',
        bottom: '8%',
        containLabel: true
    },
    xAxis: [{
        show: false,
    }],
    yAxis: [{
        axisTick: 'none',
        axisLine: 'none',
        show :true,
        offset: '27',
        axisLabel: {
            textStyle: {
                color: 'white',
                fontSize: '14',
            }
        },
        data: ['李丹', '林水', '东西', '德古拉', '古田', '杨云', '米勒', '莫妮卡', '土豆', '杨云']
    }, 
],
    series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    textStyle: {
                        color: '#18f0ff',
                        fontSize: '16',
                    }
                }
            },
            barWidth: 12,
            barMaxWidth:10,
            itemStyle: {
                normal: {
                    // color: function(params) {
                    //     var num = people_myColor.length;
                    //     return people_myColor[params.dataIndex % num]
                    // },
                    color:function(params){
                        var num = people_myColor.length;
                        return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: people_myColor[params.dataIndex % num]
                        },
                            {
                                offset: 1,
                                color: people_myColor2[params.dataIndex % num]
                            }
                        ])
                    }
                    // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //     offset: 0,
                    //     color: "#6f3d9e"
                    // },
                    //     {
                    //         offset: 1,
                    //         color: "#3637a3"
                    //     }
                    // ])
                }
            },
            z: 2
        }, 
    ]
};;
// 事件分类统计占比
var dom_incident_classification = document.getElementById("charts1_incident_classification");
var myChart_incident_classification = echarts.init(dom_incident_classification);
myChart_incident_classification.showLoading({　　
    text: '数据加载中...',
    color: '#c23531',
    textColor: '#fff',
    maskColor: 'rgba(255,255,255,0)',
    zlevel: 0
});
var app = {};
var option_incident_classification = null;
option_incident_classification = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    legend: {
        orient: 'vertical',
        align:'auto',
        data: ['访问','咨询','订单','点击','展现','展现1','展现2'],
        x: 'left',
        y: 'bottom',
        left:"22%",
        textStyle: {
            color: 'white',
            borderColor: '#fff',
            fontSize:13
        },
        itemWidth:15,
        width:450,
        height:120,
        itemGap:20,
        // formatter: function(param) {
        //     for (var i = 0; i < $scope.incident_category_proportion_data.length; i++) {
        //         if ($scope.incident_category_proportion_data[i].category == param) {
        //             return ' ' + $scope.incident_category_proportion_data[i].tocategory + '   ' + $scope.incident_category_proportion_data[i].num + '   ' + $scope.incident_category_proportion_data[i].proportion + '%';
        //         }
        //     }
        // }, 
        formatter: function(param) {
            for (var i = 0; i < $scope.incident_category_proportion_data.length; i++) {
                if ($scope.incident_category_proportion_data[i].category == param) {
                    return ' ' + $scope.incident_category_proportion_data[i].tocategory;
                }
            }
        }, 
    },
    calculable: true,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '25%',
            top: 60,
            bottom: 60,
            width: '50%',
            height:180,
            min: 0,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                align: 'left',
                normal: {
                    show: true,
                    position: 'outside',
                    rich:"rich",
                    formatter:function(param){
                        // console.log(param)
                        return param.value+'   '+param.percent+"%"
                    },
                    color:"rgba(255,255,255,0.6)"
                },
            },
            itemStyle:{
                borderColor:"transparent"
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'},
                {value: 120, name: '展现1'},
                {value: 140, name: '展现2'}
            ]
        }
    ],
    color:["rgb(17,129,120)","rgb(192,83,213)","rgb(34,142,215)","rgb(249,143,59)","rgb(236,198,37)","rgb(208,64,47)","rgb(151,53,171)"]
};
// 调用数据
var nowYear=moment(new Date().getTime()).format('YYYY');
var fiveYearAgo=String(Number(nowYear-4));
var nowDay=moment(new Date().getTime()).format("YYYY-MM-DD");
var seventDayAgo=moment(new Date().getTime() - 86400000*30).format("YYYY-MM-DD");
// 获取事件处理近五年统计数据
// --开始
$scope.incident_handle_list=[];
function getIncident_handleData(time) {
    api_hkreport.incidentreport(time, 'incident_trend').then(function(res) {
        option_incident_handle.xAxis[0].data=[];
        option_incident_handle.series[0].data=[];
        option_incident_handle.series[1].data=[];
        $scope.incident_handle_list=[];
        for(var i=0;i<res.quantityStatisticsList.length;i++){
            $scope.incident_handle_list.unshift(res.quantityStatisticsList[i])
        }
        console.log($scope.incident_handle_list);
        for(var i=0;i<$scope.incident_handle_list.length;i++){
            if($scope.incident_handle_list[i].date=="2015"){
                $scope.incident_handle_list[i].allzzl="100";
                $scope.incident_handle_list[i].zzl0="100";
                $scope.incident_handle_list[i].zzl1="100";
                $scope.incident_handle_list[i].zzl2="100";
                $scope.incident_handle_list[i].zzl3="100";
                $scope.incident_handle_list[i].zzl4="100";
            }
        }
        if(res.quantityStatisticsList.length>0){
            for(var i=0;i<res.quantityStatisticsList.length;i++){
                option_incident_handle.xAxis[0].data.push(res.quantityStatisticsList[i].date);
                option_incident_handle.series[0].data.push(res.quantityStatisticsList[i].sum);
                option_incident_handle.series[1].data.push(res.quantityStatisticsList[i].sum);
            }
        }
        myChart_incident_handle.setOption(option_incident_handle);
        myChart_incident_handle.hideLoading();
    })
}
getIncident_handleData({
    "start":fiveYearAgo,
    "end":nowYear
})
// --结束
// 获取工作组处理事件统计及占比数据
// --开始
$scope.incident_handler_group_data=[];
function getIncident_groupData(time){
    api_hkreport.incidentreport(time, 'incident_handler_group').then(function(res) {
        option_incident_group.legend.data=[];
        option_incident_group.series[0].data=[];
        $scope.incident_handler_group_data=res.pieChart;
        for(var i=0;i<$scope.incident_handler_group_data.length;i++){
            if($scope.incident_handler_group_data[i].name&&$scope.incident_handler_group_data[i].name.length==3){
                $scope.incident_handler_group_data[i]["toname"]=$scope.incident_handler_group_data[i].name+"      "
            }else{
                $scope.incident_handler_group_data[i]["toname"]=$scope.incident_handler_group_data[i].name
            }
            if($scope.incident_handler_group_data[i].value&&$scope.incident_handler_group_data[i].value>=100&&$scope.incident_handler_group_data[i].value<1000){
                $scope.incident_handler_group_data[i]["tovalue"]=String($scope.incident_handler_group_data[i].value)+"  "
            }else if($scope.incident_handler_group_data[i].value&&$scope.incident_handler_group_data[i].value>=10&&$scope.incident_handler_group_data[i].value<100){
                $scope.incident_handler_group_data[i]["tovalue"]=String($scope.incident_handler_group_data[i].value)+"    "
            }else if($scope.incident_handler_group_data[i].value&&$scope.incident_handler_group_data[i].value>=0&&$scope.incident_handler_group_data[i].value<10){
                $scope.incident_handler_group_data[i]["tovalue"]=String($scope.incident_handler_group_data[i].value)+"      "
            }else{
                $scope.incident_handler_group_data[i]["tovalue"]=String($scope.incident_handler_group_data[i].value)+" "
            }
        }
        if(res.pieChart.length>0){
            for(var i=0;i<res.pieChart.length;i++){
                option_incident_group.legend.data.push(res.pieChart[i].name);
                option_incident_group.series[0].data.push({value:res.pieChart[i].value,name:res.pieChart[i].name})
            }
        }
        option_incident_group.title.subtext=res.pieChartSum;
        myChart_incident_group.setOption(option_incident_group);
        myChart_incident_group.hideLoading();
    })
}
getIncident_groupData({
    "start":nowYear+"-01-01",
    "end":nowDay
})
// --结束
// 获取解决中数据
// 开始
$scope.incident_solveNowData="";
function getIncident_solveNowData(time){
    api_hkreport.incidentreport(time, 'large_screen_incident_handler_total').then(function(res) {
        console.log(res);
        $scope.incident_solveNowData=res.data[0].sum
    })
}
getIncident_solveNowData({
    
})
// 结束
// 获取已解决数据
// 开始
$scope.incident_solveData="";
function getIncident_solveData(time){
    api_hkreport.incidentreport(time, 'large_screen_incident_resolved_total').then(function(res) {
        console.log(res);
        $scope.incident_solveData=res.data[0].sum
    })
}
getIncident_solveData({
    
})
// 结束
// 获取人员处理事件TOP10数据
// --开始
function getIncident_peopleData(time){
    api_hkreport.incidentreport(time, 'incident_handler').then(function(res) {
        option_incident_people.yAxis[0].data=[];
        option_incident_people.series[0].data=[];
        var pieData=res.pieChart;
        for(var i=0;i<pieData.length;i++){
            if(pieData[i].account=="管理员"){
                pieData.splice(i,1)
            }
        }
        if(pieData.length>9){
            for(var i=0;i<10;i++){
                option_incident_people.yAxis[0].data.unshift(pieData[i].account);
                option_incident_people.series[0].data.unshift(pieData[i].value)
            }
        }else{
            for(var i=0;i<pieData.length;i++){
                option_incident_people.yAxis[0].data.unshift(pieData[i].account);
                option_incident_people.series[0].data.unshift(pieData[i].value)
            }
        }
        myChart_incident_people.setOption(option_incident_people);
        myChart_incident_people.hideLoading();
    })
}
getIncident_peopleData({
    "start":nowYear+"-01-01",
    "end":nowDay
})
// --结束
// 获取事件分类统计占比数据
// --开始
$scope.incident_category_proportion_data=[];
function getIncident_classificationData(time){
    api_hkreport.incidentreport(time, 'incident_category_proportion').then(function(res) {
        option_incident_classification.legend.data=[];
        option_incident_classification.series[0].data=[];
        $scope.incident_category_proportion_data=res.lsit;
        for(var i=0;i<$scope.incident_category_proportion_data.length;i++){
            // 3.5个空格一个字符
            if($scope.incident_category_proportion_data[i].category&&$scope.incident_category_proportion_data[i].category.length==4){
                $scope.incident_category_proportion_data[i]["tocategory"]=$scope.incident_category_proportion_data[i].category+"       "
            }else if($scope.incident_category_proportion_data[i].category&&$scope.incident_category_proportion_data[i].category.length==3){
                $scope.incident_category_proportion_data[i]["tocategory"]=$scope.incident_category_proportion_data[i].category+"          "
            }
            else{
                $scope.incident_category_proportion_data[i]["tocategory"]=$scope.incident_category_proportion_data[i].category+""
            }
        }
        if(res.lsit.length>0){
            for(var i=0;i<res.lsit.length;i++){
                option_incident_classification.legend.data.push(res.lsit[i].category);
                option_incident_classification.series[0].data.push({value:res.lsit[i].num,name:res.lsit[i].category})
            }
        }
        myChart_incident_classification.setOption(option_incident_classification);
        myChart_incident_classification.hideLoading();
    })
}
getIncident_classificationData({
    "start":nowYear+"-01-01",
    "end":nowDay
})
// --结束
// 获取当前时间
$interval(function(){
    $scope.jry_year=new Date().getFullYear();//获取当前年份
    $scope.jry_month=new Date().getMonth()+1;//获取当前月份
    $scope.jry_data=new Date().getDate();//获取当前日号
    $scope.jry_hours=new Date().getHours();//获取当前小时
    $scope.jry_minute=new Date().getMinutes();//获取当前分钟
    $scope.jry_second=new Date().getSeconds();//获取当前秒
    var jry_week_index=new Date().getDay();//获取当前星期索引
    var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    $scope.jry_week=weekday[jry_week_index];//获取当前星期几
    $scope.getMinute=function(res){
        if(Number(res)<10){
            return "0"+res
        }else{
            return res
        }
    }
    $scope.getSecond=function(res){
        if(Number(res)<10){
            return "0"+res
        }else{
            return res
        }
    }
},1000)
// 定时刷新
function getDataInter(time){
    $interval(function(){
        getIncident_solveNowData({});
        getIncident_solveData({});
        getIncident_handleData({
            "start":fiveYearAgo,
            "end":nowYear
        });
        getIncident_groupData({
            "start":nowYear+"-01-01",
            "end":nowDay
        });
        getIncident_peopleData({
            "start":nowYear+"-01-01",
            "end":nowDay
        });
        getIncident_classificationData({
            "start":nowYear+"-01-01",
            "end":nowDay
        })
    },time)    
}
getDataInter(300000)
TagCanvas.Start('myCanvas', 'tags', {
    textColour: '',
    // outlineColour: '#fff',
    weight:true,
    reverse: true,
    depth: 0.8,
    dragControl: true,
    decel:0.95,
    maxSpeed: 0.05,
    initial: [-0.2, 0]
});
}]);