基于Layui的机构号数据统计看板设计与实现
<p>///'<link rel=///'stylesheet///' href=///'https://cdn.staticfile.org/layui/2.5.6/css/layui.css///'>//n<script src=///'https://cdn.staticfile.org/layui/2.5.6/layui.js///'></script>//n///'//n///'<div class=///'layui-container///'>//n <div class=///'layui-row///'>//n <div class=///'layui-col-md12///'>//n <div class=///'layui-card///'>//n <div class=///'layui-card-header///'>日统计</div>//n <div class=///'layui-card-body///'>//n <table class=///'layui-table///'>//n <thead>//n <tr>//n <th>机构号</th>//n <th>提交数据数量</th>//n </tr>//n </thead>//n <tbody id=///'dailyTable///'></tbody>//n </table>//n </div>//n </div>//n </div>//n </div>//n <div class=///'layui-row///'>//n <div class=///'layui-col-md12///'>//n <div class=///'layui-card///'>//n <div class=///'layui-card-header///'>月报表</div>//n <div class=///'layui-card-body///'>//n <table class=///'layui-table///'>//n <thead>//n <tr>//n <th>机构号</th>//n <th>提交数据数量</th>//n </tr>//n </thead>//n <tbody id=///'monthlyTable///'></tbody>//n </table>//n </div>//n </div>//n </div>//n </div>//n <div class=///'layui-row///'>//n <div class=///'layui-col-md12///'>//n <div class=///'layui-card///'>//n <div class=///'layui-card-header///'>提交频次最高的十个网点</div>//n <div class=///'layui-card-body///'>//n <table class=///'layui-table///'>//n <thead>//n <tr>//n <th>机构号</th>//n <th>提交数据数量</th>//n </tr>//n </thead>//n <tbody id=///'topTenTable///'></tbody>//n </table>//n <div id=///'chartContainer///' style=///'width: 600px; height: 400px;///'></div>//n </div>//n </div>//n </div>//n </div>//n</div>//n///'//n///'<script>//n// 读取JSON数据//n$.getJSON(///'yddata.json///', function(data) {//n // 获取当前日期和月份//n var currentDate = new Date();//n var currentYear = currentDate.getFullYear();//n var currentMonth = currentDate.getMonth() + 1;//n //n // 过滤出今天和本月的数据//n var todayData = data.filter(function(item) {//n return item.date === currentDate.toISOString().split(//'T//')[0];//n });//n var currentMonthData = data.filter(function(item) {//n var itemDate = new Date(item.date);//n return itemDate.getFullYear() === currentYear && itemDate.getMonth() + 1 === currentMonth;//n });//n //n // 统计每日每个机构号的提交数量//n var dailyCounts = {};//n todayData.forEach(function(item) {//n if (dailyCounts[item.orgId]) {//n dailyCounts[item.orgId]++;//n } else {//n dailyCounts[item.orgId] = 1;//n }//n });//n //n // 统计每月每个机构号的提交数量//n var monthlyCounts = {};//n currentMonthData.forEach(function(item) {//n if (monthlyCounts[item.orgId]) {//n monthlyCounts[item.orgId]++;//n } else {//n monthlyCounts[item.orgId] = 1;//n }//n });//n //n // 排序并获取提交频次最高的十个网点//n var topTenData = Object.keys(monthlyCounts).sort(function(a, b) {//n return monthlyCounts[b] - monthlyCounts[a];//n }).slice(0, 10).map(function(orgId) {//n return {//n orgId: orgId,//n count: monthlyCounts[orgId]//n };//n });//n //n // 生成日统计表格//n var dailyTableHtml = ///'/';//n Object.keys(dailyCounts).forEach(function(orgId) {//n dailyTableHtml += ///'<tr><td>///' + orgId + ///'</td><td>///' + dailyCounts[orgId] + ///'</td></tr>///';//n });//n $(///'#dailyTable///').html(dailyTableHtml);//n //n // 生成月报表表格//n var monthlyTableHtml = ///'/';//n Object.keys(monthlyCounts).forEach(function(orgId) {//n monthlyTableHtml += ///'<tr><td>///' + orgId + ///'</td><td>///' + monthlyCounts[orgId] + ///'</td></tr>///';//n });//n $(///'#monthlyTable///').html(monthlyTableHtml);//n //n // 生成提交频次最高的十个网点表格//n var topTenTableHtml = ///'/';//n topTenData.forEach(function(item) {//n topTenTableHtml += ///'<tr><td>///' + item.orgId + ///'</td><td>///' + item.count + ///'</td></tr>///';//n });//n $(///'#topTenTable///').html(topTenTableHtml);//n //n // 生成附加比例图//n var chartData = topTenData.map(function(item) {//n return {//n name: item.orgId,//n value: item.count//n };//n });//n var chart = echarts.init(document.getElementById(///'chartContainer///'));//n var option = {//n title: {//n text: ///'提交频次最高的十个网点///',//n subtext: ///'数据来源：月报表///'//n },//n tooltip: {//n trigger: ///'item///',//n formatter: ///'{a} <br/>{b} : {c} ({d}%)///'//n },//n legend: {//n orient: ///'vertical///',//n left: ///'left///',//n data: chartData.map(function(item) {//n return item.name;//n })//n },//n series: [//n {//n name: ///'提交数量///',//n type: ///'pie///',//n radius: ///'55%///', 'center': [///'50%///', '60%///'],//n data: chartData,//n emphasis: {//n itemStyle: {//n shadowBlur: 10,//n shadowOffsetX: 0,//n shadowColor: ///'rgba(0, 0, 0, 0.5)///'//n }//n }//n }//n ]//n };//n chart.setOption(option);//n});//n///'//n///'<script>//nlayui.use([//'element//'], function() {//n var element = layui.element;//n});//n</script>//n///</p>
原文地址: https://www.cveoy.top/t/topic/qnQp 著作权归作者所有。请勿转载和采集!