数据yddatajson中存在多条id001 lNumber98553imageshttpsimg2baiducomitu=3853345508384760633&fm=253&fmt=auto&app=120&f=JPEGw=800&h=1200httpsimg0baiducomitu=16040106732427861166&fm=253&fmt=auto&app=138&f=JPEGw=50
在使用Layui框架设计统计看板的HTML页面中,可以按照以下步骤实现需求:
- 引入Layui框架的相关文件,包括CSS和JS文件。
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
- 创建一个容器用于展示统计看板。
<div id="dashboard" style="height: 500px;"></div>
- 使用JavaScript代码解析数据文件,并生成统计图表。
<script>
layui.use(['echarts', 'element'], function(){
var echarts = layui.echarts;
// 解析数据文件(假设数据存储在变量data中)
var data = [
// 数据项1
{
"id":"001",
"lNumber":"98553",
"images":["https://img2.baidu.com/it/u=3853345508,384760633&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200","https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889","https://pic.616pic.com/photoone/00/00/56/618ce8b3797b76152.jpg"],
"describe":"水果",
"date":"2023-7-31 13:7:17",
"id":"001",
"username":"12311",
"institution":"2134343"
},
// 数据项2
// ...
];
var dashboard = echarts.init(document.getElementById('dashboard'));
// 获取每日每个机构号提交的数据量
var dailyData = {};
data.forEach(function(item){
var date = item.date.split(' ')[0];
var institution = item.institution;
if(!dailyData[date]){
dailyData[date] = {};
}
if(!dailyData[date][institution]){
dailyData[date][institution] = 0;
}
dailyData[date][institution]++;
});
// 根据每日提交数据量生成日统计图表
var dailyChart = echarts.init(document.getElementById('dailyChart'));
var dailyOption = {
title: {
text: '每日提交数据量统计'
},
tooltip: {},
xAxis: {
type: 'category',
data: Object.keys(dailyData)
},
yAxis: {
type: 'value'
},
series: Object.keys(dailyData).map(function(date){
return {
name: date,
type: 'bar',
data: Object.keys(dailyData[date]).map(function(institution){
return dailyData[date][institution];
})
}
})
};
dailyChart.setOption(dailyOption);
// 获取每月每个机构号提交的数据量
var monthlyData = {};
data.forEach(function(item){
var month = item.date.split('-').slice(0, 2).join('-');
var institution = item.institution;
if(!monthlyData[month]){
monthlyData[month] = {};
}
if(!monthlyData[month][institution]){
monthlyData[month][institution] = 0;
}
monthlyData[month][institution]++;
});
// 根据每月提交数据量生成月报表图表
var monthlyChart = echarts.init(document.getElementById('monthlyChart'));
var monthlyOption = {
title: {
text: '每月提交数据量统计'
},
tooltip: {},
xAxis: {
type: 'category',
data: Object.keys(monthlyData)
},
yAxis: {
type: 'value'
},
series: Object.keys(monthlyData).map(function(month){
return {
name: month,
type: 'bar',
data: Object.keys(monthlyData[month]).map(function(institution){
return monthlyData[month][institution];
})
}
})
};
monthlyChart.setOption(monthlyOption);
// 获取提交频次最高的十个网点
var topInstitutions = Object.keys(dailyData).reduce(function(result, date){
var institutions = dailyData[date];
Object.keys(institutions).forEach(function(institution){
if(result[institution]){
result[institution] += institutions[institution];
}else{
result[institution] = institutions[institution];
}
});
return result;
}, {});
var sortedInstitutions = Object.keys(topInstitutions).sort(function(a, b){
return topInstitutions[b] - topInstitutions[a];
}).slice(0, 10);
// 构造附加比例图数据
var ratioData = sortedInstitutions.map(function(institution){
return {
name: institution,
value: topInstitutions[institution]
}
});
// 在整个json中提交频次最多的十个网点生成附加比例图
var ratioChart = echarts.init(document.getElementById('ratioChart'));
var ratioOption = {
title: {
text: '提交频次最多的十个网点统计'
},
tooltip: {},
series: [{
name: '比例',
type: 'pie',
radius: '55%',
data: ratioData
}]
};
ratioChart.setOption(ratioOption);
});
</script>
- 在HTML页面中添加图表容器。
<div id="dailyChart" style="height: 400px; margin-bottom: 20px;"></div>
<div id="monthlyChart" style="height: 400px; margin-bottom: 20px;"></div>
<div id="ratioChart" style="height: 400px;"></div>
通过以上步骤,可以在HTML页面中使用Layui框架设计一个统计看板,实现日统计和月报表功能,并展示提交频次最多的十个网点的附加比例图
原文地址: https://www.cveoy.top/t/topic/iHk3 著作权归作者所有。请勿转载和采集!