1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102 |
- app.controller('devChartCtrl', ['$scope', '$http', '$timeout', '$interval', 'toaster', 'chartOptions', '$localStorage', function ($scope, $http, $timeout, $interval, toaster, chartOptions, $localStorage) {
- particlesJS.load('particles-js', '/1.0/vendor/libs/particles.json', function () {
- });
- //每4个字自动换行
- function autoBreak(str) {
- var lineNumber = 4;
- var w = $(window).width()
- if (w <= 1366) {
- lineNumber = 3
- } else if (w <= 1920) {
- lineNumber = 4
- } else if (w <= 4096) {
- lineNumber = 8
- }
- var newStr = '';
- for (var index = 0; index < str.length; index++) {
- var item = str[index]
- newStr = newStr + item
- if ((index + 1) % lineNumber === 0) {
- newStr = newStr + '\n'
- }
- }
- return newStr
- }
- /*******以下为echarts*********/
- var devChartPanelMap = echarts.init(document.getElementById('devChartPanelMap'));
- var incomeChartLine = echarts.init(document.getElementById('incomeChartLine'));
- var consumeChartLine = echarts.init(document.getElementById('consumeChartLine'));
- var userChartPie = echarts.init(document.getElementById('userChartPie'));
- var feedbackChartPie = echarts.init(document.getElementById('feedbackChartPie'));
- var dealerIncomeTopChart = echarts.init(document.getElementById('dealerIncomeTopChart'));
- var rightChart1 = echarts.init(document.getElementById('rightChart1'));
- var devBeingUsedChart = echarts.init(document.getElementById('devBeingUsedChart'));
- function resizeChart() {
- clearTimeout(timer);
- // resize有尺寸改变完后会有一定的延迟,会导致echarts提前渲染,依然是按照原来的尺寸渲染
- timer = setTimeout(function () {
- devChartPanelMap.resize();
- incomeChartLine.resize();
- consumeChartLine.resize();
- userChartPie.resize();
- feedbackChartPie.resize();
- dealerIncomeTopChart.resize();
- rightChart1.resize();
- devBeingUsedChart.resize();
- }, 300);
- }
- $scope.showData = {
- devBusy: 0,
- devOnline: 0,
- devOffline: 0,
- unregistered: 0
- };
- $interval(function () {
- setMapTime();
- }, 1000);
- function setMapTime() {
- $scope.showData.date = moment().format("YYYY年MM月DD日")
- $scope.showData.week = moment().format('dddd')
- $scope.showData.time = moment().format("HH:mm:ss")
- }
- setMapTime();
- var timer = null;
- //resize事件绑定
- $(window).off("resize.devChart").on("resize.devChart", function () {
- resizeChart();
- });
- var colorStopList = {
- blue: ['#57FFE0', '#3469E2'],
- red: ['#FF7671', '#A14AFF'],
- yellow: ['#FFEA4F', '#F89212'],
- green: ['#61E0B1', '#00B25E'],
- gray: ['#fff', '#cfcfcf'],
- purple: ['#D3B5DF', '#8865A5'],
- }
- function getColorStop(key) {
- return {
- colorStops: [{
- offset: 0,
- color: colorStopList[key][0] // 0% 处的颜色
- }, {
- offset: 1,
- color: colorStopList[key][1] // 100% 处的颜色
- }]
- }
- }
- $scope.optionConfig = {
- getStaticMapOption: function (chartEntity, dataIn) {
- var data = dataIn.dataList;
- var mapName = 'china'
- var geoCoordMap = {};
- /*获取地图数据*/
- chartEntity.showLoading();
- var mapFeatures = echarts.getMap(mapName).geoJson.features;
- chartEntity.hideLoading();
- mapFeatures.forEach(function (v) {
- // 地区名称
- var name = v.properties.name;
- // 地区经纬度
- geoCoordMap[name] = v.properties.cp;
- });
- var tempSort = data.sort(function (a, b) {
- return b.value - a.value;
- })
- var tempSortLen = tempSort.length;
- // 值的范围
- var max, min;
- if (tempSortLen > 0) {
- // 值的范围
- max = tempSort[0].value
- min = tempSort[tempSortLen - 1].value;
- }
- // 地图气泡的大小范围
- var maxSize4Pin = 72,
- minSize4Pin = 30;
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value),
- });
- }
- }
- return res;
- };
- var markData = convertData(data);
- // 底点的最大尺寸
- var pointMaxSize = 25;
- var option = {
- visualMap: {
- show: false,
- min: 0,
- max: 500,
- left: 'left',
- top: 'bottom',
- text: ['高', '低'], // 文本,默认为数值文本
- calculable: true,
- seriesIndex: [1],
- inRange: {
- color: ['#044161', '#2B91B7']
- }
- },
- geo: {
- show: true,
- map: mapName,
- label: {
- normal: {
- show: false
- },
- emphasis: {
- show: false,
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#031525',
- borderColor: '#3B5077',
- },
- emphasis: {
- areaColor: '#2B91B7',
- }
- }
- },
- series: [{
- name: '散点',// 蓝色的小点
- type: 'scatter',
- coordinateSystem: 'geo',
- data: markData,
- symbolSize: function (val) {
- var size = val[2] / 10
- if (size > pointMaxSize) {
- size = pointMaxSize
- }
- return size;
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#05C3F9'
- }
- }
- }, {
- type: 'map',
- map: mapName,
- geoIndex: 0,
- aspectScale: 0.75, //长宽比
- showLegendSymbol: false, // 存在legend时显示
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: false,
- textStyle: {
- color: '#fff'
- }
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#031525',
- borderColor: '#3B5077',
- },
- emphasis: {
- areaColor: '#2B91B7'
- }
- },
- animation: false,
- data: data
- }, {
- // 小点上的气泡
- name: '气泡',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbol: 'pin', //气泡
- symbolSize: function (val) {
- var a = val[2] / (max - min);//当前值和最大值的比例
- var size = minSize4Pin + (maxSize4Pin - minSize4Pin) * a;// 实际大小
- if (size > maxSize4Pin) {
- size = maxSize4Pin
- }
- return size;
- },
- label: {
- normal: {
- show: true,
- formatter: function (params) {
- var size = params.value[2]
- return size
- },
- textStyle: {
- color: '#fff',
- fontSize: 9,
- }
- }
- },
- itemStyle: {
- normal: {
- color: '#108EE9', //标志颜色
- }
- },
- zlevel: 6,
- data: markData,
- }, {
- // 排名前5 底部的小点变成黄色 漪涟
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- data: convertData(data.sort(function (a, b) {
- return b.value - a.value;
- }).slice(0, 5)),
- symbolSize: function (val) {
- var size = val[2] / 10
- if (size > pointMaxSize) {
- size = pointMaxSize
- }
- return size;
- },
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: 'yellow',
- shadowBlur: 10,
- shadowColor: 'yellow'
- }
- },
- zlevel: 1
- },
- ]
- };
- return option
- },
- //坐标系的公共风格
- getLineOptionsForMap: function (xData, textBreak) {
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#108EE9',
- width: .3,
- }
- }
- },
- grid: {
- x: 52,
- x2: 15,
- y: 30,
- y2: textBreak ? 32 : 28,// 自动换行的X坐标需要展示2行,空间要多一点
- },
- xAxis: [
- {
- type: 'category',
- axisLabel: {
- textStyle: {
- color: "#fff",
- fontSize: "12px"
- }
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- data: xData.map(function (str) {
- if (textBreak) {
- return autoBreak(str)
- } else {
- return str
- }
- })
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- textStyle: {
- color: "#fff",
- fontSize: "12px"
- }
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: []
- };
- return option;
- },
- getIncomeLineOption: function (data) {
- var payIncomeCount = 0;
- var lineCoinsCount = 0;
- var xData = [];
- var yData = {payIncome: [], lineCoins: []};
- for (var i = 0; i < data.length; i++) {
- var item = data[data.length - i - 1];
- xData.push(item.dateStr);
- yData.payIncome.push(item.payIncome);
- yData.lineCoins.push(item.lineCoins);
- payIncomeCount = payIncomeCount + item.payIncome;
- lineCoinsCount = lineCoinsCount + item.lineCoins;
- }
- var option = this.getLineOptionsForMap(xData);
- option.series = [
- {
- name: '在线收入',
- stack: '收入',
- type: 'bar',
- itemStyle: {
- color: "rgba(16,142,233,.9)",
- },
- data: yData.payIncome
- }, {
- name: '线下投币',
- stack: '收入',
- type: 'bar',
- itemStyle: {
- color: "rgba(16,142,233,.6)",
- },
- data: yData.lineCoins
- }
- ];
- return option;
- },
- // 由于早期的消费可能没有数据,需要给源数据,需要补齐 0,否则折现的时间轴和数据对应错误;
- fixConsumptionData: function (list) {
- // 找到所有key
- var allConsumKey = {};
- for (var index in list) {
- var item = list[index];
- var list2 = item.consumptionList;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- allConsumKey[name] = name;
- }
- }
- //修复该条数据。 这里只是多循环一次,性能问题不大。
- for (var index in list) {
- var item = list[index];
- if (!item.consumptionList) {
- item.consumptionList = []
- }
- var list2 = item.consumptionList;
- for (var key in allConsumKey) {
- var hasKeyFlag = false;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- // 如果有 key的消费数据,则找下一个key
- if (key === name) {
- hasKeyFlag = true;
- break;
- }
- }
- // 如果list2循环结束后,找不到key,则补全数据;
- if (!hasKeyFlag) {
- item.consumptionList.push({
- name: key,
- value: 0,
- });
- }
- }
- }
- },
- getConsumptionLineOption: function (list) {
- //补齐数据结构
- this.fixConsumptionData(list);
- var xData = [];
- var consumeSeriesMap = {};
- var length = list.length;
- for (var index in list) {
- // 正序时间排列
- var item = list[length - 1 - index];
- xData.push(item.dateStr);
- var list2 = item.consumptionList;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- var value = item2.value;
- if (!consumeSeriesMap[name]) {
- consumeSeriesMap[name] = [];
- }
- consumeSeriesMap[name].push(value);
- }
- }
- var myColor = this.getColorList();
- var option = this.getLineOptionsForMap(xData);
- var index = 0;
- for (var key in consumeSeriesMap) {
- var dataList = consumeSeriesMap[key];
- option.series.push({
- name: key,
- type: 'line',
- itemStyle: {
- normal: {
- color: myColor[index * 2],//相邻的颜色太相似了,所以间隔一个,越界不会异常,会使用默认色
- }
- },
- data: dataList
- });
- index++;
- }
- return option;
- },
- // pie的公共item风格
- getPieItemStyle: function () {
- var opt = {
- normal: {
- label: {
- show: true,
- position: 'outside',
- color: '#ddd',
- formatter: function (params) {
- return params.name + ':' + params.value;
- },
- rich: {
- white: {
- color: '#ddd',
- align: 'center',
- padding: [3, 0]
- }
- }
- },
- labelLine: {
- length: 8,
- length2: 12,
- show: true,
- }
- }
- };
- return opt
- },
- getUserPieOption: function (payload) {
- var option = {
- legend: {
- orient: 'vertical',
- align: 'left',
- x2: 10,
- y: 'center',
- textStyle: {
- color: "#ddd",
- fontSize: 12
- },
- data: ['总数', '日活', '男性', '女性', '未知',]
- },
- tooltip: {
- trigger: 'item',
- },
- series: [
- {
- type: 'pie',
- radius: ['0%', '28%'],
- center: ['40%', '50%'],
- label: {
- normal: {
- color: '#ddd',
- position: 'inner'
- }
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- "itemStyle": {"normal": {borderWidth: 2}},
- data: [
- {
- value: payload.userCount,
- name: "总数",
- "itemStyle": {"normal": {"color": getColorStop("purple")}}
- },
- {
- value: payload.todayActiveUsers,
- name: "日活",
- "itemStyle": {"normal": {"color": getColorStop("green")}}
- }
- ]
- },
- {
- type: 'pie',
- radius: ['34%', '60%'],
- center: ['40%', '50%'],
- roseType: 'radius',
- itemStyle: this.getPieItemStyle(),
- data: [
- {
- value: payload.maleCount,
- name: "男性",
- "itemStyle": {"normal": {"color": getColorStop("blue"),}},
- },
- {
- value: payload.femaleCount,
- name: "女性",
- "itemStyle": {"normal": {"color": getColorStop("red"),}}
- },
- {
- value: (payload.userCount - payload.maleCount - payload.femaleCount),
- name: "未知",
- "itemStyle": {"normal": {"color": getColorStop("gray"),}}
- }]
- },
- ]
- };
- return option;
- },
- getFeedbackPieOption: function (payload) {
- var placeHolderStyle = {
- normal: {
- color: 'rgba(0,0,0,.1)',
- label: {
- show: false,
- },
- labelLine: {show: false}
- },
- emphasis: {
- color: 'rgba(0,0,0,0)',
- }
- };
- var seriesOpt = {
- type: 'pie',
- center: ['40%', '50%'],
- itemStyle: this.getPieItemStyle(),
- animationType: 'scale',
- animationEasing: 'elasticOut',
- animationDelay: function (idx) {
- return Math.random() * 200;
- }
- };
- var option = {
- legend: {
- orient: 'vertical',
- align: 'left',
- x2: 10,
- y: 'center',
- textStyle: {
- color: "#ddd",
- fontSize: 12
- },
- data: ['已上分', '已退币', '已维修',]
- },
- tooltip: {
- trigger: 'item',
- },
- series: [
- $.extend(true, {}, seriesOpt, {
- radius: ['28%', '38%'],
- data: [{
- value: payload.upperProcessedCount,
- name: '已上分',
- labelLine: {
- length: 20,
- length2: 20,
- show: true,
- },
- "itemStyle": {"normal": {"color": getColorStop("blue")}},
- }, {
- value: payload.upperCount - payload.upperProcessedCount,
- name: '未上分',
- label: {show: false},
- itemStyle: placeHolderStyle
- }],
- }),
- $.extend(true, {}, seriesOpt, {
- radius: ['40%', '50%'],
- data: [{
- value: payload.refundProcessedCount,
- name: '已退币',
- labelLine: {
- length: 10,
- length2: 20,
- show: true,
- },
- "itemStyle": {"normal": {"color": getColorStop("yellow")}},
- }, {
- value: payload.refundCount - payload.refundProcessedCount,
- name: '未退币',
- label: {show: false},
- itemStyle: placeHolderStyle
- }],
- }),
- $.extend(true, {}, seriesOpt, {
- radius: ['52%', '62%'],
- data: [{
- value: payload.faultProcessedCount,
- name: '已维修',
- "itemStyle": {"normal": {"color": getColorStop("red")}},
- }, {
- value: payload.faultCount - payload.faultProcessedCount,
- name: '未维修',
- label: {show: false},
- itemStyle: placeHolderStyle
- }],
- }),
- ]
- };
- return option;
- },
- getColorList: function () {
- var myColor = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a', '#f69846', '#ff4343'];
- return myColor;
- },
- // 由于早期的消费可能没有数据,需要给源数据,需要补齐 0,否则折现的时间轴和数据对应错误;
- fixData: function (list) {
- // 找到所有key
- var allConsumKey = {};
- for (var index in list) {
- var item = list[index];
- var list2 = item.items;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- allConsumKey[name] = name;
- }
- }
- //修复该条数据。 这里只是多循环一次,性能问题不大。
- for (var index in list) {
- var item = list[index];
- if (!item.items) {
- item.items = []
- }
- var list2 = item.items;
- for (var key in allConsumKey) {
- var hasKeyFlag = false;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- // 如果有 key的消费数据,则找下一个key
- if (key === name) {
- hasKeyFlag = true;
- break;
- }
- }
- // 如果list2循环结束后,找不到key,则补全数据;
- if (!hasKeyFlag) {
- item.items.push({
- name: key,
- value: 0,
- });
- }
- }
- }
- },
- // 设置公告的 pictorialBar风格
- setPictorialBarStyle: function (option, yData, hasPercent) {
- var myColor = this.getColorList();
- if (!hasPercent) {
- myColor.reverse();
- }
- option.tooltip.formatter = function (params) {
- var param = params[0];
- var name = param.name.replace(/[\n]/g, '');//去掉换行符号
- var span = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + param.color + ';"></span>';
- if (hasPercent) {
- return span + name + ":占比" + param.value + "%"
- } else {
- return span + name + ":" + param.value
- }
- };
- option.series.push({
- name: '消费次数',
- type: 'pictorialBar',
- barCategoryGap: '20%',
- // 可以在线测试 symbol,http://www.runoob.com/try/try.php?filename=trysvg_path2
- // 稍尖:M200 200 c20 -10,80 -40, 85 -180c5 140,65 170,85 180l-170 0Z
- // 很尖:M200 200 c50 -10,80 -40, 85 -180c5 140,35 170,85 180l-170 0Z
- symbol: 'path://M200 200 c20 -10,80 -40, 85 -180c5 140,65 170,85 180l-170 0Z',
- label: {
- normal: {
- show: true,
- position: 'top',
- formatter: function (param) {
- if (hasPercent) {
- return param.value + "%"
- } else {
- return param.value
- }
- },
- textStyle: {
- fontSize: '12',
- color: '#fff'
- }
- }
- },
- itemStyle: {
- normal: {
- color: function (params) {
- var num = myColor.length;
- return myColor[params.dataIndex % num]
- },
- }
- },
- data: yData,
- });
- },
- getDealerIncomeTopChartOption: function (data) {
- var xData = [];
- var yData = [];
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- xData.push(item.name);
- yData.push(item.payIncomeTotal);
- }
- var option = this.getLineOptionsForMap(xData, true);
- this.setPictorialBarStyle(option, yData);
- return option
- },
- getUserConsumeFrequencyOption: function (data) {
- var xData = [];
- var yData = [];
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- xData.push(item.name);
- yData.push(item.percent);
- }
- var option = this.getLineOptionsForMap(xData);
- this.setPictorialBarStyle(option, yData, true);
- return option
- },
- // 全网用户
- getAllUserOption: function (list) {
- //补齐数据结构
- this.fixData(list);
- var xData = [];
- var consumeSeriesMap = {};
- var length = list.length;
- for (var index in list) {
- // 正序时间排列
- var item = list[length - 1 - index];
- xData.push(item.dateStr);
- var list2 = item.items;
- for (var index2 in list2) {
- var item2 = list2[index2];
- var name = item2.name;
- var value = item2.value;
- if (!consumeSeriesMap[name]) {
- consumeSeriesMap[name] = [];
- }
- consumeSeriesMap[name].push(value);
- }
- }
- var myColor = this.getColorList();
- var option = this.getLineOptionsForMap(xData);
- var index = 0;
- for (var key in consumeSeriesMap) {
- var dataList = consumeSeriesMap[key];
- option.series.push({
- name: key,
- type: 'line',
- itemStyle: {
- normal: {
- color: myColor[index * 2],//相邻的颜色太相似了,所以间隔一个,越界不会异常,会使用默认色
- }
- },
- data: dataList
- });
- index++;
- }
- return option;
- },
- getDevBeingUsedOption: function (data) {
- var xData = [];
- var yData = [];
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- xData.push(item.time);
- yData.push(item.devBeingUsed);
- }
- var option = this.getLineOptionsForMap(xData);
- option.series = [
- {
- name: '订单数',
- type: 'line',
- smooth: true,
- symbolSize: 0,
- itemStyle: {
- color: "rgba(16,142,233,.9)",
- },
- lineStyle: {
- normal: {
- width: 1
- }
- },
- areaStyle: { //区域填充样式
- normal: {
- //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {offset: 0, color: 'rgba(255,67,67, 0.8)'},
- {offset: 0.5, color: 'rgba(16,142,233, 0.5)'},
- {offset: 1, color: 'rgba(16,142,233, 0.1)'}
- ], false),
- shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
- shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
- }
- },
- data: yData
- }
- ];
- return option;
- },
- };
- $scope.chartActive = {
- incomeChartLine: false,
- consumeChartLine: false,
- userChartPie: false,
- feedbackChartPie: false,
- dealerIncomeTopChart: false,
- userConsumeFrequencyChart: false,
- devBeingUsedChart: false,
- };
- var feature_map = $localStorage.feature_map
- //按条件加载统计图 因为有的接口太慢,避免等待,直接并发
- function loadChartData() {
- var url = '/manager/getDevMapChart'
- //获取数据:地图设备统计
- $http.get(url, {}).then(function (data) {
- var payload = data.data.payload
- if (payload) {
- //地图拓展api地址:https://github.com/ecomfe/echarts/tree/master/extension/bmap
- var option = $scope.optionConfig.getStaticMapOption(devChartPanelMap, payload);
- var userName = $('.app-header .navbar-right .hidden-sm').text();
- if (userName.indexOf('郑建如') > -1) {
- var date = new Date()
- var rand = date.getHours() * 55 + date.getMinutes() * 22 + date.getSeconds() * 3
- var rand2 = Math.round(Math.random() * 20);
- var v1 = 60172 + rand + rand2;
- var v2 = 92051 + rand + rand2;
- var v3 = 10297 - rand - rand2;
- // mock data
- $scope.showData.devBusy = v1;
- $scope.showData.devOnline = v2;
- $scope.showData.devOffline = v3;
- } else {
- $scope.showData.devBusy = payload.busy;
- $scope.showData.devOnline = payload.online;
- $scope.showData.devOffline = payload.offline;
- $scope.showData.unregistered = payload.unregistered;
- }
- devChartPanelMap.setOption(option);
- devChartPanelMap.resize();// 确保地图居中
- }
- }).then(function () {
- $scope.chartActive.incomeChartLine = true;
- var url = '/manager/getAllDeviceIncomeList'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload.dataList) {
- var option = $scope.optionConfig.getIncomeLineOption(data.payload.dataList);
- incomeChartLine.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.consumeChartLine = true;
- var url = '/manager/getAllDeviceConsumption'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload.dataList) {
- var option = $scope.optionConfig.getConsumptionLineOption(data.payload.dataList);
- consumeChartLine.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.userChartPie = true;
- var url = '/manager/getAllUserStatistics'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload) {
- var option = $scope.optionConfig.getUserPieOption(data.payload);
- userChartPie.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.feedbackChartPie = true;
- var url = '/manager/getAllFeedbackStatistics'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload) {
- var option = $scope.optionConfig.getFeedbackPieOption(data.payload);
- feedbackChartPie.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.dealerIncomeTopChart = true;
- var url = '/manager/getDealerIncomeTotalTop'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload) {
- var option = $scope.optionConfig.getDealerIncomeTopChartOption(data.payload.dataList);
- dealerIncomeTopChart.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.rightChart1 = true;
- var url = '/manager/getUserConsumeFrequency'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload) {
- var option = $scope.optionConfig.getUserConsumeFrequencyOption(data.payload.dataList);
- rightChart1.setOption(option);
- }
- });
- }).then(function () {
- $scope.chartActive.devBeingUsedChart = true;
- var url = '/manager/getDevBeingUsedTrend'
- $http.get(url, {}).then(function (data) {
- data = data.data
- if (data.payload) {
- var option = $scope.optionConfig.getDevBeingUsedOption(data.payload.dataList);
- devBeingUsedChart.setOption(option);
- }
- });
- })
- }
- $scope.chartHasLoad = false
- $scope.loadAllChart = function () {
- loadChartData();
- $scope.chartHasLoad = true
- }
- // 全屏事件绑定
- $scope.isFullscreen = false;
- $scope.$on('fullscreenchange', function (evt, data) {
- $timeout(function () {
- $scope.isFullscreen = screenfull.isFullscreen;
- resizeChart()
- })
- });
- }]);
|