del:抽离console.html chart data

js/console.js

@@ -1,6 +1,5 @@
 "use strict";
-var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "okMock"];
+layui.use(["okUtils", "table", "countUp", "okMock"], function () {
-layui.use(useModel, function () {
     var countUp = layui.countUp;
     var table = layui.table;
     var okUtils = layui.okUtils;
@@ -23,48 +22,18 @@ layui.use(useModel, function () {
 
     var userSourceOption = {
         "title": {"text": "用户访问"},
-        "tooltip": {
+        "tooltip": {"trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}},
-            "trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}
+        "legend": {"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]},
-        },
+        "toolbox": {"feature": {"saveAsImage": {}}},
-        "legend": {
-            "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
-        },
-        "toolbox": {
-            "feature": {"saveAsImage": {}}
-        },
         "grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": true},
-        "xAxis": [
+        "xAxis": [{"type": "category", "boundaryGap": false, "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}],
-            {
+        "yAxis": [{"type": "value"}],
-                "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": {},
+            {"name": "联盟广告", "type": "line", "stack": "总量", "areaStyle": {}, "data": [220, 182, 191, 234, 290, 330, 310]},
-                "data": [120, 132, 101, 134, 90, 230, 210]
+            {"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]}
-                "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]
-            }
         ]
     };
 
@@ -131,12 +100,7 @@ layui.use(useModel, function () {
                     "normal": {"areaColor": "#eeeeee", "borderColor": "#aaaaaa", "borderWidth": 0.5},
                     "emphasis": {"areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1}
                 },
-                "label": {
+                "label": {"normal": {"textStyle": {"color": "#000"}}, "emphasis": {"textStyle": {"color": "#000"}}}
-                    "normal": {"textStyle": {"color": "#000"}},
-                    "emphasis": {
-                        "textStyle": {"color": "#000"}
-                    }
-                }
             }
         ]
     };

js/console1.js

@@ -1,53 +1,129 @@
 "use strict";
-var useModel = ["form", "okUtils", "table", "laytpl", "laydate", "element", "jquery", "countUp", "home2Data"];//需要引入的模块
+layui.use(["okUtils", "countUp"], function () {
-layui.config({
+    var countUp = layui.countUp;
-    base: "../js/"
+    var okUtils = layui.okUtils;
-}).use(useModel, function () {
+    var $ = layui.jquery;
-    var $form = layui.form,
-        countUp = layui.countUp,
-        laydate = layui.laydate,
-        element = layui.element,
-        table = layui.table,
-        okUtils = layui.okUtils,
-        $ = layui.jquery,
-        laytpl = layui.laytpl;
-    /**静态数据**/
-    var echartsData = layui.home2Data;
-    init();
 
-    function init() {
+    /**
-        /**今日访问量**/
+     * 收入、商品、博客、用户
+     */
+    function initMediaCont() {
         var elem_nums = $(".media-cont .num");
         elem_nums.each(function (i, j) {
-            let ran = parseInt(Math.random() * 1900 + 100); //[100,2000)包括100不包括2000
+            var ran = parseInt(Math.random() * 1900 + 100);
             !new countUp({
                 target: j,
                 endVal: ran
             }).start();
         });
-
-        /**4个图表**/
-        var echIncome = echarts.init($("#echIncome")[0]);
-        var echGoods = echarts.init($('#echGoods')[0]);
-        var echBlogs = echarts.init($("#echBlogs")[0]);
-        var echUser = echarts.init($('#echUser')[0]);
-        okUtils.echartsResize([echIncome, echGoods, echBlogs, echUser]);
-
-        echIncome.setOption(echartsData.income);//数据图
-        echGoods.setOption(echartsData.goods);//数据图
-        echBlogs.setOption(echartsData.blogs);//数据图
-        echUser.setOption(echartsData.user);//数据图
-
-        //用户活跃量,用户访问来源
-        var echOne = echarts.init($("#echOne")[0], "themez");
-        var echTwo = echarts.init($("#echTwo")[0], "themez");
-        var mapThree = echarts.init($("#mapThree")[0], "themez");
-        okUtils.echartsResize([echOne, echTwo, mapThree]);
-
-        echOne.setOption(echartsData.echOne);//数据图
-        echTwo.setOption(echartsData.echTwo);//数据图
-        mapThree.setOption(echartsData.mapThree);//数据图
     }
+
+    function dataTrendOption(color) {
+        color = color || "#00c292";
+        return {
+            color: color, toolbox: {show: false, feature: {saveAsImage: {}}},
+            grid: {left: '-1%', right: '0', bottom: '0', top: '5px', containLabel: false},
+            xAxis: [{type: 'category', boundaryGap: false, splitLine: {show: false}, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],
+            yAxis: [{type: 'value', splitLine: {show: false}}],
+            series: [{
+                name: '用户', type: 'line', stack: '总量', smooth: true, symbol: "none", clickable: false, areaStyle: {},
+                data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
+            }]
+        }
+    }
+
+    function randomData() {
+        return Math.round(Math.random() * 500);
+    }
+
+    /**
+     * 近一周数量涨幅图表
+     */
+    function initDataTrendChart() {
+        // 收入
+        var echIncome = echarts.init($("#echIncome")[0]);
+        // 商品
+        var echGoods = echarts.init($('#echGoods')[0]);
+        // 博客
+        var echBlogs = echarts.init($("#echBlogs")[0]);
+        // 用户
+        var echUser = echarts.init($('#echUser')[0]);
+        echIncome.setOption(dataTrendOption("#00c292"));
+        echGoods.setOption(dataTrendOption("#ab8ce4"));
+        echBlogs.setOption(dataTrendOption("#03a9f3"));
+        echUser.setOption(dataTrendOption("#fb9678"));
+        okUtils.echartsResize([echIncome, echGoods, echBlogs, echUser]);
+    }
+
+    var userActiveTodayChartOption = {
+        color: "#03a9f3",
+        xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
+        yAxis: {type: 'value'},
+        series: [{data: [120, 200, 150, 80, 70, 110, 130], type: 'bar'}]
+    };
+
+    /**
+     * 今日用户活跃量图表
+     */
+    function initUserActiveTodayChart() {
+        var userActiveTodayChart = echarts.init($("#userActiveTodayChart")[0], "themez");
+        userActiveTodayChart.setOption(userActiveTodayChartOption);
+        okUtils.echartsResize([userActiveTodayChart]);
+    }
+
+    var userSourceTodayChartOption = {
+        title: {show: false, text: '用户访问来源', subtext: '纯属虚构', x: 'center'},
+        tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
+        legend: {orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},
+        series: [
+            {
+                name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'],
+                data: [{value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'}],
+                itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
+            }
+        ]
+    };
+
+    /**
+     * 今日用户访问来源图表
+     */
+    function initUserSourceTodayChart() {
+        var userSourceTodayChart = echarts.init($("#userSourceTodayChart")[0], "themez");
+        userSourceTodayChart.setOption(userSourceTodayChartOption);
+        okUtils.echartsResize([userSourceTodayChart]);
+    }
+
+    var userSourceWeekChartOption = {
+        title: {show: true, text: '本周用户访问来源'},
+        tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}},
+        legend: {data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},
+        toolbox: {show: false, feature: {saveAsImage: {}}},
+        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
+        xAxis: [{type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],
+        yAxis: [{type: 'value', splitLine: {show: false},}],
+        series: [
+            {name: '邮件营销', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210]},
+            {name: '联盟广告', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310]},
+            {name: '视频广告', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410]},
+            {name: '直接访问', type: 'line', stack: '总量', smooth: true, areaStyle: {normal: {}}, data: [320, 332, 301, 334, 390, 330, 320]},
+            {name: '搜索引擎', type: 'line', stack: '总量', smooth: true, label: {normal: {show: true, position: 'top'}}, areaStyle: {normal: {}}, data: [370, 932, 901, 934, 1290, 1330, 1320]}
+        ]
+    };
+
+    /**
+     * 本周用户访问来源图表
+     */
+    function initUserSourceWeekChart() {
+        var userSourceWeekChart = echarts.init($("#userSourceWeekChart")[0], "themez");
+        userSourceWeekChart.setOption(userSourceWeekChartOption);
+        okUtils.echartsResize([userSourceWeekChart]);
+    }
+
+    initMediaCont();
+    initDataTrendChart();
+    initUserActiveTodayChart();
+    initUserSourceTodayChart();
+    initUserSourceWeekChart();
 });
 
 

js/home2Data-del.js

@@ -0,0 +1,219 @@
+function randomData() {
+    return Math.round(Math.random() * 500);
+}
+
+function ecchartData(color) {
+    color = color || "#00c292";
+    return {
+        color: color,
+        toolbox: {
+            show: false,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '-1%',
+            right: '0',
+            bottom: '0',
+            top: '5px',
+            containLabel: false
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                splitLine: {
+                    show: false
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                splitLine: {
+                    show: false
+                },
+            }
+        ],
+        series: [
+            {
+                name: '用户',
+                type: 'line',
+                stack: '总量',
+                smooth: true,
+                symbol: "none",
+                clickable: false,
+                areaStyle: {},
+                data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
+            }
+        ]
+    }
+}
+
+var echOne = {
+    color: "#03a9f3",
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [{
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar'
+    }]
+};
+var echTwo = {
+    title: {
+        show: false,
+        text: '用户访问来源',
+        subtext: '纯属虚构',
+        x: 'center'
+    },
+    tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+    },
+    series: [
+        {
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+                {value: 335, name: '直接访问'},
+                {value: 310, name: '邮件营销'},
+                {value: 234, name: '联盟广告'},
+                {value: 135, name: '视频广告'},
+                {value: 1548, name: '搜索引擎'}
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }
+    ]
+};
+var mapThree = {
+    title: {
+        show: false,
+        text: '堆叠区域图xxxx'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross',
+            label: {
+                backgroundColor: '#6a7985'
+            }
+        }
+    },
+    legend: {
+        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+    },
+    toolbox: {
+        show: false,
+        feature: {
+            saveAsImage: {}
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+            splitLine: {//设置横线样式
+                show: false//隐藏横线
+            },
+        }
+    ],
+    series: [
+        {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name: '视频广告',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {},
+            data: [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            name: '直接访问',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            areaStyle: {normal: {}},
+            data: [320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name: '搜索引擎',
+            type: 'line',
+            stack: '总量',
+            smooth: true,//曲线线条
+            label: {
+                normal: {
+                    show: true,
+                    position: 'top'
+                }
+            },
+            areaStyle: {normal: {}},
+            data: [370, 932, 901, 934, 1290, 1330, 1320]
+        }
+    ]
+};
+
+layui.define(function (exports) {
+    var income = ecchartData("#00c292");
+    var goods = ecchartData("#ab8ce4");
+    var blogs = ecchartData("#03a9f3");
+    var user = ecchartData("#fb9678");
+
+    exports('home2Data', {
+        income: income,
+        goods: goods,
+        blogs: blogs,
+        user: user,
+        echOne: echOne,
+        echTwo: echTwo,
+        mapThree: mapThree,
+    });
+});
+
+

js/home2Data.js

@@ -1,219 +0,0 @@
-function randomData() {
-  return Math.round(Math.random() * 500);
-}
-
-function ecchartData(color) {
-  color = color || "#00c292";
-  return {
-    color:color,
-    toolbox: {
-      show: false,
-      feature: {
-        saveAsImage: {}
-      }
-    },
-    grid: {
-      left: '-1%',
-      right: '0',
-      bottom: '0',
-      top: '5px',
-      containLabel: false
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-        splitLine: {//设置竖线样式
-          show: false//隐藏竖线
-        },
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        splitLine: {//设置横线样式
-          show: false//隐藏横线
-        },
-      }
-    ],
-    series: [
-      {
-        name: '用户',
-        type: 'line',
-        stack: '总量',
-        smooth: true,//曲线线条
-        symbol: "none",//去掉小圆点
-        clickable: false,
-        areaStyle: {},
-        data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
-      }
-    ]
-  }
-}
-
-var echOne = {
-  color: "#03a9f3",
-  xAxis: {
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: [{
-    data: [120, 200, 150, 80, 70, 110, 130],
-    type: 'bar'
-  }]
-};
-var echTwo = {
-  title: {
-    show: false,
-    text: '用户访问来源',
-    subtext: '纯属虚构',
-    x: 'center'
-  },
-  tooltip: {
-    trigger: 'item',
-    formatter: "{a} <br/>{b} : {c} ({d}%)"
-  },
-  legend: {
-    orient: 'vertical',
-    left: 'left',
-    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
-  },
-  series: [
-    {
-      name: '访问来源',
-      type: 'pie',
-      radius: '55%',
-      center: ['50%', '60%'],
-      data: [
-        {value: 335, name: '直接访问'},
-        {value: 310, name: '邮件营销'},
-        {value: 234, name: '联盟广告'},
-        {value: 135, name: '视频广告'},
-        {value: 1548, name: '搜索引擎'}
-      ],
-      itemStyle: {
-        emphasis: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
-    }
-  ]
-};
-var mapThree = {
-  title: {
-    show: false,
-    text: '堆叠区域图'
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross',
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
-  },
-  toolbox: {
-    show: false,
-    feature: {
-      saveAsImage: {}
-    }
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: [
-    {
-      type: 'category',
-      boundaryGap: false,
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value',
-      splitLine: {//设置横线样式
-        show: false//隐藏横线
-      },
-    }
-  ],
-  series: [
-    {
-      name: '邮件营销',
-      type: 'line',
-      stack: '总量',
-      smooth: true,//曲线线条
-      areaStyle: {},
-      data: [120, 132, 101, 134, 90, 230, 210]
-    },
-    {
-      name: '联盟广告',
-      type: 'line',
-      stack: '总量',
-      smooth: true,//曲线线条
-      areaStyle: {},
-      data: [220, 182, 191, 234, 290, 330, 310]
-    },
-    {
-      name: '视频广告',
-      type: 'line',
-      stack: '总量',
-      smooth: true,//曲线线条
-      areaStyle: {},
-      data: [150, 232, 201, 154, 190, 330, 410]
-    },
-    {
-      name: '直接访问',
-      type: 'line',
-      stack: '总量',
-      smooth: true,//曲线线条
-      areaStyle: {normal: {}},
-      data: [320, 332, 301, 334, 390, 330, 320]
-    },
-    {
-      name: '搜索引擎',
-      type: 'line',
-      stack: '总量',
-      smooth: true,//曲线线条
-      label: {
-        normal: {
-          show: true,
-          position: 'top'
-        }
-      },
-      areaStyle: {normal: {}},
-      data: [370, 932, 901, 934, 1290, 1330, 1320]
-    }
-  ]
-};
-
-layui.define(function (exports) {
-  var income = ecchartData("#00c292");
-  var goods = ecchartData("#ab8ce4");
-  var blogs = ecchartData("#03a9f3");
-  var user = ecchartData("#fb9678");
-  
-  exports('home2Data', {
-    income:income,
-    goods:goods,
-    blogs:blogs,
-    user:user,
-    echOne:echOne,
-    echTwo:echTwo,
-    mapThree:mapThree,
-  });
-});
-
-

pages/console1.html

@@ -90,10 +90,10 @@
     <div class="layui-col-md8">
         <div class="layui-card">
             <div class="layui-card-header">
-                <div class="my-card-title">用户活跃量</div>
+                <div class="my-card-title">今日用户活跃量</div>
             </div>
             <div class="ok-card-body map-body">
-                <div style="height: 100%;" id="echOne"></div>
+                <div style="height: 100%;" id="userActiveTodayChart"></div>
             </div>
         </div>
     </div>
@@ -101,10 +101,10 @@
     <div class="layui-col-md4">
         <div class="layui-card">
             <div class="layui-card-header">
-                <div class="my-card-title">用户访问来源</div>
+                <div class="my-card-title">今日用户访问来源</div>
             </div>
             <div class="ok-card-body map-body">
-                <div style="height: 100%;" id="echTwo"></div>
+                <div style="height: 100%;" id="userSourceTodayChart"></div>
             </div>
         </div>
     </div>
@@ -114,7 +114,7 @@
     <div class="layui-col-md12">
         <div class="layui-card">
             <div class="ok-card-body clearfix">
-                <div class="map-china" id="mapThree"></div>
+                <div class="map-china" id="userSourceWeekChart"></div>
             </div>
         </div>
     </div>