微信小程序开发学习之2019-nCoV数据信息可视化显示

于 2020-06-08 20:39:19 发布
阅读量881 收藏 2
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_39271486/article/details/105295870
版权

开始自己的微信小程序开发学习之旅，并记录自己的学习过程。下面主要是结合网上提供的2019-nCoV信息实现的一些功能。有四个页面展示，分别为首页、统计、数据、地图。

1首页

通过网上提供的接口https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5,获取2019-nCoV数据的信息，并展示到首页界面。
在这里插入图片描述

首页界面设计

<view>
  <text>统计截至{{time}}</text>
</view>

<view class="container">
  <view class="one">
     <text class="text1" style="text-align: center">较上日<text class="text0">+{{add}}</text></text>
     <text class="text2" style="text-align: center">{{conf}}</text>
     <text class="text3" style="text-align: center">累计确诊</text>

  </view>
  <view class="two">
   
      <text class="text20" style="text-align: center">较上日<text class="text21">+{{add1}}</text></text>
      <text class="text22" style="text-align: center">{{heal}}</text>
      <text class="text23" style="text-align: center">累计治愈</text>
   
  </view>
  <view class="three">
    
      <text class="text30" style="text-align: center">较上日<text class="text31">+{{add2}}</text></text>
      <text class="text32" style="text-align: center">{{dead}}</text>
      <text class="text33" style="text-align: center">累计死亡</text>
    
  </view>

</view>

<view class="content">
   <view class="four"> 
      <text class="text40" style="text-align: center">较上日<text class="text41">{{add3}}</text></text>
      <text class="text42" style="text-align: center">{{nowconfirm}}</text>
      <text class="text43" style="text-align: center">现有确诊</text>
   </view>
   <view class="five"> 
      <text class="text50" style="text-align: center">较上日<text class="text51">{{add4}}</text></text>
      <text class="text52" style="text-align: center">{{nowconfirm1}}</text>
      <text class="text53" style="text-align: center">现有重症</text>
   </view>
   <view class="six"> 
      <text class="text60" style="text-align: center">较上日<text class="text61">+{{add5}}</text></text>
      <text class="text62" style="text-align: center">{{nowconfirm2}}</text>
      <text class="text63" style="text-align: center">境外输入</text>
   </view>


</view>

样式设计

