{extend name="../../base/view/common/base" /} {block name="style"} <style type="text/css"> /* 这段样式只是用于演示 */ .layui-card-header span { position: absolute; right: 10px; top: 10px; } .layui-sales { margin-bottom: 0; overflow: hidden; color: rgba(0,0,0,.85); font-size: 30px; } .layui-sales-info { padding-top: 16px; color: rgba(0,0,0,.65); white-space: nowrap; text-overflow: ellipsis; } fieldset.layui-field-title { margin-bottom: 10px; } </style> {/block} <!-- 主体 --> {block name="body"} <div class="p-3"> <div class="layui-row layui-col-space15"> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">报销售额</div> <div class="layui-card-body"> <div class="layui-sales">¥ 126,560</div> <div class="layui-sales-info" style="height: 125px;"> 周同比 <span>12%</span> <i class="layui-edge layui-edge-top" style="border-bottom-color: green"></i> 日同比 <span>3%</span> <i class="layui-edge layui-edge-bottom" style="border-top-color: red"></i> <fieldset class="layui-elem-field layui-field-title"></fieldset> <div>日销报销 ¥12,423</div> </div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">发票总数 <span class="layui-badge layui-badge-blue pull-right">月</span></div> <div class="layui-card-body"> <div class="layui-sales">6,560</div> <div class="layui-sales-info" > <div id="zfbs" style="height: 80px;"></div> <fieldset class="layui-elem-field layui-field-title"></fieldset> <div>总发票数 1,234</div> </div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">访问量 <span class="layui-badge layui-badge-green pull-right">日</span></div> <div class="layui-card-body"> <div class="layui-sales">6,560</div> <div class="layui-sales-info" > <div id="fwl" style="height: 80px;"></div> <fieldset class="layui-elem-field layui-field-title" ></fieldset> <div>日访问量 1,234</div> </div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">业绩效果 <span class="layui-badge layui-badge-red pull-right">周</span></div> <div class="layui-card-body"> <div class="layui-sales">83%</div> <div class="layui-sales-info" > <div style="height: 80px;"> <div class="layui-progress layui-progress-big"> <div class="layui-progress-bar layui-bg-blue" lay-percent="83%" style="width: 83%;"></div> </div> </div> <fieldset class="layui-elem-field layui-field-title" style="position: relative;"></fieldset> <div>回款金额 ¥ 12,234</div> </div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md9"> <div class="layui-card"> <div class="layui-card-header">地域分布</div> <div class="layui-card-body"> <div id="map" style="height: 578px;"></div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card" > <div class="layui-card-header">在线人数</div> <div class="layui-card-body"> <div id="zxrs" style="height: 250px" ></div> </div> </div> </div> <div class="layui-col-xs6 layui-col-md3"> <div class="layui-card" > <div class="layui-card-header">浏览器分布</div> <div class="layui-card-body"> <div id="llq" style="height: 250px" ></div> </div> </div> </div> </div> </div> {/block} <!-- /主体 --> <!-- 脚本 --> {block name="script"} <script src="{__GOUGU__}/third_party/echart/echarts.min.js"></script> <script src="{__GOUGU__}/third_party/echart/china.js"></script> <script> const moduleInit = ['tool']; function gouguInit() { var form = layui.form,tool=layui.tool; } // 访问量 var fwlCharts = echarts.init(document.getElementById('fwl')); var fwlOptions = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, grid: { left: '-1%', right: '0', bottom: '0', top: '5px', containLabel: false }, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], show: false } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: '总量', type: 'line', stack: '总量', smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1890ff' }, { offset: 1, color: '#1890ff' }]) }, emphasis: { focus: 'series' }, data: [120, 132, 156, 200, 90, 100, 165] }, ] }; fwlCharts.setOption(fwlOptions); // 渲染表信息 var zfbsCharts = echarts.init(document.getElementById('zfbs')); var zfbsOptions = { color: ['#1890ff','#666'], tooltip: {}, grid: { left: '0', right: '20', bottom: '30', containLabel: true }, xAxis: { data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], show:false, }, yAxis: { show:false }, series: [{ type: 'bar', data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 500, 506], barMaxWidth: 45 }] } zfbsCharts.setOption(zfbsOptions); // 地图数据信息 function randomValue() { return Math.round(Math.random()*1000); } var mapCharts = echarts.init(document.getElementById('map')); var dataList=[ {name:"南海诸岛",value:0}, {name: '北京', value: randomValue()}, {name: '天津', value: randomValue()}, {name: '上海', value: randomValue()}, {name: '重庆', value: randomValue()}, {name: '河北', value: randomValue()}, {name: '河南', value: randomValue()}, {name: '云南', value: randomValue()}, {name: '辽宁', value: randomValue()}, {name: '黑龙江', value: randomValue()}, {name: '湖南', value: randomValue()}, {name: '安徽', value: randomValue()}, {name: '山东', value: randomValue()}, {name: '新疆', value: randomValue()}, {name: '江苏', value: randomValue()}, {name: '浙江', value: randomValue()}, {name: '江西', value: randomValue()}, {name: '湖北', value: randomValue()}, {name: '广西', value: randomValue()}, {name: '甘肃', value: randomValue()}, {name: '山西', value: randomValue()}, {name: '内蒙古', value: randomValue()}, {name: '陕西', value: randomValue()}, {name: '吉林', value: randomValue()}, {name: '福建', value: randomValue()}, {name: '贵州', value: randomValue()}, {name: '广东', value: randomValue()}, {name: '青海', value: randomValue()}, {name: '西藏', value: randomValue()}, {name: '四川', value: randomValue()}, {name: '宁夏', value: randomValue()}, {name: '海南', value: randomValue()}, {name: '台湾', value: randomValue()}, {name: '香港', value: randomValue()}, {name: '澳门', value: randomValue()} ] // 世界地图 var mapOption = { tooltip: { formatter:function(params,ticket, callback){ return params.seriesName+'<br />'+params.name+':'+params.value } }, visualMap: { min: 0, max: 1500, left: 'left', top: 'bottom', text: ['高','低'],//取值范围的文字 inRange: { color: ['#e0ffff', '#006edd']//取值范围的颜色 }, show: true//图注 }, geo: { map: 'china', roam: false, //不开启缩放和平移 zoom:1.23, //视角缩放比例 label: { normal: { show: true, fontSize:'10', color: 'rgba(0,0,0,0.7)' } }, itemStyle: { normal:{ borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ areaColor: '#F3B329',//鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }; mapCharts.setOption(mapOption); var myCharts = echarts.init(document.getElementById('zxrs')); var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500]; var option = { tooltip: { trigger: "axis" }, xAxis: [{ type: "category", boundaryGap: !1, data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"] }], yAxis: [{ type: "value" }], series: [{ name: "总量", type: "line", smooth: !0, itemStyle: { normal: { areaStyle: { type: "default" } } }, data: mData }] }; myCharts.setOption(option); // 动态改变图表1数据 setInterval(function () { for (var i = 0; i < mData.length; i++) { mData[i] += (Math.random() * 50 - 25); if (mData[i] < 0) { mData[i] = 0; } } myCharts.setOption({ series: [{ data: mData }] }); }, 1000); // 渲染浏览器分布 var llqCharts = echarts.init(document.getElementById('llq')); var llqOptions = { tooltip: { trigger: 'item' }, legend: { bottom: '1%', left: 'center', icon: 'circle', // 设置小圆点 itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 }, series: [ { name: '浏览器分布', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '14px', } }, labelLine: { show: false }, data: [ {value: 1048, name: 'Chrome'}, {value: 735, name: 'Safair'}, {value: 580, name: 'Firefox'}, {value: 484, name: 'Edge'}, {value: 300, name: 'IE'}, {value: 200, name: 'Other'}, ] } ] }; llqCharts.setOption(llqOptions); // 窗口大小改变事件 window.onresize = function () { myCharts.resize(); mapCharts.resize(); fwlCharts.resize(); zfbsCharts.resize(); llqCharts.resize(); }; </script> {/block} <!-- /脚本 -->