'use strict'; app.controller('incident_reportCtrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "SweetAlert", "Restangular", "api_report", "api_statistic", "moment", 'api_user_data', 'api_bpm_data', 'api_report_data', function ($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, SweetAlert, Restangular, api_report, api_statistic, moment, api_user_data, api_bpm_data, api_report_data) { // 选择日期: $scope.dateSelected = [{ name: '近90天', id: 0 }, { name: '近1年', id: 1 }, { name: '近3年', id: 2 }, { name: '近5年', id: 3 }] $scope.tap = 'QSFX'; $scope.tap1 = 'flqs'; $scope.searchkeys = {}; //搜索条件 $scope.area_place = {}; //搜索条件 $scope.dateChoose = {}; //选择日期组件存储值 $scope.BTdata $scope.nowdata = moment(new Date()).format('YYYY/MM/DD HH:ss:mm'); var weeks = new Date().getDay(); $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6 - 1)).format('YYYY-MM-DD 00:00:00'); $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks - 1)).format('YYYY-MM-DD 23:59:59'); $scope.changeForm = function (paramDateFrom) { $scope.starttimes = moment(paramDateFrom).format('YYYY-MM-DD'); } $scope.changeTo = function (paramDateTo) { $scope.endtimes = moment(paramDateTo).format('YYYY-MM-DD'); } $scope.searchkeys.startTime = $scope.starttimes; $scope.searchkeys.endTime = $scope.endtimes; console.log($scope.searchkeys.startTime, $scope.searchkeys.endTime) // 运维报表搜索条件: $scope.YWBB_searchKeys = { 'startTime': $scope.searchkeys.startTime, 'endTime': $scope.searchkeys.endTime, } // n天前 $scope.GetDateStr = function (AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1); //获取当前月份的日期,不足10补0 var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号,不足10补0 return y + "-" + m + "-" + d; } //上周 $scope.week = function () { $scope.searchstate = "week"; var weeks = new Date().getDay(); $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD'); $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD'); $scope.searchkeys.startTime = $scope.starttimes; $scope.searchkeys.endTime = $scope.endtimes; } //上月 $scope.month = function () { $scope.searchstate = "month"; $scope.starttimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth() - 1)).format('YYYY-MM-DD'); $scope.endtimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth()) - 86400000).format('YYYY-MM-DD'); $scope.searchkeys.startTime = $scope.starttimes; $scope.searchkeys.endTime = $scope.endtimes; } //今年(1月1日-至今) $scope.year = function () { $scope.searchstate = "year"; $scope.starttimes = moment().startOf('year').format('YYYY-MM-DD 00:00:00'); $scope.endtimes = moment().format('YYYY-MM-DD 23:59:59'); $scope.searchkeys.startTime = $scope.starttimes; $scope.searchkeys.endTime = $scope.endtimes; } // 近n年 $scope.nearYear = function (n) { $scope.searchkeys.startTime = moment().subtract(n, "years").format("YYYY-MM-DD 00:00:00"); $scope.searchkeys.endTime = $scope.endtimes; console.log($scope.searchkeys.startTime, $scope.searchkeys.endTime) } /** *日历 */ $scope.open = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = !$scope.opened; }; $scope.endOpen = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.startOpened = false; $scope.endOpened = !$scope.endOpened; }; $scope.startOpen = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.endOpened = false; $scope.startOpened = !$scope.startOpened; }; //选择类型 $scope.active = function (name) { console.log($scope.searchkeys) if($scope.searchkeys.placeId){ delete($scope.searchkeys.placeId) } if($scope.searchkeys.areaId){ delete($scope.searchkeys.areaId) } $scope.tap = name $scope.searchkeys.startTime = moment($scope.searchkeys.startTime).format("YYYY-MM-DD 00:00:00"); $scope.searchkeys.endTime = moment($scope.searchkeys.endTime).format('YYYY-MM-DD 23:59:59'); if ($scope.tap == 'QSFX') { $scope.tap1 = 'flqs' $scope.area_place = {}; setTimeout(function () { $scope.SLQS_Data($scope.searchkeys) $scope.FLQS_Data1($scope.searchkeys) }, 500); } else if ($scope.tap == 'YWBB') { $scope.area_place = {}; setTimeout(function () { // barechart2(); barechart3(); // barechart6() // barechart7() // barechart8() // barechart9(); $scope.YWXL_Data() $scope.YWXQ_Data() $scope.YWMYD_Data() $scope.YWTop_Data() }, 500); } else if ($scope.tap == 'FLBB') { $scope.area_place = {}; setTimeout(function () { $scope.FLTJ_Data($scope.searchkeys) $scope.FLQST_Data($scope.searchkeys) $scope.QYFL_Data($scope.searchkeys) }, 500); } else if ($scope.tap == 'LYBB') { $scope.area_place = {}; setTimeout(function () { $scope.LYQS_Data($scope.searchkeys) $scope.LYTJ_Data($scope.searchkeys) }, 500); } } //选择类型1 $scope.active1 = function (name) { $scope.tap1 = name if ($scope.tap1 == 'flxq') { setTimeout(function () { // barechart(); $scope.FLQS_Data($scope.searchkeys) }, 500); } else if ($scope.tap1 == 'flqs') { setTimeout(function () { // barechart2(); $scope.FLQS_Data1($scope.searchkeys) }, 500); } } // 请求人 api_user_data.fetchDataList('requester', { "idx": 0, "sum": 10 }).then(function (response) { if (response) { if (response.status = 200) { $scope.requester = response.list; } } }) //区域地点过滤 $scope.key = {}; api_user_data.fetchDataList('area', { "idx": 0, "sum": 1000 }).then(function (data) { if (data) { if (data.status = 200) { $scope.outarea = data.list; } } }) //地点区域过滤 $scope.onChangearea = function (data) { // delete $scope.searchkeys.place; // if ($scope.memoryfilterData.incident) { // delete $scope.memoryfilterData.incident.place; // } console.log(data) $scope.searchkeys['areaId'] = data.areaId.id var fildata = { "idx": 0, "sum": 1000, "place": { area: { id: data.areaId.id } } }; api_user_data.fetchDataList('place', fildata).then(function (response) { if (response) { if (response.status = 200) { $scope.outplace = response.list; } } }); console.log($scope.searchkeys) }; // 地点筛选 $scope.onChangeplace = function (key) { console.log(key) // $scope.searchkeys['areaId']=key.areaId.id if ($scope.searchkeys.areaId) { delete($scope.searchkeys.areaId) } $scope.searchkeys['placeId'] = key.placeId.id console.log($scope.searchkeys) } // 选择日期 $scope.onChangeDate = function (s) { switch (s) { case 0: // 最近90天 console.log('最近90天'); $scope.searchkeys.startTime = $scope.GetDateStr(-90); break; case 1: // 最近一年 console.log('最近一年'); $scope.nearYear(1) break; case 2: // 最近三年 console.log('最近三年'); $scope.nearYear(3) break; case 3: // 最近五年 console.log('最近五年'); $scope.nearYear(5) break; } } //树形控件加载 $scope.my_tree = {}; $scope.try_async_load = function () { $scope.my_data = []; $scope.doing_async = true; api_bpm_data.fetchDataList('incidentcategory', { "idx": 0, "sum": 1000 }).then(function (response) { if (response.status == 200) { var data = response.list; var objects = []; for (var i = 0; i < data.length; i++) { var object = {}; object.id = data[i].id; if (data[i].parent && data[i].parent.id != 0) { object.parent = data[i].parent.id; } object.label = data[i].category; objects.push(object); } $scope.my_data = convertParentToChildList(objects); $scope.tree_data = angular.copy($scope.my_data); if ($scope.my_data.length > 0) { $scope.doing_async = false; } // return $scope.my_tree.expand_all() } else { SweetAlert.swal({ title: "系统错误!", text: "请刷新重试!", type: "error" }); } }); }; function convertListToTree(data, treeMap) { var idToNodeMap = {}; //Keeps track of nodes using id as key, for fast lookup var root = null; //Initially set our loop to null var parentNode = null; //loop over data for (var i = 0; i < data.length; i++) { var datum = data[i]; //each node will have children, so let's give it a "children" poperty datum.children = []; //add an entry for this node to the map so that any future children can //lookup the parent idToNodeMap[datum.id] = datum; //Does this node have a parent? if (typeof datum.parent === "undefined" || datum.parent == null) { //Doesn't look like it, so this node is the root of the tree root = datum; treeMap[datum.id] = root; } else { //This node has a parent, so let's look it up using the id parentNode = idToNodeMap[datum.parent]; //We don't need this property, so let's delete it. delete datum.parent; //Let's add the current node as a child of the parent node. parentNode.children.push(datum); } } return root; } function convertParentToChildList(data) { var treeMap = {}; var list = []; convertListToTree(data, treeMap); angular.forEach(treeMap, function (item) { list.push(item); }); return list; } // $scope.my_tree = tree = {}; $scope.try_async_load1 = function () { $scope.my_data1 = []; $scope.select_treedata = []; $scope.doing_async = true; api_user_data.fetchDataList('group', { "idx": 0, "sum": 1000 }).then(function (data) { $scope.select_treedata = $scope.my_data1 // = convertParentToChildList(data['list']); $scope.doing_async = false; // tree.expand_all(); //console.log(treelist); }); }; $scope.try_async_load(); $scope.try_async_load1(); // 一、运维报表: // 事件类型选择: $scope.onFilterCategary = function (item) { $scope.YWBB_searchKeys.categoryId = item.id; } $scope.onFilterGroup = function (item) { $scope.YWBB_searchKeys.groupId = item.id; } // 图表1、事件运维效率 $scope.YWXL_Data = function () { api_report_data.reportsData('incident_operations_efficiency', $scope.YWBB_searchKeys).then(function (data) { $scope.YWXL_Datas = data; barechart2(data); }) } // 图表2、事件运维详情 $scope.YWXQ_Data = function () { api_report_data.reportsData('incident_operations_details', $scope.YWBB_searchKeys).then(function (data) { // $scope.YWXL_Datas = data; // 响应饼图 barechart6(data.response); // 解决饼图 barechart7(data.solve); // 柱状图 barechart8(data.barGraph); }) } //事件趋势分析报表 //数量趋势分析 图1 $scope.SLQS_Data = function (data) { api_report_data.reportsData('incident_trend', data).then(function (data) { console.log(data) if (data) { $scope.SLQS_Datas = data; // console.log($scope.LYQS_Datas) setTimeout(function () { barechart($scope.SLQS_Datas) }, 1000) } }) } //分类趋势分析 图1 $scope.FLQS_Data1 = function (data) { api_report_data.reportsData('incident_category_trend_time', data).then(function (data) { console.log(data) if (data) { $scope.FLQS_Datas = data; // console.log($scope.LYQS_Datas) setTimeout(function () { barechart1($scope.FLQS_Datas) }, 1000) } }) } //分类趋势分析 图2 $scope.FLQS_Data = function (data) { api_report_data.reportsData('incident_category_month', data).then(function (data) { console.log(data) var list1 = [] var list2 = [] if (data) { // for (var i = 0; i < data.data.length; i++) { // for (var j = 0; j < data.data[i].length; j++) { // // console.log(list1[i][j]) // for (var l = 0; l < data.dates.length; l++) { // data.data[i][j]['time'] = data.dates[l] // } // } // console.log(data.data[i]) // } $scope.BTdata = data; // console.log($scope.LYQS_Datas) setTimeout(function () { // barechart5($scope.BTdata) wt($scope.BTdata) }, 1000) } }) } // 图表3、事件运维满意度 $scope.YWMYD_Data = function () { api_report_data.reportsData('incident_operations_satisfaction', $scope.YWBB_searchKeys).then(function (data) { $scope.YWMYD_Datas = data.sum; barechart9(data.barGraph); }) } // 表格1、事件运维解决TOP排名 $scope.YWTop_Data = function (sort) { console.log(sort) var postData = $scope.YWBB_searchKeys; if (sort) { postData.sortKye = sort; } api_report_data.reportsData('incident_operations_top', postData).then(function (data) { $scope.YWBB_table_data = data.table; }) } //事件来源报表数据获取 //来源趋势数据 图1 $scope.LYQS_Data = function (data) { api_report_data.reportsData('incident_source', data).then(function (data) { console.log(data) if (data.stats == 200) { $scope.LYQS_Datas = data.data; console.log($scope.LYQS_Datas) barechart13($scope.LYQS_Datas) } }) } //来源统计数据 图2 $scope.LYTJ_Data = function (data) { api_report_data.reportsData('incident_source_trend', data).then(function (data) { console.log(data) if (data.stats == 200) { $scope.LYTJ_Datas = data.data; console.log($scope.LYTJ_Datas) barechart14($scope.LYTJ_Datas) } }) } //事件分类报表 // 分类统计饼图 $scope.FLTJ_Data = function (list) { api_report_data.reportsData('incident_category_proportion', list).then(function (data) { // $scope.YWMYD_Datas = data.sum; // barechart9(data.barGraph); console.log(data) barechart10(data) }) } // 分类趋势线图 $scope.FLQST_Data = function (list) { api_report_data.reportsData('incident_category_trend', list).then(function (data) { // $scope.YWMYD_Datas = data.sum; // barechart9(data.barGraph); console.log(data) barechart11(data) }) } // 区域分类分析柱状图 $scope.QYFL_Data = function (list) { api_report_data.reportsData('incident_category_area', list).then(function (data) { // $scope.YWMYD_Datas = data.sum; // barechart9(data.barGraph); console.log(data) barechart12(data) }) } //搜索 $scope.report_datas = function () { console.log($scope.searchkeys) var s = new Date($scope.searchkeys.startTime); var st=s.getFullYear() + '-' + (s.getMonth() + 1) + '-' + s.getDate() + ' ' + s.getHours() + ':' + s.getMinutes() + ':' + s.getSeconds(); var e = new Date($scope.searchkeys.endTime); var en=e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate() + ' ' + e.getHours() + ':' + e.getMinutes() + ':' + e.getSeconds(); $scope.searchkeys.startTime=st $scope.searchkeys.endTime=en if ($scope.tap == "YWBB") { $scope.YWBB_searchKeys.startTime = $scope.searchkeys.startTime; $scope.YWBB_searchKeys.endTime = $scope.searchkeys.endTime; $scope.YWXL_Data() $scope.YWXQ_Data() $scope.YWMYD_Data() $scope.YWTop_Data() } if ($scope.tap == 'LYBB') { $scope.LYQS_Data($scope.searchkeys) $scope.LYTJ_Data($scope.searchkeys) } if ($scope.tap == 'QSFX') { $scope.SLQS_Data($scope.searchkeys) $scope.FLQS_Data($scope.searchkeys) $scope.FLQS_Data1($scope.searchkeys) } if ($scope.tap == 'FLBB') { $scope.FLTJ_Data($scope.searchkeys) $scope.FLQST_Data($scope.searchkeys) $scope.QYFL_Data($scope.searchkeys) } } //重置 $scope.report_Reset = function () { $scope.dateChoose.dateSelected = {}; if($scope.searchkeys.placeId){ delete($scope.searchkeys.placeId) } if($scope.searchkeys.areaId){ delete($scope.searchkeys.areaId) } $scope.area_place = {}; $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6 - 1)).format('YYYY-MM-DD'); $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks - 1)).format('YYYY-MM-DD'); $scope.searchkeys.startTime = $scope.starttimes $scope.searchkeys.endTime = $scope.endtimes console.log($scope) if ($scope.tap == "YWBB") { $scope.YWBB_searchKeys.startTime = $scope.searchkeys.startTime; $scope.YWBB_searchKeys.endTime = $scope.searchkeys.endTime; $scope.YWXL_Data() $scope.YWXQ_Data() $scope.YWMYD_Data() $scope.YWTop_Data() } if ($scope.tap == 'LYBB') { $scope.LYQS_Data($scope.searchkeys) $scope.LYTJ_Data($scope.searchkeys) } if ($scope.tap == 'QSFX') { $scope.SLQS_Data($scope.searchkeys) $scope.FLQS_Data($scope.searchkeys) $scope.FLQS_Data1($scope.searchkeys) } if ($scope.tap == 'FLBB') { $scope.FLTJ_Data($scope.searchkeys) $scope.FLQST_Data($scope.searchkeys) $scope.QYFL_Data($scope.searchkeys) } } //图表 来电转换 function barechart(datas) { console.log(datas) console.log(echarts) if (datas) { var dom = document.getElementById("ldzh"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['事件总数', '环比增幅'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { top: '8%', left: '.5%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.dates }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, { type: 'value', scale: true, name: '环比增幅 (%)', min: 0, max: 100, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value} %', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, } ], series: [{ name: '事件总数', type: 'bar', barMaxWidth: 30, itemStyle: { normal: { color: '#005395' } }, data: datas.data }, { name: '环比增幅', type: 'line', itemStyle: { normal: { color: '#1CA58F' } }, lineStyle: { normal: { color: '#1CA58F' } }, data: datas.per } ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } } //图表 事件分类趋势分析 function barechart1(datas) { console.log(datas) if (datas) { var dom = document.getElementById("sjfx"); // console.log(dom) var myChart1 = echarts.init(dom); var option1 = null; // console.log(myChart1) myChart1.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart1.hideLoading(); var serie = [] for (var i = 0; i < datas.data.length; i++) { // for (var j = 0; j < datas.title.length; j++) { // Series.name = datas.title[j] var Series = { name: datas.title[i], type: 'line', itemStyle: { normal: { // color: '#49A9EE' } }, lineStyle: { normal: { // color: '#49A9EE' } }, data: datas.data[i] } // } serie.push(Series) } option1 = { // color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#49A9EE', type: 'dotted' }, }, formatter: function (params) { // console.log(params); // console.log($scope.FLQS_Datas); var retStr = ""; for (var j = 0; j < $scope.FLQS_Datas.title.length; j++) { for (var i = 0; i < params.length; i++) { var dateIndex = $scope.FLQS_Datas.dates.indexOf(params[i].name); }; // var str = $scope.FLQS_Datas.title[j] + ":" + $scope.FLQS_Datas.data[j][dateIndex] + "  " + "环比增幅:" + $scope.FLQS_Datas.per[j][dateIndex] + "%" + "
" // $scope.FLQS_Datas.per[j][dateIndex]= $scope.FLQS_Datas.per[j][dateIndex].toString() // if($scope.FLQS_Datas.per[j][dateIndex].indexOf('-')<0){ // $scope.FLQS_Datas.per[j][dateIndex]='+'+$scope.FLQS_Datas.per[j][dateIndex] // }else{ // } // console.log('+'+$scope.FLQS_Datas.per[j][dateIndex]) var str = "
" + $scope.FLQS_Datas.title[j] + ": " + $scope.FLQS_Datas.data[j][dateIndex] + "件
" + "  " + "
" + "环比增幅: " + $scope.FLQS_Datas.per[j][dateIndex] + "%" + "
" retStr += str $scope.FLQS_Datas.dates[j] + '
' + retStr } // console.log($scope.FLQS_Datas) for (var k = 0; k < params.length; k++) { // return params[i].name+'
'+params[i].seriesName+' :'+params[i].value+'  '+'环比增幅 :'+params[i].dataIndex+'%'; return params[k].name + '
' + retStr } // return retStr } // formatter:'{a}{b}
事件数量: {c}   环比增幅: {c}%' // formatter: function (params, ticket, callback) { // console.log(params, ticket, callback) // // $.get('detail?name=' + params.name, function (content) { // // callback(ticket, toHTML(content)); // // }); // var list={ // } // for(var i=0;i'+params[i].seriesName+' :'+params[i].value+'  '+'环比增幅 :'+params[i].dataIndex+'%'; // } // } }, legend: { show: true, data: datas.title, align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0, // formatter: function (name) { // console.log(name) // return name; // } }, grid: { top: '8%', left: '.5%', right: '0%', bottom: '10%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.dates }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, } // , { // type: 'value', // scale: true, // name: '环比增幅 (%)', // min: 0, // max: 100, // boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value} %', // textStyle: { // color: '#7B7B7B', // // fontSize: '14', // } // }, // axisLine: { // show: true, // lineStyle: { // color: '#7B7B7B', // // type: 'dotted' // }, // }, // } ], series: serie // [ // { // name: '事件总数', // type: 'line', // show: false, // // itemStyle: { // // normal: { // // color: '#005395' // // } // // }, // // lineStyle: { // // normal: { // // color: '#005395' // // } // // }, // data: [10, 20, 5, 23, 12, 3, 63, 12, 23, 34, 76, 45] // }, { // name: '环比增幅', // type: 'line', // show: false, // // itemStyle: { // // normal: { // // color: '#005395' // // } // // }, // // lineStyle: { // // normal: { // // color: '#005395' // // } // // }, // data: [6, 45, 12, 4, 7, 43, 9, 32, 12, 21, 8, 10] // }, { // name: '通话时长2', // type: 'line', // // itemStyle: { // // normal: { // // color: '#005395' // // } // // }, // // lineStyle: { // // normal: { // // color: '#005395' // // } // // }, // data: [9, 41, 9, 12, 7, 34, 12, 54, 8, 9, 31, 12] // }, { // name: '通话时长3', // type: 'line', // // itemStyle: { // // normal: { // // color: '#005395' // // } // // }, // // lineStyle: { // // normal: { // // color: '#005395' // // } // // }, // data: [12, 24, 15, 22, 15, 31, 60, 16, 13, 24, 36, 55] // }, // ] }; if (option1 && typeof option1 === "object") { myChart1.setOption(option1); myChart1.hideLoading(); } } // console.log(echarts) } //图表 事件运维效率 function barechart2(datas) { var dom = document.getElementById("sjqs"); var myChart = echarts.init(dom); var option = null; myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#49A9EE', type: 'dotted' }, } }, legend: { data: ['响应平均时长', '解决平均时长'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '1%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.keyList }], yAxis: [{ type: 'value', scale: true, name: '平均时长', min: 0, boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value}' // } axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: [{ name: '响应平均时长', type: 'line', itemStyle: { normal: { color: '#49A9EE' } }, lineStyle: { normal: { color: '#49A9EE' } }, data: datas.responseDataList }, { name: '解决平均时长', type: 'line', itemStyle: { normal: { color: '#87C966' } }, lineStyle: { normal: { color: '#87C966' } }, data: datas.solveDataList2 }] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } //图表 运维转派,协同,升级 function barechart3() { // console.log(echarts) var dom = document.getElementById("sjpd"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['转派', '升级', '协同'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '.5%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12'] }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value}', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }], series: [{ name: '转派', type: 'bar', itemStyle: { normal: { color: '#005395' } }, data: [20, 12, 31, 23, 56, 78, 92, 12, 23] }, { name: '升级', type: 'bar', itemStyle: { normal: { color: '#87C966' } }, data: [10, 20, 5, 5, 2, 32, 34, 56, 23] }, { name: '协同', type: 'bar', itemStyle: { normal: { color: '#79A3C4' } }, data: [15, 26, 15, 25, 32, 36, 6, 43, 12] }] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } function wt(data) { console.log(data) // $scope.wt_data = ['1','2','3'] setTimeout(function () { console.log(1) for (var i = 0; i < data.data.length; i++) { (function wt1() { var dom = document.getElementById("item" + i); console.log(dom) var myChart = echarts.init(dom); var datas1 = [] for (var j = 0; j < data.data[i].length; j++) { var datas = { "name": data.data[i][j].category, "value": data.data[i][j].num } // { // "name": "上网账号", // "value": 10 // }, { // "name": "邮箱问题", // "value": 10 // }, { // "name": "用户资讯服务", // "value": 10 // }, { // "name": "校园卡", // "value": 10 // }, { // "name": "分类1", // "value": 20 // }, { // "name": "分类2", // "value": 30 // }, datas1.push(datas) } // if(data.total[i]==0){ // $scope.zero=i // } console.log(datas1) var option = { // color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // backgroundColor: '#000', title: { text: '总数', subtext: data.total[i] || '0', textStyle: { color: '#333', fontSize: 16, align: 'center', verticalAlign: 'middle' }, subtextStyle: { fontSize: 14, color: ['#005395'], fontWeight: 'bolder', align: 'center', verticalAlign: 'middle' }, x: '22%', y: '55%', }, grid: { bottom: 150, left: 100, right: '10%' }, legend: { orient: 'vertical', top: "middle", right: "5%", textStyle: { color: '#333', fontSize: 12, }, itemWidth: 8, itemHeight: 8, icon: 'roundRect', data: datas1, }, series: [ // 主要展示层的 { radius: ['35%', '50%'], center: ['25%', '65%'], type: 'pie', label: { normal: { show: true, formatter: "{c}%", textStyle: { fontSize: 14, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 5, length2: 5 }, emphasis: { show: true } }, hoverOffset: 5, name: "民警训练总量", data: datas1, }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } })() // wt1() } }, 1000); // for (var i = 0; i < $scope.wt_data.length; i++) { // (function wt1() { // var dom = document.getElementById("item" + i); // console.log(dom) // var myChart = echarts.init(dom); // var data = [{ // "name": "网络故障报修", // "value": 10 // }, { // "name": "上网账号", // "value": 10 // }, { // "name": "邮箱问题", // "value": 10 // }, { // "name": "用户资讯服务", // "value": 10 // }, { // "name": "校园卡", // "value": 10 // }, { // "name": "分类1", // "value": 20 // }, { // "name": "分类2", // "value": 30 // }, ] // option = { // // color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // // backgroundColor: '#000', // title: { // text: '总数', // subtext: i + 1, // textStyle: { // color: '#333', // fontSize: 16, // // align: 'center' // }, // subtextStyle: { // fontSize: 14, // color: ['#005395'], // fontWeight: 'bolder' // }, // x: '22%', // y: '35%', // }, // grid: { // bottom: 150, // left: 100, // right: '10%' // }, // legend: { // orient: 'vertical', // top: "middle", // right: "5%", // textStyle: { // color: '#333', // fontSize: 12, // }, // itemWidth: 8, // itemHeight: 8, // icon: 'roundRect', // data: data, // }, // series: [ // // 主要展示层的 // { // radius: ['55%', '85%'], // center: ['25%', '50%'], // type: 'pie', // label: { // normal: { // show: true, // formatter: "{c}%", // textStyle: { // fontSize: 14, // }, // position: 'outside' // }, // emphasis: { // show: true // } // }, // labelLine: { // normal: { // show: true, // length: 5, // length2: 25 // }, // emphasis: { // show: true // } // }, // name: "民警训练总量", // data: data, // }, // ] // }; // if (option && typeof option === "object") { // myChart.setOption(option); // myChart.hideLoading(); // } // })() // // wt1() // } } // wt() //图表 事件分类趋势分析饼图 // function barechart5(datas) { // console.log(datas) // console.log(echarts) // // $scope.BTdata=datas // console.log($scope.BTdata) // var DATA = [] // for (var i = 0; i < $scope.BTdata.data.length; i++) { // var dom = document.getElementById("item" + i); // console.log(dom) // var option = null; // var myChart = echarts.init(dom); // for (var j = 0; j < $scope.BTdata.data[i].length; j++) { // var data = { // "name": $scope.BTdata.data[i][j].category, // "value": $scope.BTdata.data[i][j].num // } // DATA.push(data) // } // var total = $scope.BTdata.total[i] // // if($scope.BTdata.total[i]==0){ // // total=0 // // } // option = { // // color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // // backgroundColor: '#000', // title: { // text: '总数', // subtext: total, // textStyle: { // color: '#333', // fontSize: 16, // // align: 'center' // }, // subtextStyle: { // fontSize: 14, // color: ['#005395'], // fontWeight: 'bolder' // }, // x: '22%', // y: '35%', // }, // grid: { // bottom: 150, // left: 100, // right: '10%' // }, // legend: { // orient: 'vertical', // top: "middle", // right: "5%", // textStyle: { // color: '#333', // fontSize: 12, // }, // itemWidth: 8, // itemHeight: 8, // icon: 'roundRect', // data: DATA, // }, // series: [ // // 主要展示层的 // { // radius: ['55%', '85%'], // center: ['25%', '50%'], // type: 'pie', // label: { // normal: { // show: true, // formatter: "{c}%", // textStyle: { // fontSize: 14, // }, // position: 'outside' // }, // emphasis: { // show: true // } // }, // labelLine: { // normal: { // show: true, // length: 5, // length2: 25 // }, // emphasis: { // show: true // } // }, // name: "民警训练总量", // data: DATA, // }, // ] // }; // if (option && typeof option === "object") { // myChart.setOption(option); // myChart.hideLoading(); // } // } // } //图表 事件运维详情饼图1 function barechart6(datas) { var dom = document.getElementById("XYSJ"); var option = null; var myChart = echarts.init(dom); var data = datas.pieChart; option = { color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // backgroundColor: '#000', title: { text: '响应事件总数 (件)', subtext: datas.pieChartSum, textAlign: 'center', textStyle: { color: '#333', fontSize: 16, // align: 'center' }, subtextStyle: { fontSize: 14, color: ['#005395'], fontWeight: 'bolder' // align: 'center' }, x: '24.5%', y: '40%', }, tooltip: { trigger: 'item', formatter: function (a) { return ( a['data']['name'] + ":" + a['data']['value'] ) }, position: ['50%', '30%'] }, grid: { bottom: 150, left: 100, right: '10%' }, legend: { orient: 'vertical', top: "middle", right: "5%", textStyle: { color: '#333', fontSize: 12, }, itemWidth: 8, itemHeight: 8, icon: 'roundRect', data: data, }, series: [ // 主要展示层的 { radius: ['65%', '85%'], center: ['25%', '50%'], type: 'pie', label: { normal: { show: true, formatter: "{d}%", textStyle: { fontSize: 14, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 5, length2: 25 }, emphasis: { show: true } }, name: "", data: data, }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } //图表 事件运维详情饼图2 function barechart7(datas) { // for (var i = 0; i < $scope.BTdata.length; i++) { var dom = document.getElementById("JJSJ"); var option = null; var myChart = echarts.init(dom); var data = datas.pieChart; option = { color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // backgroundColor: '#000', title: { text: '解决事件总数 (件)', subtext: datas.pieChartSum, textAlign: 'center', textStyle: { color: '#333', fontSize: 16, // align: 'center' }, subtextStyle: { fontSize: 14, color: ['#005395'], fontWeight: 'bolder' // align: 'center' }, x: '24.5%', y: '40%', }, tooltip: { // show: false, trigger: 'item', formatter: function (a) { // console.log(a) return ( a['data']['name'] + ":" + a['data']['value'] ) }, position: ['50%', '30%'] }, grid: { bottom: 150, left: 100, right: '10%' }, legend: { orient: 'vertical', top: "middle", right: "5%", textStyle: { color: '#333', fontSize: 12, }, itemWidth: 8, itemHeight: 8, icon: 'roundRect', data: data, }, series: [ // 主要展示层的 { radius: ['65%', '85%'], center: ['25%', '50%'], type: 'pie', label: { normal: { show: true, formatter: "{d}%", textStyle: { fontSize: 14, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 5, length2: 25 }, emphasis: { show: true } }, name: "", data: data, }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } // } } //图表 事件运维详情柱状图 function barechart8(datas) { // console.log(datas); var datas = datas; var dom = document.getElementById("JJSJZZ"); var myChart = echarts.init(dom); var option = null; myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['按时响应', '逾期响应', '响应平均时间', '按时解决', '逾期解决', '解决平均时间'], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { top: '10%', left: '1.5%', right: '1.5%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.name }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value}', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, { type: 'value', scale: true, name: '按时解决率/逾期解决率', min: 0, max: 100, boundaryGap: [0.2, 0.2], axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', }, formatter: '{value} %' }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, } ], series: [{ name: '逾期响应', type: 'bar', stack: '1', barWidth:30, itemStyle: { normal: { color: '#005395' } }, data: datas.overtimeresponse }, { name: '按时响应', type: 'bar', barWidth:30, stack: '1', itemStyle: { normal: { color: '#E6EEF4' } }, data: datas.ontimeresponse }, { name: '逾期解决', type: 'bar', barWidth:30, stack: '2', itemStyle: { normal: { color: '#1CA58F' } }, data: datas.overtimesolve }, { name: '按时解决', type: 'bar', barWidth:30, stack: '2', itemStyle: { normal: { color: '#87C966' } }, data: datas.ontimesolve }, { name: '解决平均时间', type: 'line', itemStyle: { normal: { color: '#EF665C' } }, lineStyle: { normal: { color: '#EF665C' } }, data: datas.solvetime }, { name: '响应平均时间', type: 'line', itemStyle: { normal: { color: '#FFA35E' } }, lineStyle: { normal: { color: '#FFA35E' } }, data: datas.responsetime } ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } //图表 事件运维满意度柱状图 function barechart9(datas) { var name = [] var series = [] for (var key in datas) { if (key !== 'name') { name.push(key); series.push({ name: key, type: 'bar', stack: '1', barWidth:40, itemStyle: { normal: {} }, data: datas[key] }) } } var dom = document.getElementById("jjmyd"); var myChart = echarts.init(dom); var option = null; myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: name, align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { top: '15%', left: '1.5%', right: '1.5%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.name }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value}', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: series }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } //图表 事件分类统计饼图 function barechart10(datas) { console.log(datas) if (datas) { var dom = document.getElementById("sjflqs"); // console.log(dom) var option = null; var myChart = echarts.init(dom); var data = []; // var data1=[] var data2 = [] for (var i = 0; i < datas.lsit.length; i++) { var list = { "name": datas.lsit[i].category, "value": datas.lsit[i].proportion } data.push(list) // data1.push(datas.lsit[i].proportion) data2.push(datas.lsit[i].category) } // var data = [ // { // "name": "网络故障报修", // "value": 10 // }, // { // "name": "上网账号", // "value": 10 // }, { // "name": "邮箱问题", // "value": 10 // }, { // "name": "用户资讯服务", // "value": 10 // }, { // "name": "校园卡", // "value": 10 // }, { // "name": "分类1", // "value": 20 // }, { // "name": "分类2", // "value": 30 // }, // ] option = { // color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // backgroundColor: '#000', title: { text: '事件总数 (件)', subtext: datas.sum, textAlign: 'center', textStyle: { color: '#333', fontSize: 20, // align: 'center' }, subtextStyle: { fontSize: 18, color: ['#005395'], fontWeight: 'bolder' // align: 'center' }, x: '25%', y: '50%', }, grid: { top: '0%', bottom: 150, left: 100, right: '10%' }, legend: { orient: 'vertical', top: "middle", left: "55%", itemGap: 20, textStyle: { color: '#333', fontSize: 16, }, itemWidth: 15, itemHeight: 15, icon: 'roundRect', data: data2, }, series: [ // 主要展示层的 { radius: ['45%', '65%'], center: ['25%', '60%'], type: 'pie', label: { normal: { show: true, formatter: "{c}%", textStyle: { fontSize: 14, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 5, length2: 5, fontSize: 16 }, emphasis: { show: true } }, name: "民警训练总量", data: data, }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } // console.log(echarts) // for (var i = 0; i < $scope.BTdata.length; i++) { // } } //图表 事件分类趋势图 function barechart11(datas) { console.log(datas) if (datas) { var dom = document.getElementById("sjfltj"); // console.log(dom) var myChart = echarts.init(dom); var option = null; // console.log(myChart) var serie = [] for (var i = 0; i < datas.data.length; i++) { // for (var j = 0; j < datas.title.length; j++) { // Series.name = datas.title[j] var Series = { name: datas.title[i], type: 'line', itemStyle: { normal: { // color: '#49A9EE' } }, lineStyle: { normal: { // color: '#49A9EE' } }, data: datas.data[i] } // } serie.push(Series) } console.log(serie) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#49A9EE', type: 'dotted' }, } }, legend: { data: datas.title, align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { left: '1%', right: '0%', bottom: '15%', top: '10%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, // data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12'] data: datas.dates, }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value}' // } axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: serie // [{ // name: '分类1', // type: 'line', // itemStyle: { // normal: { // color: '#49A9EE' // } // }, // lineStyle: { // normal: { // color: '#49A9EE' // } // }, // data: [10, 20, 5, 43, 12, 34, 12, 56, 67] // }, { // name: '分类2', // type: 'line', // itemStyle: { // normal: { // color: '#87C966' // } // }, // lineStyle: { // normal: { // color: '#87C966' // } // }, // data: [12, 10, 15, 23, 19, 24, 18, 26, 57] // }] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } // console.log(echarts) } //图表 事件区域与事件分类分析图柱状图 function barechart12(datas) { console.log(datas) if (datas) { var dom = document.getElementById("qysjfx"); // console.log(dom) var myChart = echarts.init(dom); var option = null; // console.log(myChart) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); var serie = [] for (var i = 0; i < datas.data.length; i++) { // for(var j=0;datas.data[i].title;j++){ var Series = { name: datas.data[i].title[i], type: 'bar', stack: '1', itemStyle: { normal: { // color: '#49A9EE' } }, data: datas.data[i].num } // } serie.push(Series) // } } console.log(serie) option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: datas.category, align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 }, grid: { top: '15%', left: '1.5%', right: '1.5%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas.area }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], axisLabel: { formatter: '{value}', textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: serie // [{ // name: '分类1', // type: 'bar', // stack: '1', // itemStyle: { // normal: { // color: '#49A9EE' // } // }, // data: [20, 12, 31, 23, 56, 78, 92, 12, 23, 14, 23, 54] // }, { // name: '分类2', // type: 'bar', // stack: '1', // itemStyle: { // normal: { // color: '#1EA58F' // } // }, // data: [20, 12, 31, 23, 56, 78, 92, 12, 23, 14, 23, 54] // }, { // name: '分类3', // type: 'bar', // stack: '1', // itemStyle: { // normal: { // color: '#87C966' // } // }, // data: [20, 12, 31, 23, 56, 78, 92, 12, 23, 14, 23, 54] // }, { // name: '分类4', // type: 'bar', // stack: '1', // itemStyle: { // normal: { // color: '#FFA35E' // } // }, // data: [20, 12, 31, 23, 56, 78, 92, 12, 23, 14, 23, 54] // }, { // name: '分类5', // type: 'bar', // stack: '1', // itemStyle: { // normal: { // color: '#EF665C' // } // }, // data: [12, 30, 15, 23, 32, 64, 17, 26, 87, 17, 63, 26] // }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } // console.log(echarts) } //图表 事件来源统计饼图 function barechart13(datas) { // console.log(datas) // console.log(echarts) var dom = document.getElementById("sjlyqs"); // console.log(dom) var option = null; var myChart = echarts.init(dom); var Data_LYTJ = [] var Total = 0 if (datas && datas.length > 0) { for (var j = 0; j < datas.length; j++) { console.log(datas[j]) var data = { "name": datas[j]._name, "value": datas[j].percentage } Total = Total += datas[j]._count Data_LYTJ.push(data) } console.log(Total) option = { color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], // backgroundColor: '#000', title: { text: '事件总数 (件)', subtext: Total, textAlign: 'center', textStyle: { color: '#333', fontSize: 20, // align: 'center' }, subtextStyle: { fontSize: 18, color: ['#005395'], fontWeight: 'bolder' // align: 'center' }, x: '25%', y: '40%', }, grid: { top: '0%', bottom: 150, left: 100, right: '10%' }, legend: { orient: 'vertical', top: "middle", left: "55%", itemGap: 20, textStyle: { color: '#333', fontSize: 16, }, itemWidth: 15, itemHeight: 15, icon: 'roundRect', data: Data_LYTJ, }, series: [ // 主要展示层的 { radius: ['62%', '85%'], center: ['25%', '50%'], type: 'pie', label: { normal: { show: true, formatter: "{c}%", textStyle: { fontSize: 14, }, position: 'outside' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length: 10, length2: 35, fontSize: 16 }, emphasis: { show: true } }, name: "民警训练总量", data: Data_LYTJ, }, ] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } } //图表 事件来源趋势图 function barechart14(datas) { console.log(datas) var Series = [] var legend = { data: [], align: 'left', // itemWidth:10, // itemHeight:10, bottom: 0 } if (datas && datas.length > 0) { for (var j = 0; j < datas[1].length; j++) { console.log(datas[1][j]) for (var key in datas[1][j]) { console.log(key) console.log(datas[1][j][key]) var data = { name: key, type: 'line', itemStyle: { normal: { // color: '#49A9EE' } }, lineStyle: { normal: { // color: '#49A9EE' } }, data: datas[1][j][key] } legend.data.push(key) Series.push(data) } } console.log(echarts) var dom = document.getElementById("sjlytj"); console.log(dom) var myChart = echarts.init(dom); var option = null; console.log(myChart) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#fff', maskColor: 'rgba(255,255,255,0)', zlevel: 0 }); myChart.hideLoading(); option = { color: ['#005395', '#1EA58F', '#87C966', '#FFCD61', '#585247', '#49A9EE', '#009D85', "rgba(250,250,250,0.3)"], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 // type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' lineStyle: { color: '#49A9EE', type: 'dotted' }, } }, legend: legend, grid: { left: '1%', right: '0%', bottom: '15%', top: '10%', containLabel: true }, xAxis: [{ type: 'category', // axisTick: { // alignWithLabel: true // }, axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, data: datas[0] }], yAxis: [{ type: 'value', scale: true, name: '事件数量 (件)', min: 0, boundaryGap: [0.2, 0.2], // axisLabel: { // formatter: '{value}' // } axisLabel: { textStyle: { color: '#7B7B7B', // fontSize: '14', } }, axisLine: { show: true, lineStyle: { color: '#7B7B7B', // type: 'dotted' }, }, }, ], series: Series // [{ // name: '分类1', // type: 'line', // itemStyle: { // normal: { // color: '#49A9EE' // } // }, // lineStyle: { // normal: { // color: '#49A9EE' // } // }, // data: [10, 20, 5, 43, 12, 34, 12, 56, 67] // }, { // name: '分类2', // type: 'line', // itemStyle: { // normal: { // color: '#87C966' // } // }, // lineStyle: { // normal: { // color: '#87C966' // } // }, // data: [12, 10, 15, 23, 19, 24, 18, 26, 57] // }] }; if (option && typeof option === "object") { myChart.setOption(option); myChart.hideLoading(); } } } // setTimeout(function () { $scope.SLQS_Data($scope.searchkeys) $scope.FLQS_Data1($scope.searchkeys) // }, 1000); }])