impr:抽离js逻辑
parent
e9382fc53c
commit
3adb25bfce
103
js/console.js
103
js/console.js
|
|
@ -1,49 +1,88 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
var useModel = ["form", "okUtils", "table", "laytpl", "laydate", "element", "jquery", "countUp", "echartsData", "okMock"];
|
var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "echartsData", "okMock"];
|
||||||
layui.config({
|
layui.config({
|
||||||
base: "../js/"
|
base: "../js/"
|
||||||
}).use(useModel, function () {
|
}).use(useModel, function () {
|
||||||
var $form = layui.form;
|
|
||||||
var countUp = layui.countUp;
|
var countUp = layui.countUp;
|
||||||
var laydate = layui.laydate;
|
|
||||||
var element = layui.element;
|
|
||||||
var table = layui.table;
|
var table = layui.table;
|
||||||
var okUtils = layui.okUtils;
|
var okUtils = layui.okUtils;
|
||||||
var okMock = layui.okMock;
|
var okMock = layui.okMock;
|
||||||
var $ = layui.jquery;
|
var $ = layui.jquery;
|
||||||
var laytpl = layui.laytpl;
|
|
||||||
/**静态数据**/
|
|
||||||
var echartsData = layui.echartsData;
|
|
||||||
init();
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
/**
|
/**
|
||||||
* 今日访问量
|
* 收入、商品、博客、用户
|
||||||
*/
|
*/
|
||||||
|
function statText() {
|
||||||
var elem_nums = $(".stat-text");
|
var elem_nums = $(".stat-text");
|
||||||
elem_nums.each(function (i, j) {
|
elem_nums.each(function (i, j) {
|
||||||
let ran = parseInt(Math.random() * 99 + 1);
|
var ran = parseInt(Math.random() * 99 + 1);
|
||||||
!new countUp({
|
!new countUp({
|
||||||
target: j,
|
target: j,
|
||||||
endVal: 20 * ran
|
endVal: 20 * ran
|
||||||
}).start();
|
}).start();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**图表**/
|
var userSourceOption = {
|
||||||
var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
"title": {"text": "用户访问"},
|
||||||
var mapChina = echarts.init($('#mapChina')[0]);
|
"tooltip": {
|
||||||
okUtils.echartsResize([mapTree, mapChina]);
|
"trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}
|
||||||
|
},
|
||||||
mapTree.setOption(echartsData.mapTree);//数据图
|
"legend": {
|
||||||
|
"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
|
||||||
echartsData.mapChina.series[0].data = echartsData.Address;//地图数据
|
},
|
||||||
|
"toolbox": {
|
||||||
// visualMap
|
"feature": {"saveAsImage": {}}
|
||||||
mapChina.setOption(echartsData.mapChina);//地图
|
},
|
||||||
|
"grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": true},
|
||||||
|
"xAxis": [
|
||||||
|
{
|
||||||
|
"type": "category", "boundaryGap": false,
|
||||||
|
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"yAxis": [
|
||||||
|
{"type": "value"}
|
||||||
|
],
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "邮件营销", "type": "line", "stack": "总量", "areaStyle": {},
|
||||||
|
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "联盟广告", "type": "line", "stack": "总量", "areaStyle": {},
|
||||||
|
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "视频广告", "type": "line", "stack": "总量", "areaStyle": {},
|
||||||
|
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "直接访问", "type": "line", "stack": "总量", "areaStyle": {"normal": {}},
|
||||||
|
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "搜索引擎", "type": "line", "stack": "总量",
|
||||||
|
"label": {"normal": {"show": true, "position": "top"}},
|
||||||
|
"areaStyle": {"normal": {}},
|
||||||
|
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表格
|
* 用户访问
|
||||||
*/
|
*/
|
||||||
|
function userSource() {
|
||||||
|
var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||||
|
okUtils.echartsResize(userSourceOption);
|
||||||
|
mapTree.setOption(userSourceOption);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 所有用户
|
||||||
|
*/
|
||||||
|
function userList() {
|
||||||
table.render({
|
table.render({
|
||||||
method: "get",
|
method: "get",
|
||||||
url: okMock.api.user.list2,
|
url: okMock.api.user.list2,
|
||||||
|
|
@ -72,6 +111,24 @@ layui.config({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
statText();
|
||||||
|
userSource();
|
||||||
|
userList();
|
||||||
|
|
||||||
|
/**静态数据**/
|
||||||
|
var echartsData = layui.echartsData;
|
||||||
|
init();
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
// var mapTree = echarts.init($("#mapOne")[0], "mytheme");
|
||||||
|
// okUtils.echartsResize([mapTree, mapChina]);
|
||||||
|
// mapTree.setOption(echartsData.mapTree);//数据图
|
||||||
|
|
||||||
|
var mapChina = echarts.init($('#mapChina')[0]);
|
||||||
|
echartsData.mapChina.series[0].data = echartsData.Address;//地图数据
|
||||||
|
mapChina.setOption(echartsData.mapChina);//地图
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ layui.define(function (exports) {
|
||||||
|
|
||||||
var mapTree = {
|
var mapTree = {
|
||||||
"title": {
|
"title": {
|
||||||
"text": "堆叠区域图"
|
"text": "用户访问"
|
||||||
},
|
},
|
||||||
"tooltip": {
|
"tooltip": {
|
||||||
"trigger": "axis",
|
"trigger": "axis",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue