疫情數據分析與展現--小程序版

時間  2020-07-10
標籤 疫情 數據 分析 展現 程序 简体版
原文   原文鏈接

最近閒着無聊，來研究下小程序。
將疫情數據使用小程序來作展現，
本人菜鳥一枚，只作學習，望大佬批評指正。
一、找到疫情數據接口，以騰訊提供的接口爲例。
打開騰訊疫情數據實時更新,按f12找到如下頁面：
在這裏插入圖片描述
二、對圖中http請求進行分析，找到獲取新冠病毒數據信息的連接，
通過檢查分析發現以下連接：
在這裏插入圖片描述三、訪問次連接獲得數據以下：
在這裏插入圖片描述
發現數據有點亂，能夠找Json解析軟件整理下格式。
四、接下來就是將數據解析，獲取有用信息，渲染到小程序頁面，
先看下效果圖：
在這裏插入圖片描述
小程序 index.wxml代碼：css

<!--index.wxml-->
<view class="container">
  <!--頭部開始-->
  <!--<image src="../../images/5.png" mode="widthFix"></image> -->
  <view class="head">
    <view class="title">全球疫情數據</view>
    <view class="updateTime">更新時間截止：{{foreignData.globalStatis.lastUpdateTime}}</view>
    <view class="globalStatis">
      <view class="confirm">
        <view class="text">累計確診</view>
        <view class="confirmNum num">{{foreignData.globalStatis.confirm}}</view>
        <view class="add">較昨日
          <view class="add-num">{{foreignData.globalStatis.confirmAdd}}</view>
        </view>
      </view>
      <view class="dead">
        <view class="text">累計死亡</view>
        <view class="deadNum num">{{foreignData.globalStatis.dead}}</view>
        <view class="add">較昨日
          <view class="add-num">{{foreignData.globalStatis.deadAdd}}</view>
        </view>
      </view>
      <view class="heal">
        <view class="text">累計治癒</view>
        <view class="healNum num">{{foreignData.globalStatis.heal}}</view>
        <view class="add">較昨日
          <view class="add-num">{{foreignData.globalStatis.healAdd}}</view>
        </view>
      </view>
      <view class="nowConfirm">
        <view class="text">現存確診</view>
        <view class="nowConfirmNum num">{{foreignData.globalStatis.nowConfirm}}</view>
        <view class="add">較昨日
          <view class="add-num">{{foreignData.globalStatis.nowConfirmAdd}}</view>
        </view>
      </view>
    </view>
  </view>
  <!--頭部結束-->
  <!--確證病例增長等級列表開始-->
  <view class="countryAddConfirmRankList">
    <swiper indicator-dots autoplay circular>
      <swiper-item>
        <view class="title">日增長確診病例Top10</view>
        <view class="countryList" wx:for="{{foreignData.countryAddConfirmRankList}}" wx:key="{{item.nation}}">
          <view class="nation">{{item.nation}}</view>
          <view class="rank" style="width:{{(item.addConfirm/num)*(countryListLength-nation-addConfirm)*3.5+'px'}}"></view>
          <view class="addConfirm">{{item.addConfirm+' 人'}}</view>
        </view>
        <view style="height:20rpx;"></view>
      </swiper-item>
      <swiper-item>
        <view class="title">周增長確診病例Top10</view>
        <view class="countryList" wx:for="{{foreignData.countryConfirmWeekCompareRankList}}" wx:key="{{item.nation}}">
          <view class="nation">{{item.nation}}</view>
          <view class="rank" style="width:{{(item.rate/rateSum)*(countryListLength-nation-addConfirm)*5.0+'px'}}"></view>
          <view class="addConfirm">{{(item.rate)+' %'}}</view>
        </view>
        <view style="height:20rpx;"></view>
      </swiper-item>
    </swiper>
  </view>
  <!--確證病例增長等級列表結束-->
  <!--continentStatis開始-->
  <view class="continentStatis">
    <view class="title">各大洲確診人數一覽表</view>
    <scroll-view scroll-x scroll-y>
      <view class="first">
        <view class="lastData">截止日期</view>
        <view class="zhou">
          <view class="yazhou zh">亞洲</view>
          <view class="ouzhou zh">歐洲</view>
          <view class="beimeizhou zh">北美洲</view>
          <view class="dayangzhou zh">大洋洲</view>
          <view class="qitazhou zh">其它</view>

        </view>
        <view class="zongji">現存確診人數</view>
      </view>
      <view class="first" wx:for="{{foreignData.continentStatis}}" wx:key="{{index}}">
        <view class="bg" wx:if="{{index%2==0}}">
          <view class="lastData" style="">{{item.date}}</view>
          <view style="" class="zhou" wx:for="{{item.statis}}" wx:key="{{index}}" wx:for-index="key">
            <view wx:if="{{key==='亞洲'}}" class="yazhou zh">{{item}}</view>
            <view wx:if="{{key==='歐洲'}}" class="ouzhou zh">{{item}}</view>
            <view wx:if="{{key==='北美洲'}}" class="beimeizhou zh">{{item}}</view>
            <view wx:if="{{key==='大洋洲'}}" class="dayangzhou zh">{{item}}</view>
            <view wx:if="{{key==='其餘'}}" class="qitazhou zh">{{item}}</view>
          </view>
          <view style="" class="zongji">{{item.nowConfirm}}</view>
        </view>
        <view wx:else class="bg">
          <view style="background-color: rgb(358, 128, 99);" class="lastData">{{item.date}}</view>
          <view style="background-color: rgb(358, 128, 99);" class="zhou" wx:for="{{item.statis}}" wx:key="{{index}}" wx:for-index="key">
            <view wx:if="{{key==='亞洲'}}" class="yazhou zh">{{item}}</view>
            <view wx:if="{{key==='歐洲'}}" class="ouzhou zh">{{item}}</view>
            <view wx:if="{{key==='北美洲'}}" class="beimeizhou zh">{{item}}</view>
            <view wx:if="{{key==='大洋洲'}}" class="dayangzhou zh">{{item}}</view>
            <view wx:if="{{key==='其餘'}}" class="qitazhou zh">{{item}}</view>
          </view>
          <view style="background-color: rgb(358, 128, 99);" class="zongji">{{item.nowConfirm}}</view>
        </view>
      </view>

    </scroll-view>
  </view>

  <!--continentStatis結束-->
