<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>下单数-分渠道</title>
|
<link rel="stylesheet" type="text/css" href="../../../css/doui.min.css"/>
|
<script src="../../../js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../../../js/requestHost.js" type="text/javascript" charset="utf-8"></script>
|
<link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css" />
|
<script src="../../../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
doui.importLoad({
|
importArray: [
|
// 雷打不动
|
getHostPath() + "js/jquery.min.js",
|
getHostPath() + "js/vue.min.js",
|
// 字体图标
|
getHostPath() + "fontAdmin/iconfont.css",
|
getHostPath() + "font/iconfont.css",
|
// dom模板
|
getHostPath() + "css/admin-all.css",
|
getHostPath() + "js/admin-creat.js",
|
// Echarts插件
|
getHostPath() + "childPath/charts/echarts.common.min.js",
|
|
getHostPath() + "js/confirmTrans.js",
|
],
|
});
|
</script>
|
</head>
|
|
<body class="fontPC">
|
<div id="allwai" class="winSizeBox bg-white">
|
|
<!-- =============================================================== 搜索筛选(顶部) -->
|
<div id="thisHeader" style="width:7.5rem;"></div>
|
|
<!-- =============================================================== 表格 -->
|
<div id="thisTable" class="admin-main-overHeader">
|
<!--图表外层-->
|
<div id="main" style="width:100%; height:100%; padding:20px;"></div>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
// 图表申明
|
var myChart = null;
|
// 图标设置
|
var option = {
|
// 表格标题
|
title: { text: '分渠道' },
|
// 坐标系
|
grid: { show: true },
|
// 提示框
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: { type: 'cross' }
|
},
|
// 提供下载为图
|
toolbox: { feature: { saveAsImage: {} } },
|
// 图例项
|
legend: { data: [] }, // 需要接口获取
|
// X轴
|
xAxis: {
|
name: "时间",
|
type: 'category',
|
boundaryGap: false,
|
data: [], // 需要接口获取
|
},
|
// Y轴
|
yAxis: {
|
name: "数目",
|
type: 'value',
|
axisLabel: { formatter: '{value}' },
|
axisPointer: { snap: true }
|
},
|
// 数据
|
series: [], // 需要接口获取
|
};
|
|
// vue实例化
|
doui.onReady({
|
success: function()
|
{
|
// ----------------------------------------------------- 顶部
|
// 生成顶部筛选项dom
|
adminDom.header.creat({
|
el: "#thisHeader",
|
touchSearch: function (optC)
|
{
|
// 请求地址
|
var myurl = gethttp() + "/admin/new/api/v1/countCharts/getOrderCharts";
|
|
// 请求数据
|
var mydata = {
|
dateType: optC.select.result,
|
channelArray: optC.screen[0].result, // 平台名称
|
typeArray: optC.screen[1].result,
|
};
|
|
if (optC.change.result == 2){
|
mydata.channelArray = "";
|
mydata.typeArray = ["channelOrderMoney"];
|
}
|
|
// 根据选择修改
|
if (mydata.dateType == "1")
|
{
|
mydata.startTime = optC.input[0].result; // 开始时间
|
mydata.endTime = optC.input[1]?optC.input[1].result:""; // 结束时间
|
}
|
if (mydata.dateType == "2")
|
{
|
mydata.year = optC.input[0].result; // 年份
|
}
|
// 数据请求
|
doui.showLoading("加载数据");
|
doui.request({
|
type: "jsonp",
|
url: myurl,
|
data: mydata,
|
success: function (res)
|
{
|
doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else
|
{
|
// 图例选择
|
var legendData = new Array();
|
// 分析数据
|
for (var i = 0; i < res.data.line_list.length; i++)
|
{
|
legendData.push(res.data.line_list[i].name);
|
res.data.line_list[i].type = "line"; // 线条样式
|
res.data.line_list[i].smooth = true; // 线条平滑
|
// res.data.line_list[i].stack = '总量'; // 数据堆叠
|
}
|
// 图表赋值
|
option.legend.data = legendData; // 图例项
|
option.xAxis.data = res.data.xAxis_list; // X轴数据
|
option.series = res.data.line_list; // 线条数据
|
myChart.setOption(option, true);
|
}
|
}
|
});
|
}
|
});
|
// 下拉框
|
adminDom.header.select({
|
show: true,
|
list: [
|
{ "key": "1", value: "日视图" },
|
{ "key": "2", value: "月视图" },
|
{ "key": "3", value: "年视图" },
|
],
|
touch: function(back)
|
{
|
// 日视图
|
if (back == "1") { adminDom.header.input({ num: 2, type: "date", }); }
|
// 月视图
|
else if (back == "2") { adminDom.header.input({ num: 1, type: "number", placeholder: "要查看的年份，如：2018" }); }
|
// 年视图
|
else if (back == "3") { adminDom.header.input({ num: 1, type: "number", placeholder: "该模式下无需输入" }); }
|
}
|
});
|
// 输入搜索
|
adminDom.header.input({ num: 2, type: "date", });
|
// 切换
|
adminDom.header.change({
|
show: true,
|
list: [
|
{ key: 1, value: "单数" },
|
{ key: 2, value: "金额" },
|
],
|
});
|
// 筛选项
|
adminDom.header.screen({
|
show: true,
|
list: [
|
{
|
title: "下载平台",
|
muchCheck: true, // 是否可以多选
|
child: [
|
{ key: ["p360"], value: "360", check: false },
|
{ key: ["appstore"], value: "appstore", check: true },
|
{ key: ["douyin"], value: "官网", check: true },
|
{ key: ["guanwang"], value: "华为", check: true },
|
{ key: ["meizu"], value: "魅族", check: true },
|
{ key: ["oppo"], value: "oppo", check: true },
|
{ key: ["pp"], value: "PP", check: false },
|
{ key: ["qq"], value: "腾讯应用宝", check: true },
|
{ key: ["sougou"], value: "搜狗", check: false },
|
{ key: ["vivo"], value: "vivo", check: true },
|
{ key: ["xiaomi"], value: "小米", check: true },
|
{ key: ["yaoqing"], value: "邀请赚", check: false },
|
{ key: ["yingyin"], value: "影音", check: false },
|
{ key: ["huawei"], value: "抖音", check: false },
|
{ key: ["lenovo"], value: "联想", check: false },
|
{ key: ["unknown"], value: "其他", check: false },
|
],
|
input: { type: "number", num: 0 },
|
},
|
{
|
title: "订单类型（仅筛选单数）",
|
muchCheck: false, // 是否可以多选
|
child: [
|
{ key: ["channelOrderNum24H"], value: "24小时", check: false },
|
{ key: ["channelOrderNum"], value: "全部", check: true },
|
],
|
input: { type: "number", num: 0 },
|
},
|
],
|
});
|
|
|
// ----------------------------------------------------- 图标处
|
// Echarts初始化
|
myChart = echarts.init(document.getElementById('main'));
|
myChart.resize({ height: this.autoHeight});
|
myChart.resize({ width: this.autoWidth});
|
|
// ----------------------------------------------------- 初始行为
|
// 时间初始化为前十天
|
initInputGet();
|
// 请求数据
|
vm_header.search();
|
}
|
});
|
|
|
// 初始化为最近10天
|
function initInputGet ()
|
{
|
// 获取当前时间戳
|
var timestampEnd = new Date().getTime() - (1000*60*60*24*1);
|
var timestampStart = timestampEnd - (1000*60*60*24*11);
|
// 开始时间转化为识别类型
|
var mo = new Date(timestampStart);
|
var month = mo.getMonth()+1; if (month < 10) { month = "0" + month; }
|
var day = mo.getDate(); if (day < 10) { day = "0" + day; }
|
var commonStart = mo.getFullYear() + "-" + month + "-" + day;
|
// 结束时间转化为识别类型
|
mo = new Date(timestampEnd);
|
month = mo.getMonth()+1; if (month < 10) { month = "0" + month; }
|
day = mo.getDate(); if (day < 10) { day = "0" + day; }
|
var commonEnd = mo.getFullYear() + "-" + month + "-" + day;
|
// 将输入初始化
|
vm_header.input.result[0] = commonStart;
|
vm_header.input.result[1] = commonEnd;
|
}
|
|
setTimeout(function() {
|
var html = "<div style='margin:0px 0px 0px 20px;'><button type='button' id = 'explain' class='layui-btn layui-btn-xs'>统计说明</button></div>";
|
$(".flex1").eq(0).append(html);
|
|
$("#explain").bind("click",function(){
|
var text = "统计渠道新增订单：</br>1、有效订单 </br>2、一个订单号对应一个订单";
|
explainCount(text);
|
});
|
}, 1000);
|
|
</script>
|
