app.controller('adChartCtrl', ['$scope', '$http', '$timeout', 'chartOptions', 'toaster', function ($scope, $http, $timeout, chartOptions, toaster) { moment.locale('zh-cn'); $scope.startTimeOpen = false; $scope.endTimeOpen = false; $scope.timeChange = function (newDate, oldDate) { $scope.startTimeOpen = false; $scope.endTimeOpen = false; }; var defaultValue = { agent: {id: "", nickname: "代理商"}, dealer: {value: "", label: "经销商"}, address: {value: "", label: "地址"}, dev: {value: "", label: "设备"} } //下拉框数据 $scope.condition = { agent: [defaultValue.agent], dealer: [defaultValue.dealer], address: [defaultValue.address], dev: [defaultValue.dev] }; //查询条件 $scope.query = { agent: defaultValue.agent, dealer: defaultValue.dealer, address: defaultValue.address, dev: defaultValue.dev, startTime: moment().format("YYYY-MM-DD"), endTime: moment().format("YYYY-MM-DD"), }; //不传分页参数则获取全部代理商 $http.get('/agent/getAgentsDetailList', {}).then(function (data) { data = data.data $scope.condition.agent = data.data.dataList; $scope.condition.agent.unshift({id: "", nickname: "-选择代理商-"});//可以选空 }); // angular 事件绑定 $scope.ngEvent = { //初始化代理商 changeAgent: function () { var id = $scope.query.agent.id; //无论是否选择了数据,都清空子级下拉框选中的项 $scope.query.dealer = defaultValue.dealer; $scope.query.address = defaultValue.address; $scope.query.dev = defaultValue.dev; //无论怎么选择,都清空子下拉框的所有选项 $scope.condition.dealer = [defaultValue.dealer]; $scope.condition.address = [defaultValue.address]; $scope.condition.dev = [defaultValue.dev]; //如果选择了代理商,则加载经销商 if (id) { $http.get('/ad/getDealerList', {params: {agentId: id}}).then(function (data) { data = data.data $scope.condition.dealer = data.data; $scope.condition.dealer.unshift(defaultValue.dealer);//可以选空 }); } }, changeDealer: function () { var id = $scope.query.dealer.value; $scope.query.address = defaultValue.address; $scope.query.dev = defaultValue.dev; $scope.condition.address = [defaultValue.address]; $scope.condition.dev = [defaultValue.dev]; //加载地址下拉框 id && $http.get('/ad/getAddressList', {params: {id: id}}).then(function (data) { data = data.data $scope.condition.address = data.data; $scope.condition.address.unshift(defaultValue.address);//可以选空 }); }, changeAddress: function () { var id = $scope.query.address.value; $scope.query.dev = defaultValue.dev; $scope.condition.dev = [defaultValue.dev]; //加载设备下拉框 id && $http.get('/ad/getDevList', {params: {id: id}}).then(function (data) { data = data.data $scope.condition.dev = data.data; $scope.condition.dev.unshift(defaultValue.dev);//可以选空 }); }, changeDev: function () { }, quickTime: function (event, passDay) { $scope.query.startTime = moment().add(-(passDay - 1),"day").format("YYYY-MM-DD"); $scope.query.endTime = moment().format("YYYY-MM-DD"); }, //查询 query: function () { if ($scope.query.startTime > $scope.query.endTime) { toaster.pop("info", "提示", "开始时间必须小于结束时间!"); return; } loadChartData($scope.query); } }; /*******以下为echarts*********/ var adChartPanelFans = echarts.init(document.getElementById('adChartPanelFans')); var adChartPanelMoney = echarts.init(document.getElementById('adChartPanelMoney')); //resize事件绑定 $(window).off("resize.adChart").on("resize.adChart", function () { adChartPanelFans.resize(); adChartPanelMoney.resize(); }); //按条件加载统计图 function loadChartData(query) { var params = $.extend(true, {}, query); params.agentId = query.agent.id params.dealerId = query.dealer.value params.groupId = query.address.value params.devNo = query.dev.value delete params.address delete params.agent delete params.dealer delete params.dev //获取数据:加粉统计 $http.get('/ad/getAdFansTrend', {params: params}).then(function (data) { data = data.data var transData = adapterFansData(data.data); var option = chartOptions.getLineOptions(transData.xData); customFansChart(option, transData); adChartPanelFans.setOption(option); }); //获取数据:收益趋势统计 $http.get('/ad/getAdMoneyTrend', {params: params}).then(function (data) { data = data.data var transData = adapterMoneyData(data.data); var option = chartOptions.getLineOptions(transData.xData); customMoneyChart(option, transData.yData); adChartPanelMoney.setOption(option); }); } //初始化0条件加载一次 loadChartData($scope.query); //数据适配 function adapterFansData(data) { var fansCount = 0; var maleCount = 0; var femaleCount = 0; var xData = []; var yData = {show: [], click: [], fans: [], fansTotal: []}; for (var i = 0; i < data.length; i++) { var item = data[i]; xData.push(item.time); yData.show.push(item.show); yData.click.push(item.click); yData.fans.push(item.fans); yData.fansTotal.push(item.fansTotal); fansCount = fansCount + item.fans; maleCount = maleCount + item.maleFans; femaleCount = femaleCount + item.femaleFans; } return { xData: xData, yData: yData, fansCount: fansCount, maleCount: maleCount, femaleCount: femaleCount, } } //数据适配 function adapterMoneyData(data) { var xData = []; var yData = []; for (var i = 0; i < data.length; i++) { var item = data[i]; xData.push(item.time); yData.push(item.value); } return { xData: xData, yData: yData } } //粉丝趋势自定义样式 function customFansChart(option, transData) { var yData = transData.yData; var fansCount = transData.fansCount; var maleCount = transData.maleCount; var femaleCount = transData.femaleCount; var unknownSexCount = fansCount - maleCount - femaleCount; option.grid.y = 80; option.title = { subtext: '吸粉总数:' + fansCount + ",男粉:" + maleCount + ",女粉:" + femaleCount + ", 未知: " + unknownSexCount, left: 'center', y: -30, textStyle: {}, subtextStyle: { fontSize: 14, color: "#333" } }; option.series = [ { name: '展现', type: 'line', itemStyle: {normal: {color: "rgba(0,0,0,.2)"}}, data: yData.show }, { name: '点击', type: 'line', itemStyle: {normal: {color: "#23B7E5"}}, data: yData.click }, { name: '新粉', type: 'line', itemStyle: {normal: {color: "#27c24c"}}, data: yData.fans },{ name: '粉丝总数', type: 'line', itemStyle: {normal: {color: "#f05050"}}, data: yData.fansTotal } ]; option.legend = { data: ['粉丝总数', '新粉', '展现', '点击'], y: 50 } } //收益趋势自定义样式 function customMoneyChart(option, yData) { option.series = [ { name: '收益', type: 'line', itemStyle: {normal: {color: "#23B7E5"}}, data: yData } ]; option.legend = { data: ['收益'] } } }]);