impr:抽离js逻辑

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);//地图
+    }
 });
 
 

js/echartsData.js

@@ -26,7 +26,7 @@ layui.define(function (exports) {
 
     var mapTree = {
             "title": {
-                "text": "堆叠区域图"
+                "text": "用户访问"
             },
             "tooltip": {
                 "trigger": "axis",