<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页三</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all"> <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> <link rel="stylesheet" href="../css/public.css" media="all"> <style> .top-panel { border: 1px solid #eceff9; border-radius: 5px; text-align: center; } .top-panel > .layui-card-body{ height: 60px; } .top-panel-number{ line-height:60px; font-size: 30px; border-right:1px solid #eceff9; } .top-panel-tips{ line-height:30px; font-size: 12px } </style> </head> <body> <!--<div class="layuimini-container">--> <div class="layuimini-main"> <div class="layui-row layui-col-space15"> <div class="layui-col-xs12 layui-col-md3"> <div class="layui-card top-panel"> <div class="layui-card-header">要展示的指标名称</div> <div class="layui-card-body"> <div class="layui-row layui-col-space5"> <div class="layui-col-xs9 layui-col-md9 top-panel-number"> 9,054,056 </div> <div class="layui-col-xs3 layui-col-md3 top-panel-tips"> 比昨天 <a style="color: #1aa094">▲0.12</a><br> 比七日 <a style="color: #bd3004">▼0.06</a> </div> </div> </div> </div> </div> <div class="layui-col-xs12 layui-col-md3"> <div class="layui-card top-panel"> <div class="layui-card-header">要展示的指标名称</div> <div class="layui-card-body"> <div class="layui-row layui-col-space5"> <div class="layui-col-xs9 layui-col-md9 top-panel-number"> 9,054,056 </div> <div class="layui-col-xs3 layui-col-md3 top-panel-tips"> 比昨天 <a style="color: #1aa094">▲0.12</a><br> 比七日 <a style="color: #bd3004">▼0.06</a> </div> </div> </div> </div> </div> <div class="layui-col-xs12 layui-col-md3"> <div class="layui-card top-panel"> <div class="layui-card-header">要展示的指标名称</div> <div class="layui-card-body"> <div class="layui-row layui-col-space5"> <div class="layui-col-xs9 layui-col-md9 top-panel-number"> 9,054,056 </div> <div class="layui-col-xs3 layui-col-md3 top-panel-tips"> 比昨天 <a style="color: #1aa094">▲0.12</a><br> 比七日 <a style="color: #bd3004">▼0.06</a> </div> </div> </div> </div> </div> <div class="layui-col-xs12 layui-col-md3"> <div class="layui-card top-panel"> <div class="layui-card-header">要展示的指标名称</div> <div class="layui-card-body"> <div class="layui-row layui-col-space5"> <div class="layui-col-xs9 layui-col-md9 top-panel-number"> 9,054,056 </div> <div class="layui-col-xs3 layui-col-md3 top-panel-tips"> 比昨天 <a style="color: #1aa094">▲0.12</a><br> 比七日 <a style="color: #bd3004">▼0.06</a> </div> </div> </div> </div> </div> </div> <div class="layui-row layui-col-space15"> <div class="layui-col-xs12 layui-col-md9"> <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> </div> <div class="layui-col-xs12 layui-col-md3"> <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div> </div> </div> <div class="layui-row layui-col-space15"> <div class="layui-col-xs12 layui-col-md6"> <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> </div> <div class="layui-col-xs12 layui-col-md6"> <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div> </div> </div> </div> <!--</div>--> <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script> <script> layui.use(['layer', 'echarts'], function () { var $ = layui.jquery, layer = layui.layer, echarts = layui.echarts; /** * 报表功能 */ var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); var optionRecords = { title: { text: '指标名称-报表图' }, 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' } ], series: [ { name: '邮件营销', type: 'line', stack: '总量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', 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: {}, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; echartsRecords.setOption(optionRecords); /** * 玫瑰图表 */ var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); var optionPies = { title: { text: '指标名称-玫瑰图', left: '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%'], roseType: 'radius', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 368, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; echartsPies.setOption(optionPies); /** * 柱状图 */ var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); var optionDataset = { legend: {}, tooltip: {}, dataset: { dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, xAxis: {type: 'category'}, yAxis: {}, // Declare several bar series, each will be mapped // to a column of dataset.source by default. series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }; echartsDataset.setOption(optionDataset); /** * 中国地图 */ var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); var optionMap = { legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: '{b}: {@2012} ({d}%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; echartsMap.setOption(optionMap); // echarts 窗口缩放自适应 window.onresize = function () { echartsRecords.resize(); } }); </script> </body> </html>