From 3adb25bfceeff2c8ee310b48fd4c10c3a23aec7d Mon Sep 17 00:00:00 2001 From: bobi Date: Sat, 24 Aug 2019 22:35:29 +0800 Subject: [PATCH] =?UTF-8?q?impr:=E6=8A=BD=E7=A6=BBjs=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/console.js | 109 +++++++++++++++++++++++++++++++++++----------- js/echartsData.js | 2 +- 2 files changed, 84 insertions(+), 27 deletions(-) diff --git a/js/console.js b/js/console.js index 7de410d..4eaa728 100644 --- a/js/console.js +++ b/js/console.js @@ -1,49 +1,88 @@ "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({ base: "../js/" }).use(useModel, function () { - var $form = layui.form; var countUp = layui.countUp; - var laydate = layui.laydate; - var element = layui.element; var table = layui.table; var okUtils = layui.okUtils; var okMock = layui.okMock; var $ = layui.jquery; - var laytpl = layui.laytpl; - /**静态数据**/ - var echartsData = layui.echartsData; - init(); - function init() { - /** - * 今日访问量 - */ + /** + * 收入、商品、博客、用户 + */ + function statText() { var elem_nums = $(".stat-text"); elem_nums.each(function (i, j) { - let ran = parseInt(Math.random() * 99 + 1); + var ran = parseInt(Math.random() * 99 + 1); !new countUp({ target: j, endVal: 20 * ran }).start(); }); + } - /**图表**/ + var userSourceOption = { + "title": {"text": "用户访问"}, + "tooltip": { + "trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}} + }, + "legend": { + "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"] + }, + "toolbox": { + "feature": {"saveAsImage": {}} + }, + "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"); - var mapChina = echarts.init($('#mapChina')[0]); - okUtils.echartsResize([mapTree, mapChina]); + okUtils.echartsResize(userSourceOption); + mapTree.setOption(userSourceOption); + } - mapTree.setOption(echartsData.mapTree);//数据图 - - echartsData.mapChina.series[0].data = echartsData.Address;//地图数据 - - // visualMap - mapChina.setOption(echartsData.mapChina);//地图 - - /** - * 表格 - */ + /** + * 所有用户 + */ + function userList() { table.render({ method: "get", 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);//地图 + } }); diff --git a/js/echartsData.js b/js/echartsData.js index ac91c54..4c700b0 100644 --- a/js/echartsData.js +++ b/js/echartsData.js @@ -26,7 +26,7 @@ layui.define(function (exports) { var mapTree = { "title": { - "text": "堆叠区域图" + "text": "用户访问" }, "tooltip": { "trigger": "axis",