疫情数据分析与展示--小程序版
时间:2022-07-25
本文章向大家介绍疫情数据分析与展示--小程序版,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近闲着无聊,来研究下小程序。 将疫情数据使用小程序来做展示, 本人菜鸟一枚,只做学习,望大佬批评指正。 1、找到疫情数据接口,以腾讯提供的接口为例。 打开腾讯疫情数据实时更新,按f12找到以下页面:
2、对图中http请求进行分析,找到获取新冠病毒数据信息的链接, 经过检查分析发现如下链接:
3、访问次链接得到数据如下:
发现数据有点乱,可以找Json解析软件整理下格式。 4、接下来就是将数据解析,获取有用信息,渲染到小程序页面, 先看下效果图:
小程序 index.wxml代码:
<!--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代码:
/**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 代码:
//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();
}
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法