.container{
  display: flex;
  flex-direction: row;

}
.content{
   display: flex;
  flex-direction: row;
}
.one{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100px;
  background-color: #fdf1f1;
  justify-content: center;

}
.text1{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text2{
color: #cc1e1e;
font-size: 8vw;
font-weight: 500;
}
.text3{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}
.text0{
  color: #cc1e1e
}
.two{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #f1f8f4;
  height: 100px;
  justify-content: center;

}
.text20{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text21{
  color: #178b50
}
.text22{
  color: #178b50;
  font-weight: 500;
  font-size: 8vw;
}
.text23{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}
.three{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #f3f6f8;
  height: 100px;
  justify-content: center;

}
.text30{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text31{
 color: #4e5a65;

}
.text32{
  font-weight: 500;
  font-size: 8vw;
  color:  #4e5a65;
}
.text33{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}
.four{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fdf1f1;
  height: 100px;
  justify-content: center;

}
.text40{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text41{
 color:#f23a3b;

}
.text42{
  font-weight: 500;
  font-size: 8vw;
  color:#f23a3b;
}
.text43{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}
.five{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color:#faf2f6;
  height: 100px;
  justify-content: center;

}
.text50{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text51{
 color:#ca3f81;

}
.text52{
  font-weight:500;
  font-size: 8vw;
  color:#ca3f81;
}
.text53{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}
.six{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fcf4f0;
  height: 100px;
  justify-content: center;

}
.text60{
  color: #7c7c7c;
  font-size: 2.66vw;
}
.text61{
 color:#f05926;

}
.text62{
  font-weight:500;
  font-size: 8vw;
  color:#f05926;
}
.text63{
  font-size: 3.2vw;
  color: #222;
  font-weight: 500;
}

显示信息功能实现

Page({

  /**
   * 页面的初始数据
   */
  data: {
    add:"",
    conf:"",
    add1:"",
    heal:"",
    add2:"",
    dead:"",
    add3:'',
    add4:'',
    add5:'',
    nowconfirm:'',
    nowconfirm1:'',
    nowconfirm2:'',
    time:'',


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    //访问接口，获取病例信息
    wx.request({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
      data:{
        x:'',
        y:''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        wx.showToast({
          title:"加载中...",
          duration:2000,
        });
        console.log(res.data.data);
        var json = JSON.parse(res.data.data);
        console.log(json);
        console.log(json.chinaTotal);
        console.log(json.chinaAdd);
        console.log(json.chinaTotal["confirm"]);
        that.setData({ conf: json.chinaTotal["confirm"]});
        that.setData({ add: json.chinaAdd["confirm"] });
        that.setData({ heal: json.chinaTotal["heal"] });
        that.setData({ add1: json.chinaAdd["heal"] });
        that.setData({ dead: json.chinaTotal["dead"] });
        that.setData({ add2: json.chinaAdd["dead"] });
        that.setData({ add3: json.chinaAdd["nowConfirm"]});
        that.setData({ add4: json.chinaAdd["nowSevere"] });
        that.setData({ add5: json.chinaAdd["importedCase"] });
        that.setData({ nowconfirm: json.chinaTotal["nowConfirm"] });
        that.setData({ nowconfirm1: json.chinaTotal["nowSevere"] });
        that.setData({ nowconfirm2: json.chinaTotal["importedCase"] });
        that.setData({ time: json.lastUpdateTime});
        wx.hideToast()
      }
    })  
  }
})

2统计页面

主要是对全国各省数据信息的展示，如下所示：在这里插入图片描述

界面设计

<view>
   <text class="ys">中国疫情</text>
</view>
<view class="title">
    <view class="j1">
       <text  class="T1">地区</text>
    </view>
    <view class="j1">
       <text class="T1">现有确诊</text>
    </view >
    <view class="j1">
       <text class="T1" >累计确诊</text>
    </view>
    <view class="j1">
       <text class="T1">治愈</text>
    </view>
    <view class="j1">
       <text class="T1">死亡</text>
    </view>

</view>
<view class="title1">
   
  <view class="one">
    <text class="tx" wx:for="{{name}}">{{item}}</text>
  </view >
  <view class="one">
    <text class="tx" wx:for="{{nowConfirm}}">{{item}}</text>
  </view>
  <view  class="one">
    <text class="tx" wx:for="{{confirm}}">{{item}}</text>
  </view>
  <view  class="one">
    <text class="tx" wx:for="{{heal}}">{{item}}</text>
  </view>
  <view  class="one">
    <text class="tx" wx:for="{{dead}}">{{item}}</text>
  </view>

</view>

WXSS样式

.ys{
  display: inline-block;
  font-size: 20px;
  
}
.title{
   display: flex;
   flex-direction: row;


}

.j1{
  display: flex;
  flex: 1;
  justify-content: center;
  text-align: center;
}


.title1{
  display: flex;
  flex-direction: row;

}
.one{
  display: flex;
  flex-direction: column;
  flex: 1;
  
  justify-content: center;

}
.T1{
  text-align: center;
  justify-content: center;
  
  
}

.tx{
  display: flex;
  flex: 1;
  text-align: center;
   flex-direction:column;
}

数据显示功能实现

var NM=[];
var ncon=[];
var con=[];
var hl=[];
var dd=[]; 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:'',
    nowConfirm: '',
    confirm: '',
    heal: '',
    dead: '',

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res){
        
        console.log(res.data.data)
        var js = JSON.parse(res.data.data)
        console.log(js.areaTree[0].children)
        for (var i = 0; i < js.areaTree[0].children.length;i++)
        {
          NM[i] = js.areaTree[0].children[i].name
          //nowConfirm=js.areaTree[i].total.nowConfirm
          //that.setData({ name: NM[i] })
          ncon[i]=js.areaTree[0].children[i].total.nowConfirm
          con[i] = js.areaTree[0].children[i].total.confirm
          hl[i] = js.areaTree[0].children[i].total.heal
          dd[i] = js.areaTree[0].children[i].total.dead      
        }
       
          that.setData({ 
            name: NM,
            nowConfirm:ncon,
            confirm:con,
            heal:hl,
            dead:dd
             })
        

        //that.setData({name:NM})
      }

    })

  }
})

3数据页面

将数据信息以曲线的形式可视化表达，主要是通过在微信小程序中引入Echart绘制。

在这里插入图片描述

界面及样式设计

<view class="container">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

样式设计

ec-canvas{
  width: 100%;
  height: 100%;
  
}
.container{
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-top: 70px;

}

功能实现

import * as echarts from '../../ec-canvas/echarts';
const app=getApp();
var confirm = new Array;

var daytime=new Array;
var suspect=new Array;
var heal=new Array;
var dead=new Array;
var severe=new Array;

