初始化项目：添加后端代码、ThinkPHP框架、前端资源
This commit is contained in:
@@ -0,0 +1,370 @@
|
||||
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").length > 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;
|
||||
});
|
||||
Reference in New Issue
Block a user