</view>

index.wxcss代碼：html

/**index.wxss**/

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, .head .globalStatis .dead,
.head .globalStatis .heal, .head .globalStatis .nowConfirm {
  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 .text, .head .globalStatis .dead .text,
.head .globalStatis .heal .text, .head .globalStatis .nowConfirm .text {
  font-size: 25rpx;
  margin-top: 5rpx;
}

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

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

.head .globalStatis .confirm {
  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 .nowConfirm {
  background-color: rgb(255, 240, 241);
  margin-right: 5rpx;
}

.head .globalStatis .confirm .num, .head .globalStatis .confirm .add-num,
.head .globalStatis .nowConfirm .num, .head .globalStatis .nowConfirm .add-num {
  color: red;
}

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

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

.countryAddConfirmRankList swiper{
  width: 100%;
  height: 100%;
}

.countryAddConfirmRankList .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;
}

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

.countryAddConfirmRankList .countryList .nation {
  width: 150rpx;
  margin-right: 10rpx;
  text-align: right;
}

.countryAddConfirmRankList .countryList .rank {
  background-color: red;
}

.countryAddConfirmRankList .countryList .addConfirm {
  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 代碼：json

//index.js

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

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    foreignData:{},
    countryListLength: 0,
    nation: 0,
    addConfirm: 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.countryAddConfirmRankList_fun()
      }
    })
  },

  countryAddConfirmRankList_fun(){
    console.log(this.data.foreignData)
    var num1=0;
    var num2=0.0;
    for (var i = 0; i < this.data.foreignData.countryAddConfirmRankList.length;i++){
      num1 += this.data.foreignData.countryAddConfirmRankList[i].addConfirm;
    }
    for (var i = 0; i < this.data.foreignData.countryConfirmWeekCompareRankList.length; i++) {
      num2 += this.data.foreignData.countryConfirmWeekCompareRankList[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 .addConfirm').boundingClientRect(function (rect) {
      that.setData({
        addConfirm: rect[0].width
      })
    }).exec();
    
  }
})

五、附上演示連接：（關注公衆號：C you again 私信我申請查看哦）
掃描二位查看
六、推薦本身在運營的公衆號：C you again
有興趣的能夠加下，與小編一塊兒學習，
在這裏插入圖片描述小程序

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程