manyi/static/admaster/js/controllers/adChart.js

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("day", -(passDay - 1)).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: ['收益']
        }
    }

}]);