insure/public/assets/js/backend/cms/statistics.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Echarts) {

    var Controller = {
        index: function () {
            var option1 = {
                title: {
                    text: '订单统计',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b}<br>{a0} : {c0} 个 <br>{a1} : {c1} 元"
                },
                legend: {
                    data: ['订单额', '订单数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: Config.orderSaleCategory
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '订单数',
                        type: 'line',
                        data: Config.orderSaleNums,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '订单额',
                        type: 'bar',
                        smooth: true,
                        symbol: 'none',
                        data: Config.orderSaleAmount,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };

            var myChart1 = Echarts.init($('#echarts1')[0], 'walden');
            myChart1.setOption(option1);

            var option2 = {
                title: {
                    text: '付费占比',
                    subtext: '各模型付费占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Config.orderPercentCategory
                },
                series: [
                    {
                        name: '订单数',
                        type: 'pie',
                        center: ['50%', '50%'],
                        data: Config.orderPercentNums,
                        radius: [0, '30%'],

                        label: {
                            position: 'inner'
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '订单额',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label2: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} 元  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        data: Config.orderPercentAmount
                    }
                ]
            };

            var myChart2 = Echarts.init($('#echarts2')[0], 'walden');
            myChart2.setOption(option2);

            $(window).on("resize", function () {
                myChart1.resize();
                myChart2.resize();
            });

            // 基于准备好的dom，初始化echarts实例
            var myChart3 = Echarts.init($('#echarts3')[0], 'walden');

            // 指定图表的配置项和数据
            var option3 = {
                title: {
                    text: '',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Config.orderSaleCategory
                },
                yAxis: {},
                grid: [{
                    left: 'left',
                    top: 'top',
                    right: '10',
                    bottom: 30
                }],
                series: [
                    {
                        name: "交易额",
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {}
                        },
                        lineStyle: {
                            normal: {
                                width: 1.5
                            }
                        },
                        data: Config.orderSaleAmount
                    }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option3);

            $(window).resize(function () {
                myChart3.resize();
            });

            if ($("#echarts4").size() > 0) {
                // 基于准备好的dom，初始化echarts实例
                var myChart4 = Echarts.init($('#echarts4')[0], 'walden');

                // 指定图表的配置项和数据
                var option4 = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: Config.adminArchivesListCategory
                    },
                    yAxis: {},
                    grid: [{
                        left: 'left',
                        top: 'top',
                        right: '10',
                        bottom: 30
                    }],
                    series: Config.adminArchivesListData
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart4.setOption(option4);

                $(window).resize(function () {
                    myChart4.resize();
                });
            }

            $(".datetimerange").data("callback", function (start, end) {
                var date = start.format(this.locale.format) + " - " + end.format(this.locale.format);
                $(this.element).val(date);
                var model_id = $(this.element).closest("form").find(".model_id").val();
                refresh_echart($(this.element).data("type"), date, model_id);
            });

            $(".model_id").on("change", function () {
                var input = $(this).closest("form").find(".datetimerange");
                var type = $(input).data("type");
                var date = $(input).val();
                var model_id = $(this).val();
                refresh_echart(type, date, model_id);
            });

            Form.api.bindevent($("#form1"));
            Form.api.bindevent($("#form2"));

            var si = {};
            var refresh_echart = function (type, date, model_id) {
                si[type] && clearTimeout(si[type]);
                si[type] = setTimeout(function () {
                    Fast.api.ajax({
                        url: 'cms/statistics/index',
                        data: {date: date, type: type, model_id: model_id},
                        loading: false
                    }, function (data) {
                        if (type == 'sale') {
                            option1.xAxis.data = data.orderSaleCategory;
                            option1.series[0].data = data.orderSaleNums;
                            option1.series[1].data = data.orderSaleAmount;
                            myChart1.clear();
                            myChart1.setOption(option1, true);
                        } else if (type == 'percent') {
                            option2.legend.data = data.orderPercentCategory;
                            option2.series[0].data = data.orderPercentNums;
                            option2.series[1].data = data.orderPercentAmount;
                            myChart2.clear();
                            myChart2.setOption(option2, true);
                        } else if (type == 'order') {
                            option3.xAxis.data = data.category;
                            option3.series[0].data = data.data;
                            myChart3.clear();
                            myChart3.setOption(option3, true);
                        } else if (type == 'archives') {
                            option4.xAxis.data = data.category;
                            option4.series = data.data;
                            myChart4.clear();
                            myChart4.setOption(option4, true);
                        }
                        return false;
                    });
                }, 50);
            };

            //点击按钮
            $(document).on("click", ".btn-filter", function () {
                var label = $(this).text();
                var obj = $(this).closest("form").find(".datetimerange").data("daterangepicker");
                var dates = obj.ranges[label];
                obj.startDate = dates[0];
                obj.endDate = dates[1];

                obj.clickApply();
            });

            //点击刷新
            $(document).on("click", "a.btn-refresh", function () {
                if ($(this).data("type")) {
                    refresh_echart($(this).data("type"), "");
                } else {
                    var input = $(this).closest("form").find(".datetimerange");
                    var type = $(input).data("type");
                    var date = $(input).val();
                    var model_id = $(this).closest("form").find(".model_id").val();
                    refresh_echart(type, date, model_id);
                }
            });

            //每隔一分钟定时刷新图表
            setInterval(function () {
                $(".btn-refresh").trigger("click");
            }, 60000);

            //选项卡切入事件
            $(document).on("click", "#resetecharts", function () {
                setTimeout(function () {
                    $(window).trigger("resize");
                }, 50);
            });
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});