疫情数据分析与展示--小程序版

源码下载：疫情数据分析与展示–小程序版源码下载
最近闲着无聊，来研究下小程序。
将疫情数据使用小程序来做展示，
本人菜鸟一枚，只做学习，望大佬批评指正。
1、找到疫情数据接口，以腾讯提供的接口为例。
打开腾讯疫情数据实时更新,按f12找到以下页面：

2、对图中http请求进行分析，找到获取新冠病毒数据信息的链接，
经过检查分析发现如下链接：
3、访问次链接得到数据如下：

发现数据有点乱，可以找Json解析软件整理下格式。
4、接下来就是将数据解析，获取有用信息，渲染到小程序页面，
先看下效果图：

小程序 index.wxml代码：



  
  
  
    全球疫情数据
    更新时间截止：{{foreignData.globalStatis.lastUpdateTime}}
    
      
 累计确诊
 {{foreignData.globalStatis./confirm/i}}
 较昨日
   {{foreignData.globalStatis./confirm/iAdd}}
 
      
      
 累计死亡
 {{foreignData.globalStatis.dead}}
 较昨日
   {{foreignData.globalStatis.deadAdd}}
 
      
      
 累计治愈
 {{foreignData.globalStatis.heal}}
 较昨日
   {{foreignData.globalStatis.healAdd}}
 
      
      
 现存确诊
 {{foreignData.globalStatis.now/confirm/i}}
 较昨日
   {{foreignData.globalStatis.now/confirm/iAdd}}
 
      
    
  
  
  
  
    
      
 日增加确诊病例Top10
 
   {{item.nation}}
   
   {{item.add/confirm/i+' 人'}}
 
 
      
      
 周增加确诊病例Top10
 
   {{item.nation}}
   
   {{(item.rate)+' %'}}
 
 
      
    
  
  
  
  
    各大洲确诊人数一览表
    
      
 截止日期
 
   亚洲
   欧洲
   北美洲
   大洋洲
   其它

 
 现存确诊人数
      
      
 
   {{item.date}}
   
     {{item}}
     {{item}}
     {{item}}
     {{item}}
     {{item}}
   
   {{item.now/confirm/i}}
 
 
   {{item.date}}
   
     {{item}}
     {{item}}
     {{item}}
     {{item}}
     {{item}}
   
   {{item.now/confirm/i}}


index.wxcss代码：


page {
  padding: 0;
  margin: 0;
}

.head {
  width: 94%;
  background-color: #00b26a;
  border-radius: 18rpx;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
}

.head .title {
  width: 100%;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 35rpx;
  margin-top: 10rpx;
}

.head .updateTime {
  width: 100%;
  height: 40rpx;
  font-size: 25rpx;
  line-height: 40rpx;
  margin-left: 10rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
  border-left: solid yellow 6rpx;
  padding-left: 5rpx;
}

