From 35030f000f5257048fd45837f60ad002837c0a98 Mon Sep 17 00:00:00 2001 From: bobi Date: Sun, 25 Aug 2019 01:44:22 +0800 Subject: [PATCH] =?UTF-8?q?del:=E6=8A=BD=E7=A6=BBconsole.html=20chart=20da?= =?UTF-8?q?ta?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/console.js | 60 +++--------- js/console1.js | 156 +++++++++++++++++++++++-------- js/home2Data-del.js | 219 ++++++++++++++++++++++++++++++++++++++++++++ js/home2Data.js | 219 -------------------------------------------- pages/console1.html | 10 +- 5 files changed, 352 insertions(+), 312 deletions(-) create mode 100644 js/home2Data-del.js delete mode 100644 js/home2Data.js 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 @@
-
+