diff --git a/js/console.js b/js/console.js
index 5e88972..eb84d22 100644
--- a/js/console.js
+++ b/js/console.js
@@ -1,6 +1,5 @@
"use strict";
-var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "okMock"];
-layui.use(useModel, function () {
+layui.use(["okUtils", "table", "countUp", "okMock"], 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": {
- "trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}
- },
- "legend": {
- "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
- },
- "toolbox": {
- "feature": {"saveAsImage": {}}
- },
+ "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"}
- ],
+ "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]
- }
+ {"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]}
]
};
@@ -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": {
- "normal": {"textStyle": {"color": "#000"}},
- "emphasis": {
- "textStyle": {"color": "#000"}
- }
- }
+ "label": {"normal": {"textStyle": {"color": "#000"}}, "emphasis": {"textStyle": {"color": "#000"}}}
}
]
};
diff --git a/js/console1.js b/js/console1.js
index b3478fd..3c8ba18 100644
--- a/js/console1.js
+++ b/js/console1.js
@@ -1,53 +1,129 @@
"use strict";
-var useModel = ["form", "okUtils", "table", "laytpl", "laydate", "element", "jquery", "countUp", "home2Data"];//需要引入的模块
-layui.config({
- base: "../js/"
-}).use(useModel, function () {
- 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();
+layui.use(["okUtils", "countUp"], function () {
+ var countUp = layui.countUp;
+ var okUtils = layui.okUtils;
+ var $ = layui.jquery;
- 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}
{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();
});
diff --git a/js/home2Data-del.js b/js/home2Data-del.js
new file mode 100644
index 0000000..0d2e498
--- /dev/null
+++ b/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}
{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,
+ });
+});
+
+
diff --git a/js/home2Data.js b/js/home2Data.js
deleted file mode 100644
index feca93c..0000000
--- a/js/home2Data.js
+++ /dev/null
@@ -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}
{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,
- });
-});
-
-
diff --git a/pages/console1.html b/pages/console1.html
index 47e9ccb..8dc5dff 100644
--- a/pages/console1.html
+++ b/pages/console1.html
@@ -90,10 +90,10 @@
@@ -101,10 +101,10 @@
@@ -114,7 +114,7 @@