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

开始自己的微信小程序开发学习之旅，并记录自己的学习过程。下面主要是结合网上提供的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

样式设计

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

显示信息功能实现

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()
      }
    })  
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

数据显示功能实现

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})
      }

    })

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

3数据页面

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

界面及样式设计

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

样式设计

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;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

功能实现

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)
    
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

4地图页面

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

界面设计

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

.ditu{
  height: 100vh;
  width: 100%;
}
1
2
3
4
5
6
7

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138