.head .globalStatis {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.head .globalStatis ./confirm/i, .head .globalStatis .dead,
.head .globalStatis .heal, .head .globalStatis .now/confirm/i {
  width: 24%;
  height: 110rpx;
  border-radius: 5rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  opacity: 0.7;
  margin-bottom: 25rpx;
}

.head .globalStatis ./confirm/i .text, .head .globalStatis .dead .text,
.head .globalStatis .heal .text, .head .globalStatis .now/confirm/i .text {
  font-size: 25rpx;
  margin-top: 5rpx;
}

.head .globalStatis ./confirm/i .add, .head .globalStatis .dead .add,
.head .globalStatis .heal .add, .head .globalStatis .now/confirm/i .add {
  font-size: 22rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 5rpx;
}

.head .globalStatis ./confirm/i .num, .head .globalStatis .dead .num,
.head .globalStatis .heal .num, .head .globalStatis .now/confirm/i .num {
  font-size: 25rpx;
  font-weight: bold;
}

.head .globalStatis ./confirm/i {
  background-color: rgb(255, 240, 241);
  margin-left: 5rpx;
}

.head .globalStatis .dead {
  background-color: rgb(242, 246, 247);
}

.head .globalStatis .heal {
  background-color: rgb(240, 248, 244);
}

.head .globalStatis .now/confirm/i {
  background-color: rgb(255, 240, 241);
  margin-right: 5rpx;
}

.head .globalStatis ./confirm/i .num, .head .globalStatis ./confirm/i .add-num,
.head .globalStatis .now/confirm/i .num, .head .globalStatis .now/confirm/i .add-num {
  color: red;
}

.head .globalStatis .heal .num, .head .globalStatis .heal .add-num {
  color: rgb(0, 178, 106);
}

.countryAdd/confirm/iRankList {
  width: 94%;
  height: 480rpx;
  margin-left: 3%;
  background-color: rgb(240, 240, 240);
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  border-radius: 12rpx;
  
}

.countryAdd/confirm/iRankList swiper{
  width: 100%;
  height: 100%;
}

.countryAdd/confirm/iRankList .title {
  width: 100%;
  height: 60rpx;
  text-align: left;
  line-height: 60rpx;
  font-size: 35rpx;
  margin-top: 10rpx;
  border-left: solid 10rpx yellow;
  padding-left: 5rpx;
}

.countryAdd/confirm/iRankList .countryList {
  width: 100%;
  margin-top: 5rpx;
  display: flex;
  flex-direction: row;
  font-size: 25rpx;
}

.countryAdd/confirm/iRankList .countryList .nation {
  width: 150rpx;
  margin-right: 10rpx;
  text-align: right;
}

.countryAdd/confirm/iRankList .countryList .rank {
  background-color: red;
}

.countryAdd/confirm/iRankList .countryList .add/confirm/i {
  width: 150rpx;
  margin-left: 10rpx;
}

.continentStatis {
  width: 94%;
  margin-left: 3%;
  background-color: rgb(240, 240, 240);
  margin-top: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 12rpx;
  height: 500rpx;
}

.continentStatis scroll-view {
  height: 400rpx;
  width: auto;
  overflow: hidden;
}

.continentStatis .title {
  width: 100%;
  height: 60rpx;
  text-align: left;
  line-height: 60rpx;
  font-size: 35rpx;
  margin-top: 10rpx;
  border-left: solid 10rpx yellow;
  padding-left: 5rpx;
}

.continentStatis .first {
  display: block;
  font-size: 30rpx;
}

.continentStatis .first .lastData {
  width: 150rpx;
  display: inline-block;
  text-align: center;
}

.continentStatis .first .zhou {
  display: inline-block;
}

.continentStatis .first .zhou .zh{
  width: 200rpx;
  display: inline-block;
  text-align: center;
}

.continentStatis .first .zongji {
  width: 200rpx;
  display: inline-block;
  text-align: center;
}


.continentStatis .first .bg{
  width: 100%;
}

index.js 代码：
//index.js

var wxCharts = require('../../utils/wxcharts.js');

Page({

  
  data: {
    foreignData:{},
    countryListLength: 0,
    nation: 0,
    add/confirm/i: 0,
    num: 0,
    rateSum:0.0
   
  },

  
  onLoad: function (options) {
   // this.chinaMessage();
    this.foreignMessage();
    
   
  },

  //中国
  chinaMessage(){
    var that=this;
    wx.request({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
      method: 'GET',
      dataType: 'json',
      success: function (res) {
// console.log(res)   //json字符串转Json对象
 that.setData({
   eare: JSON.parse(res.data.data)
 });
 console.log(that.data.eare)
      }
    })
  },

//国外
  foreignMessage() {
    var that=this;
    wx.request({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
      method: 'GET',
      dataType: 'json',
      success: function (res) {
 that.setData({
   foreignData: JSON.parse(res.data.data)
 });
 console.log(that.data.foreignData.continentStatis[0].statis.亚洲)
 that.countryAdd/confirm/iRankList_fun()
      }
    })
  },

  countryAdd/confirm/iRankList_fun(){
    console.log(this.data.foreignData)
    var num1=0;
    var num2=0.0;
    for (var i = 0; i < this.data.foreignData.countryAdd/confirm/iRankList.length;i++){
      num1 += this.data.foreignData.countryAdd/confirm/iRankList[i].add/confirm/i;
    }
    for (var i = 0; i < this.data.foreignData.country/confirm/iWeekCompareRankList.length; i++) {
      num2 += this.data.foreignData.country/confirm/iWeekCompareRankList[i].rate*1.0;
    }
    
    this.setData({
      num:num1
    })
    this.setData({
      rateSum: num2
    })

    var query = wx.createSelectorQuery();
    var that = this;
    query.selectAll('.countryAddConfirmRankList .countryList').boundingClientRect(function (rect) {
      that.setData({
 countryListLength: rect[0].width
      })
    }).exec();
    query.selectAll(' .countryList .nation').boundingClientRect(function (rect) {
      that.setData({
 nation: rect[0].width
      })
    }).exec();
    query.selectAll(' .countryList .add/confirm/i').boundingClientRect(function (rect) {
      that.setData({
 add/confirm/i: rect[0].width
      })
    }).exec();
    
  }
})



源码下载：疫情数据分析与展示–小程序版源码下载

疫情数据分析与展示--小程序版

CSS教程相关栏目本月热门文章