<!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>
|
<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",
|
],
|
});
|
</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 mydata = {
|
dateType: optC.select.result,
|
};
|
// 根据选择修改
|
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: gethttp() + "/admin/new/api/v1/user/getNewUserCharts",
|
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", });
|
|
|
// ----------------------------------------------------- 图标处
|
// Echarts初始化
|
myChart = echarts.init(document.getElementById('main'));
|
|
|
// ----------------------------------------------------- 初始行为
|
// 时间初始化为前十天
|
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;
|
}
|
|
|
</script>
|