function setOption(chart ,x_time,y,z,m,n){
  const option={
     title: {
       
      },
      legend: { 
        show:true,
        data: ['确诊病例','疑似病例','治愈病例','死亡病例']
         },
     
      xAxis: { 
        type: 'category', 
        data: x_time,      //时间参数 
    
         }, 
          
       yAxis: {    
                 
          type: 'value', 
          
            },     
             
              series: [{
                    name:'确诊病例',
                    data: y,       
                    type: 'line', 
                    label:{normal:{
                      show:true
                    }},       
                       
                             
                   itemStyle: {          
                           normal:{
                             color:'#FF0000',
                             lineStyle:{
                               color: '#FF0000'
                                       }
                            
                                   }      
                                 }   
                             },
                    {
                      name: '疑似病例',
                      data: z,
                      type: 'line',
                      label: {
                        normal: {
                          show: true
                        }
                      },  
                      itemStyle: {
                        normal: {
                          color: '#00FF00',
                          lineStyle: {
                            color: '#00FF00'
                          }

                        }
                      }
                    },
                    {
                      name: '治愈病例',
                      data: m,
                      type: 'line',
                      label: {
                        normal: {
                          show: true
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: '#ca3f81',
                          lineStyle: {
                            color: '#ca3f81'
                          }

                        }
                      }
                    } ,
                    {
                      name: '死亡病例',
                      data: n,
                      type: 'line',
                      label: {
                        normal: {
                          show: true
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: '#7c7c7c',
                          lineStyle: {
                            color: '#7c7c7c'
                          }
                        }
                      }
                    }
                             ]   
                         };   
             chart.setOption(option)
}

Page({
  onShareAppMessage:function(res){
    return {
      
    }
  },

  /**
   * 页面的初始数据
   */
  data: {
    info:'123',
    list:[],
    ec:{
      lazyLoad: true 
    },
    timer:''

    

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this=this;
    this.getOption();
    this.setData({
      timer: setInterval(function () {
        _this.getOption();
      },600000)
    })
  },
 
  getOption:function(){
   
    var that=this;
    //访问接口
    wx.request({
      url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
      data:{
        
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'GET',
      dataType: 'json',
      success(res){
        console.log(res.data.data)
        for (var i = 0; i<res.data.data.chinaDayList.length;i++)
        {
        //console.log(res.data.data.chinaDayList[i].total)
         
         //confirm = res.data.data.chinaDayList[i].total.confirm;
          confirm[i] = res.data.data.chinaDayList[i].total.confirm;
          suspect[i] = res.data.data.chinaDayList[i].total.suspect;
          heal[i] = res.data.data.chinaDayList[i].total.heal;
          dead[i]=res.data.data.chinaDayList[i].total.dead;
          severe[i] = res.data.data.chinaDayList[i].total.severe;
          

         daytime[i]=res.data.data.chinaDayList[i].date
         //console.log(confirm)
         //console.log( typeof (confirm))
         
        }
        console.log(confirm)
        console.log(daytime)
        that.init_one(daytime,confirm,suspect,heal,dead)
      }
      })
    

  },
  init_one:function(x_time,y,z,m,n){
    this.oneComponent.init((canvas,width,height)=>{
      const chart=echarts.init(canvas,null,{
        width: width,
        height: height
      });
      setOption(chart, x_time,y,z,m,n)
      this.chart=chart;
      return chart;
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.oneComponent = this.selectComponent('#mychart-dom-line')
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.data.timer)
    
  }

})

4地图页面

该页面主要是通过经纬度信息在地图上标注各个省或直辖市，当点击标注点时，显示该省或直辖市的数据信息。信息太多，就以标注北京市数据为例。
在这里插入图片描述

界面设计

<map class="ditu" show-location="true" scale="4" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="mk">
</map>

.ditu{
  height: 100vh;
  width: 100%;
}

2功能实现

const app = getApp();
var ncon='';
var con = '';
var hl = '';
var dd = '';
Page({

  /**
   * 页面的初始数据
   */
  
  data: {
    //116.404008,39.914209
    longitude: [],
    latitude:[],
    markers:[],
   
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
       wx.request({
         url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
         data:{
           x:'',
           y:''
         },
         header: {
           'content-type': 'application/json' // 默认值
         },
         success(res)
         {
           var js = JSON.parse(res.data.data)
           console.log(js.areaTree[0].children[4])
           console.log(js.areaTree[0].children[4].total.nowConfirm)
           ncon = js.areaTree[0].children[4].total.nowConfirm
           con = js.areaTree[0].children[4].total.confirm
           hl = js.areaTree[0].children[4].total.heal
           dd = js.areaTree[0].children[4].total.dead
          
          
           
         }
       
         
       })
        
       
        var markers=new Array()
        var name="**市"
        var lat = 39.914209
        var log = 116.404008
        var info={
          iconPath:"/images/icon_marka.png",
          longitude:'',
          latitude:'',
          width:25,
          height:30,
          title:"",

        }
        info.id=0
        info.latitude=lat
        info.longitude=log
        info.title=name
        markers.push(info)
        
        console.log(markers);
        that.setData({
          latitude:info.latitude,
          longitude:info.longitude,
          markers:markers
        })
  },

 mk:function(){
   
   
   wx.showModal({
     title: '**市新冠状肺炎信息',
     content: '累计确诊:'+con+'；'+'现有确诊:'+ncon+'；'+'治愈病例:'+hl+'；'+'死亡病例:'+'；'+dd,
     showCancel: false,

   })
 },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值