diff --git a/css/common.css b/css/common.css index 563f8b8..44a1161 100644 --- a/css/common.css +++ b/css/common.css @@ -1,6 +1,26 @@ [v-cloak]{ display: none!important; } + +/**card**/ +.ok-card-body{ + padding: 20px; + position: relative; + width: 100%; + box-sizing: border-box; +} +.ok-card-body-tb{ + padding: 20px 0; + position: relative; + width: 100%; + box-sizing: border-box; +} +.ok-card{ + -webkit-box-shadow: 0 0 20px rgba(0,0,0,.08); + box-shadow: 0 0 20px rgba(0,0,0,.08); + border-radius: 5px; +} + /**断行**/ .wp1{ word-break:break-all; }/*只对英文起作用，以字母作为换行依据*/ .wp2{ word-wrap:break-word; }/*--只对英文起作用，以单词作为换行依据*/ @@ -8,13 +28,20 @@ .wp4{white-space:nowrap; }/*强制不换行，都起作用*/ /**边距**/ +.p0{ + padding: 0!important; +} .ptb0{ padding-top: 0!important; padding-bottom: 0!important; } +.plr0{ + padding-left: 0!important; + padding-right: 0!important; +} .ptb20{ - padding-top: 20!important; - padding-bottom: 20!important; + padding-top: 20px!important; + padding-bottom: 20px!important; } .plr20{ padding-left: 20px!important; @@ -117,8 +144,20 @@ } - - +/*减去220是左侧的菜单宽度为220*/ + +@media screen and (max-width: 750px) {/*当屏幕宽度小于970-220时执行*/ + .ok-in-hide-md{ + display: none!important; + } +} + +@media screen and (max-width: 548px) {/*当屏幕宽度小于768-220时执行*/ + [ok-pc-in-show], + .ok-in-hide-xs { + display: none !important; + } +} diff --git a/css/home.css b/css/home.css index 26bd4c0..fd1594a 100644 --- a/css/home.css +++ b/css/home.css @@ -29,6 +29,7 @@ .cart-data .img-box{ display: inline-block; vertical-align: middle; + padding-right: 20px; } .cart-data .img-box img{ width: 60px; @@ -36,7 +37,6 @@ .cart-data .cart-r{ display: inline-block; vertical-align: middle; - padding-left: 20px; } .my-card-title{ diff --git a/css/home2.css b/css/home2.css new file mode 100644 index 0000000..933e49b --- /dev/null +++ b/css/home2.css @@ -0,0 +1,143 @@ +@import "./common.css"; +@import "../lib/layui/css/layui.css"; + +.data-body { + display: flex; + padding:20px; + padding-bottom: 0; + color:#333333; +} +.data-body .media-cont { + -ms-flex-align: center !important; + align-items: center !important; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.data-body .media-cont .tit{ + font-size: 16px; + padding-bottom:5px; +} +.data-body .media-cont .num{ + font-size: 24px; + line-height: 22px; +} +.data-body .w-img{ + width: 60px; + height: 60px; +} +.data-body .w-img img{ + width: 100%; + height: 100%; +} +.line-home-a{ + height: 60px; +} + + + + + + + + + + + + + + + +.cart-data .stat-text { + color: #455a64; + font-size: 24px; + padding-bottom: 5px; +} +.extra-small-font { + font-size: 12px; +} + +.cart-data .stat-heading { + color: #99abb4; +} + +.cart-data .img-box { + display: inline-block; + vertical-align: middle; +} + +.cart-data .img-box img { + width: 60px; +} + +.cart-data .cart-r { + display: inline-block; + vertical-align: middle; + padding-left: 20px; +} + +.my-card-title { + color: #212529; + font-size: 16px; + padding-bottom: 20px; + font-weight: bolder; +} + +/**图表样式**/ +.map-body { + height: 360px; +} + +.map-china { + height: 360px; +} + +/***进度条***/ +.progress-box { + margin-bottom: 20px; + display: flex; +} + +.progress-box .por-title { + font-weight: 600; + color: #868e96; + padding-bottom: 5px; +} + +.progress-box .por-txt { + font-size: 13px; + padding-bottom: 5px; +} + +.progress-box .pro-head { + width: 50px; + height: 50px; + line-height: 50px; + display: inline-block; + vertical-align: middle; + float: left; + overflow: hidden; + padding-right: 20px; +} + +.progress-box .pro-head img { + background: #BEA8AB; + width: 100%; + height: 100%; + border-radius: 100%; +} + +.progress-box .pro-data { + display: inline-block; + vertical-align: middle; + flex: 1; + /*float: left;*/ + /*width: 70%;*/ +} + +/**日历**/ +#calendar .layui-laydate { + border-radius: 5px; + border: 0; + -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .08); + box-shadow: 0 0 20px rgba(0, 0, 0, .08); +} diff --git a/data/navs.json b/data/navs.json index 4987f24..31c9aaa 100644 --- a/data/navs.json +++ b/data/navs.json @@ -1,6 +1,6 @@ [ { - "title": "后台首页", + "title": "主页一", "fontFamily": "ok-icon", "icon": "", "href": "pages/home.html", @@ -8,6 +8,13 @@ "spread": true, "isCheck": true }, + { + "title": "主页二", + "fontFamily": "layui-icon", + "icon": "layui-icon-home", + "href": "pages/home2.html", + "isClose": false + }, { "title": "字体图标", "icon": "", diff --git a/index.html b/index.html index d26a5e3..3058ccf 100644 --- a/index.html +++ b/index.html @@ -88,7 +88,7 @@
  • - 后台首页 + 主页一
    • @@ -118,7 +118,7 @@ diff --git a/js/home.js b/js/home.js index bf83dab..1dccd18 100644 --- a/js/home.js +++ b/js/home.js @@ -1,5 +1,5 @@ "use strict"; -var useModel = ["form", "table", "laytpl", "laydate", +var useModel = ["form", "okUtils", "table", "laytpl", "laydate", "element", "jquery", "countUp", "echartsData"];//需要引入的模块 layui.config({ base: "../js/" @@ -9,6 +9,7 @@ layui.config({ laydate = layui.laydate, element = layui.element, table = layui.table, + okUtils = layui.okUtils, $ = layui.jquery, laytpl = layui.laytpl; /**静态数据**/ @@ -29,6 +30,7 @@ layui.config({ /**图表**/ var mapTree = echarts.init($("#mapOne")[0], "mytheme"); var mapChina = echarts.init($('#mapChina')[0]); + okUtils.echartsResize(mapTree, mapChina); mapTree.setOption(echartsData.mapTree);//数据图 diff --git a/js/home2.js b/js/home2.js new file mode 100644 index 0000000..1786206 --- /dev/null +++ b/js/home2.js @@ -0,0 +1,57 @@ +"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(); + + function init() { + /**今日访问量**/ + var elem_nums = $(".media-cont .num"); + elem_nums.each(function (i, j) { + let ran = parseInt(Math.random() * 99 + 1); + !new countUp({ + target: j, + endVal: 20 * 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);//数据图 + + + } + +}); + + diff --git a/js/home2Data.js b/js/home2Data.js new file mode 100644 index 0000000..6af49af --- /dev/null +++ b/js/home2Data.js @@ -0,0 +1,219 @@ +function randomData() { + return Math.round(Math.random() * 500); +} + +function ecchartData(color) { + color = color || "#00c292"; + return { + 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, + goods, + blogs, + user, + echOne, + echTwo, + mapThree, + }); +}); + + diff --git a/lib/echarts/echarts.themez.js b/lib/echarts/echarts.themez.js new file mode 100644 index 0000000..59dc12c --- /dev/null +++ b/lib/echarts/echarts.themez.js @@ -0,0 +1,514 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('themez', { + "color": [ + "#00c292", + "#9a66e4", + "#03a9f3", + "#fb9678", + "#ed4014", + "#ab8ce4", + "#e46cbb" + ], + "backgroundColor": "rgba(0, 0, 0, 0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#333" + }, + "subtextStyle": { + "color": "#aaa" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#c23531", + "color0": "#314656", + "borderColor": "#c23531", + "borderColor0": "#314656", + "borderWidth": 1 + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false, + "color": [ + "#00c292", + "#ab8ce4", + "#03a9f3", + "#fb9678", + "#ed4014", + "#e46cbb", + "#9a66e4" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eee", + "borderColor": "#444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,215,0,0.8)", + "borderColor": "#444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eee", + "borderColor": "#444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,215,0,0.8)", + "borderColor": "#444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#333" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#293c55", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#293c55", + "borderWidth": 1 + }, + "emphasis": { + "color": "#a9334c" + } + }, + "controlStyle": { + "normal": { + "color": "#293c55", + "borderColor": "#293c55", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#293c55", + "borderColor": "#293c55", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#e43c59", + "borderColor": "rgba(194,53,49, 0.5)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#293c55" + } + }, + "emphasis": { + "textStyle": { + "color": "#293c55" + } + } + } + }, + "visualMap": { + "color": [ + "#bf444c", + "#d88273", + "#f6efa6" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(47,69,84,0)", + "dataBackgroundColor": "rgba(47,69,84,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } + }); +})); diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js index f8a243f..9fe4b3b 100644 --- a/lib/layui/lay/okmodules/okTab.js +++ b/lib/layui/lay/okmodules/okTab.js @@ -223,14 +223,18 @@ layui.define(["element", "jquery"], function (exports) { if (data.children != undefined && data.children.length > 0) { temp += ''; if (data.icon != undefined && data.icon != '') { - if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) { + if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){ + if (data.icon.indexOf("&#") >= 0) { + temp += ('{0}').format(data.icon); + }else{ + temp += ('').format(data.icon); + } + }else if (data.fontFamily) { if (data.icon.indexOf("&#") >= 0) { temp += ('{1}').format(data.fontFamily, data.icon); } else { temp += ('').format(data.fontFamily, data.icon); } - } else { - temp += ('{1}').format(data.icon, data.icon); } } temp += '' + data.title + ''; @@ -252,14 +256,18 @@ layui.define(["element", "jquery"], function (exports) { temp += ('').format(tabID, data.href, isClose); } if (data.icon != undefined && data.icon != '') { - if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) { + if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){ + if (data.icon.indexOf("&#") >= 0) { + temp += ('{0}').format(data.icon); + }else{ + temp += ('').format(data.icon); + } + }else if (data.fontFamily) { if (data.icon.indexOf("&#") >= 0) { temp += ('{1}').format(data.fontFamily, data.icon); } else { temp += ('').format(data.fontFamily, data.icon); } - } else { - temp += ('{1}').format(data.icon, data.icon); } } temp += ('{0}').format(data.title); diff --git a/lib/layui/lay/okmodules/okUtils.js b/lib/layui/lay/okmodules/okUtils.js index 9d0d3d0..eb7859f 100644 --- a/lib/layui/lay/okmodules/okUtils.js +++ b/lib/layui/lay/okmodules/okUtils.js @@ -1,8 +1,23 @@ layui.define(["jquery"], function (exprots) { var $ = layui.jquery; var okUtils = { - getBodyWidth:function () { + getBodyWidth: function () { return document.body.scrollWidth;//body的总宽度 + }, + echartsResize(...elemnt) { + /* + * 主要用于对echart视图自动适应宽度 + * elemnt:可变参数 + * eg: + * var mapTree = echarts.init($("#mapOne")[0], "mytheme"); + * var mapTree2 = echarts.init($("#mapOne")[0], "mytheme"); + * resize(mapTree,mapTree2); + * */ + window.addEventListener("resize", () => { + for (var i = 0; i < elemnt.length; i++) { + elemnt[i].resize(); + } + }); } }; exprots("okUtils", okUtils); diff --git a/pages/echarts/mapchina.html b/pages/echarts/mapchina.html index b83d9b9..96c607a 100644 --- a/pages/echarts/mapchina.html +++ b/pages/echarts/mapchina.html @@ -68,11 +68,13 @@ function clone(origin) { return JSON.parse(JSON.stringify(origin)) } + layui.config({ base: "../../js/" - }).use(["jquery", "mapTest", "echartsData"], function () { + }).use(["jquery", "okUtils", "mapTest", "echartsData"], function () { var $ = layui.jquery, mapTest = layui.mapTest, + okUtils = layui.okUtils, echartsData = layui.echartsData; echartsData.mapChina.series[0].data = echartsData.Address;//地图数据 @@ -87,7 +89,7 @@ var china_b = echarts.init($('#china_b')[0]); var china_c = echarts.init($('#china_c')[0]); var china_d = echarts.init($('#china_d')[0]); - + okUtils.echartsResize(china1, china_a, china_b, china_c, china_d); china1.setOption(chinaData); china_a.setOption(option_a); china_b.setOption(option_b); diff --git a/pages/echarts/mapchina2.html b/pages/echarts/mapchina2.html index b5b8c49..6b6febb 100644 --- a/pages/echarts/mapchina2.html +++ b/pages/echarts/mapchina2.html @@ -60,8 +60,9 @@ } layui.config({ base: "../../js/" - }).use(["jquery", "mapTest", "echartsData"], function () { + }).use(["jquery", "okUtils", "mapTest", "echartsData"], function () { var $ = layui.jquery, + okUtils = layui.okUtils, echartsData = layui.echartsData; var data = echartsData.Address;//地图数据 var chinaData = echartsData.mapChina2; @@ -83,6 +84,7 @@ let chinaTemp = JSON.parse(JSON.stringify(chinaData)); let china1 = echarts.init($('#china1')[0]); china1.setOption(chinaTemp); + okUtils.echartsResize(china1); } function china2() { @@ -90,12 +92,14 @@ chinaTemp.visualMap.show = false;//不显示数据条 let china1 = echarts.init($('#china2')[0]); china1.setOption(chinaTemp); + okUtils.echartsResize(china1); } function china3() { let chinaTemp = echartsData.mapChina3; let china1 = echarts.init($('#china3')[0]); china1.setOption(chinaTemp); + okUtils.echartsResize(china1); } function china4() { @@ -103,6 +107,7 @@ chinaTemp.visualMap.show = false;//不显示数据条 let china1 = echarts.init($('#china4')[0]); china1.setOption(chinaTemp); + okUtils.echartsResize(china1); } diff --git a/pages/home.html b/pages/home.html index 1414bce..7113295 100644 --- a/pages/home.html +++ b/pages/home.html @@ -21,7 +21,7 @@
    -
    +
    none
    @@ -35,7 +35,7 @@
    -
    +
    none
    @@ -49,7 +49,7 @@
    -
    +
    none
    @@ -63,7 +63,7 @@
    -
    +
    none
    diff --git a/pages/home2.html b/pages/home2.html new file mode 100644 index 0000000..457d698 --- /dev/null +++ b/pages/home2.html @@ -0,0 +1,145 @@ + + + + + ok-admin v2.0 | 很赞的后台模版 + + + + + + + + + + + + + +
    +
    +
    +
    +
    +
    +

    收入

    +
    0
    +
    +
    + 收入 +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    商品

    +
    0
    +
    +
    + 商品 +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    博客

    +
    0
    +
    +
    + 博客 +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    用户

    +
    0
    +
    +
    + 用户 +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    用户活跃量
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    用户访问来源
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +