在使用Layui框架设计统计看板的HTML页面中,可以按照以下步骤实现需求:

  1. 引入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>
  1. 创建一个容器用于展示统计看板。
<div id="dashboard" style="height: 500px;"></div>
  1. 使用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>
  1. 在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框架设计一个统计看板,实现日统计和月报表功能,并展示提交频次最多的十个网点的附加比例图

数据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

原文地址: https://www.cveoy.top/t/topic/iHk3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录