devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flask+Vue前后端分离疫情可视化系统

作者：很楠不爱3 | 2024-03-06 01:25:30

赞

踩

flask+vue前后端分离疫情可视化系统

一、引言

在2020年初爆发的新型冠状病毒，是一种传染力极强的病毒。患者在感染了新型冠状病毒后，即使在潜伏期也很容易传染其他人，该病毒会导致人呼吸困难，严重的可能会导致死亡。时至今日，疫情仍未完全褪去，新冠疫情仍是全世界人民最关注的话题之一，特别是有些国家仍处于爆发期。因此，疫情的实时数据以及相关新闻报导受到了极大的关注。本系统利用数据爬虫技术，完成疫情数据以及疫苗接种数据的爬取经数据处理后形成数据集。利用数据可视化技术，对数据集进行可视化，实现疫情情况与疫苗接种情况的实时更新。帮助民众充分了解最新疫情数据、近期疫情发展趋势以及疫苗接种情况。

Flask 框架是一个轻量级的、便捷的、Python 所提供的 Web 框架，它更加的灵活、轻便、安全且容易上手，是目前主流的服务器框架，非常适合全队的分工 协作式开发，对一个小型团队而言，大大提升了开发的效率。利用 Flask框架，实现前后端的数据交互，其对应的前端 JinJa2的模板引擎，也极大地方便了前端的数据调用。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。   与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

 本系统则采用后端Flask+前端Vue的开发模型进行开发。

二、现有技术研究

目前，比较成熟的疫情数据可视化平台有：网易可视化平台、腾讯疫情数据可视化平台、 百度疫情数据可视化平台。这三家数据可视化平台内容分析，如图1所示。

 现有技术的实现均是通过对大量的疫情数据进行 爬取、数据处理，利用可视化技术进行数据的可视化。 本系统集全国疫情数据于一个页面中，让用户可以更直观的观察到疫情信息。并且，本系统在疫情分布图上做出创新，在全国疫情分布图中点击各省份，直接可查看当前省份的疫情数据。用户可以由全国疫情分布图直接进入各省份疫情分布图，了解各省份的疫情分布。

三、系统架构和实现流程

 四、系统运行流程

 五、数据爬取与处理（网易接口）

键

说明

ChinaTotal

中国疫情总数据

Today

今日疫情数据

Total

总计疫情数据

Confirm

确证人数

Suspect

疑似病例

Heal

康复人数

Dead

死亡人数

Input

境外输入人数

NoSymptom

无症状感染者人数

IncrNosymptom

无症状感染者较昨日增加人数

curedCount

治愈总人数

curedIncr

较昨日治愈增长人数

六、部分代码展示

  • 后端（三个接口）：

  1. from flask import Flask,jsonify
  2. import requests,json,time
  3. app=Flask(__name__)
  4. @app.route('/overall')
  5. def get_data_overall():
  6.     now = time.localtime()
  7.     nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
  8.     headers = {
  9.         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
  10.         'referer': 'https://news.qq.com/',
  11.     }
  12.     url='https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
  13.     res=requests.get(url=url,headers=headers).json()
  14.     if res:
  15.         json_overall={
  16.             "success":True,
  17.             "code": 200,
  18.             "message": "操作成功",
  19.             "data":{
  20.                 "confirmedCount": res.get('data').get('chinaTotal').get('total').get('confirm'),
  21.                 "confirmedIncr": res.get('data').get('chinaTotal').get('today').get('confirm'),
  22.                 "curedCount": res.get('data').get('chinaTotal').get('total').get('heal'),
  23.                 "curedIncr": res.get('data').get('chinaTotal').get('today').get('heal'),
  24.                 "currentConfirmedCount": res.get('data').get('chinaTotal').get('total').get('confirm')- res.get('data').get('chinaTotal').get('total').get('dead')-res.get('data').get('chinaTotal').get('total').get('heal'),
  25.                 "currentConfirmedIncr": res.get('data').get('chinaTotal').get('today').get('storeConfirm'),
  26.                 "deadCount": res.get('data').get('chinaTotal').get('total').get('dead'),
  27.                 "deadIncr": 0,
  28.                 "importedCount": res.get('data').get('chinaTotal').get('total').get('input'),
  29.                 "importedIncr": res.get('data').get('chinaTotal').get('today').get('input'),
  30.                 "noInFectCount": res.get('data').get('chinaTotal').get('extData').get('noSymptom'),
  31.                 "noInFectIncr": res.get('data').get('chinaTotal').get('extData').get('incrNoSymptom'),
  32.                 "suspectIncr": 0,
  33.                 "suspectCount": res.get('data').get('chinaTotal').get('total').get('suspect'),
  34.                 "updateTime": nowt,
  35.                 "curedRate": 92.7,
  36.                 "deadRate": 4.69
  37.             }
  38.         }
  39.         with open('data/covid19-overall.json','w') as f:
  40.             json.dump(json_overall,f)
  41.             print("json_overall文件加载完成！")
  42.     return json_overall
  43. @app.route('/daily')
  44. def get_daily():
  45.     now = time.localtime()
  46.     nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
  47.     today=time.strftime("%Y-%m-%d")
  48.  
  49.     headers = {
  50.         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
  51.         'referer': 'https://news.qq.com/',
  52.     }
  53.     url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
  54.     res = requests.get(url=url, headers=headers).json()
  55.     importedIncrList=[]
  56.     curedCountList=[]
  57.     confirmedCountList=[]
  58.     importedCountList=[]
  59.     currentConfirmedIncrList=[]
  60.     noInFectCountList=[]
  61.     currentConfirmedCountList=[]
  62.     for i in res.get('data').get('chinaDayList'):
  63.         importedIncrList.append([i.get('date'),i.get('today').get('input')])
  64.         curedCountList.append([i.get('date'),i.get('today').get('confirm')])
  65.         confirmedCountList.append([i.get('date'),i.get('total').get('confirm')])
  66.         importedCountList.append([i.get('date'),i.get('total').get('input')])
  67.         currentConfirmedIncrList.append([i.get('date'),i.get('total').get('heal')])
  68.     # 无症状
  69.     noInFectCountList.append([today,res.get('data').get('chinaTotal').get('extData').get('noSymptom')])
  70.     if res:
  71.         json_daily={
  72.             "success":True,
  73.             "code": 200,
  74.             "message": "操作成功",
  75.             "data": {
  76.                 # 境外输入
  77.                 "importedIncrList": importedIncrList,
  78.                 # 现有确诊
  79.                 "curedCountList": curedCountList,
  80.  
  81.                 "confirmedCountList":confirmedCountList ,
  82.                 "currentConfirmedIncrList": currentConfirmedIncrList,
  83.                 "importedCountList": importedCountList,
  84.                 # 无症状
  85.                 "noInFectCountList":noInFectCountList ,
  86.                 "currentConfirmedCountList":currentConfirmedCountList
  87.             }
  88.         }
  89.         with open('data/covid19-daily-list.json','w') as f:
  90.             json.dump(json_daily,f)
  91.             print("json_daily文件加载完成！")
  92.     return json_daily
  93. @app.route('/province')
  94. def get_province():
  95.     now = time.localtime()
  96.     nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
  97.     today = time.strftime("%Y-%m-%d")
  98.     headers = {
  99.         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
  100.         'referer': 'https://news.qq.com/',
  101.     }
  102.     url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
  103.     res = requests.get(url=url, headers=headers).json()
  104.     data=[]
  105.     province=res.get('data').get('areaTree')[2].get('children')
  106.     for i in province:
  107.         if i.get('total').get('dead')==0:
  108.             province_dict = {
  109.                 "confirmedCount": i.get('total').get('confirm'),
  110.                 "countryLabel": "中国",
  111.                 "countryName": "China",
  112.                 "curedCount": i.get('today').get('heal'),
  113.                 "curedRate": i.get('today').get('heal') / i.get('total').get('heal'),
  114.                 "currentConfirmedCount": i.get('today').get('confirm'),
  115.                 "deadCount": i.get('today').get('dead'),
  116.                 "deadRate": 0 ,
  117.                 "provinceLabel": i.get('name'),
  118.                 "provinceName": None,
  119.                 "suspectCount": 0,
  120.                 "todayConfirmedCount": 0,
  121.                 "updateTime": None
  122.             }
  123.         else:
  124.             province_dict = {
  125.                 "confirmedCount": i.get('total').get('confirm'),
  126.                 "countryLabel": "中国",
  127.                 "countryName": "China",
  128.                 "curedCount": i.get('today').get('heal'),
  129.                 "curedRate": i.get('today').get('heal') / i.get('total').get('heal'),
  130.                 "currentConfirmedCount": i.get('today').get('confirm'),
  131.                 "deadCount": i.get('today').get('dead')/i.get('total').get('dead'),
  132.                 "deadRate": 0,
  133.                 "provinceLabel": i.get('name'),
  134.                 "provinceName": None,
  135.                 "suspectCount": 0,
  136.                 "todayConfirmedCount": 0,
  137.                 "updateTime": None
  138.             }
  139.         data.append(province_dict)
  140.     if res:
  141.         json_province={
  142.             "success": True,
  143.             "code": 200,
  144.             "message": "操作成功",
  145.             "data":data
  146.         }
  147.         with open('data/covid19-province.json', 'w') as f:
  148.             json.dump(json_province, f)
  149.             print("json_province文件加载完成！")
  150.     return json_province
  151. if __name__ == '__main__':
  152.     get_daily()
  153.     get_province()
  154.     get_data_overall()
  155.     app.run(port=8080)
  156. #前后端分离 首先启动后端 爬取当日的数据 由于腾讯接口使用的人比较多 所以我们这次选取的是网易接口
  157.  
  158. #然后启动前端 npm run dev 因为采用的vue

  •  前端（引用蓝伟洪先生​​​​​​​模板）

    1. <template>
    2.   <div class="container">
    3.     <!-- 顶部 -->
    4.     <div class="top-header">
    5.       <div class="title">
    6.         <h1>{{ title }}</h1>
    7.         <div class="top-header-tip">
    8.           <div class="sub-title">此数据为实时真实数据，数据来源：网易新闻</div>
    9.           <div class="last-update-time">
    10.             更新时间：{{ basicData.updateTime }}
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </div>
    15.     <div class="main-content">
    16.       <el-row>
    17.         <el-col :span="18">
    18.           <!-- 中间信息开始 -->
    19.           <div class="statistics-content">
    20.             <!-- 中间左侧开始 -->
    21.             <div class="main-inner">
    22.               <el-row>
    23.                 <el-col :span="7">
    24.                   <chart-card
    25.                     title="累计排名（TOP 10）"
    26.                     :customClass="`chart-item-bottom-sep`"
    27.                   >
    28.                     <province-ranking-bar-chart
    29.                       ref="topConfirmedCountRankChart"
    30.                       :data="top10ProvinceData"
    31.                       style="width: 100%; height: 380px"
    32.                     />
    33.                   </chart-card>
    34.                   <!-- 占比 -->
    35.                   <chart-card
    36.                     title="占比"
    37.                     :customClass="`chart-item-bottom-sep`"
    38.                   >
    39.                     <basic-proportion-chart
    40.                       ref="basicProportionChart"
    41.                       :data="basicData"
    42.                       style="width: 100%; height: 120px"
    43.                     />
    44.                   </chart-card>
    45.                   <chart-card title="最近一周累计治愈">
    46.                     <current-confirmed-compare-bar-chart
    47.                       ref="confirmSingleBarChart"
    48.                       :data="confirmSingleBarChartData"
    49.                       style="width: 100%; height: 310px"
    50.                     />
    51.                   </chart-card>
    52.                 </el-col>
    53.                 <el-col :span="17">
    54.                   <!-- 顶部基本统计信息开始 -->
    55.                   <div class="basic-header flex">
    56.                     <!-- 顶部统计信息开始 -->
    57.                     <div class="top-basic-info">
    58.                       <basic-data-item-label
    59.                         label="现有确诊"
    60.                         :config="defaultDataConfig.currentConfirmedCount"
    61.                         :inCrValue="basicData.currentConfirmedIncr"
    62.                       />
    63.                       <basic-data-item-label
    64.                         label="累计确诊"
    65.                         :config="defaultDataConfig.confirmedCount"
    66.                         :inCrValue="basicData.confirmedIncr"
    67.                       />
    68.                       <!-- 境外输入 -->
    69.                       <basic-data-item-label
    70.                         label="境外输入"
    71.                         :config="defaultDataConfig.importedCount"
    72.                         :inCrValue="basicData.importedIncr"
    73.                       />
    74.                       <!-- 无症状感染者 -->
    75.                       <basic-data-item-label
    76.                         label="无症状感染者"
    77.                         :config="defaultDataConfig.noInFectCount"
    78.                         :inCrValue="basicData.noInFectIncr"
    79.                       />
    80.                       <!-- 累计治愈 -->
    81.                       <basic-data-item-label
    82.                         label="累计治愈"
    83.                         :config="defaultDataConfig.curedCount"
    84.                         :inCrValue="basicData.curedIncr"
    85.                       />
    86.                       <!-- 死亡人数 -->
    87. <!--                      <basic-data-item-label-->
    88. <!--                        label="累计死亡"-->
    89. <!--                        :config="defaultDataConfig.deadCount"-->
    90. <!--                        :inCrValue="basicData.deadIncr"-->
    91. <!--                      />-->
    92.                     </div>
    93.                     <!-- 顶部统计信息结束 -->
    94.                   </div>
    95.                   <!-- 顶部基本统计信息开始 -->
    96.                   <div class="main-inner-map-wraper">
    97.                     <!-- 地图 -->
    98.                     <div class="map">
    99.                       <data-map
    100.                         ref="dataMap"
    101.                         title=""
    102.                         :list="mapDataList"
    103.                         style="width: 100%; height: 100%"
    104.                       />
    105.                     </div>
    106.                   </div>
    107.                 </el-col>
    108.               </el-row>
    109.             </div>
    110.             <!-- 中间左侧结束 -->
    111.           </div>
    112.           <!-- 中间信息结束 -->
    113.         </el-col>
    114.         <el-col :span="6">
    115.           <!-- 右侧区域开始 -->
    116.           <div class="main-right">
    117.             <!-- 治愈率和死亡率 -->
    118.             <chart-card
    119.               title="治愈率和死亡率"
    120.               :innerClass="`cure-and-dead-rate-chart`"
    121.               :customClass="`chart-item-bottom-sep`"
    122.             >
    123.               <cured-and-dead-rate-chart
    124.                 ref="cureRateChart"
    125.                 :data="rate"
    126.                 title="治愈率"
    127.                 style="width: 280px; height: 130px"
    128.               />
    129.             </chart-card>
    130.             <chart-card title="新增趋势" :customClass="`chart-item-bottom-sep`">
    131.               <basic-trend-chart
    132.                 :data="basicIncrTrendData"
    133.                 ref="confirmedCountTrendChart"
    134.                 style="width: 100%; height: 320px"
    135.               />
    136.             </chart-card>
    137.             <chart-card title="">
    138.               <div slot="title" class="province-table-title flex">
    139.                 各省累计确诊
    140.                 <el-link
    141.                   icon="el-icon-view"
    142.                   style="color: #bcbcbf; padding-left: 10px"
    143.                   :underline="false"
    144.                   @click="provinceTableDialogShowHandler"
    145.                   >详情</el-link
    146.                 >
    147.               </div>
    148.                <dv-scroll-board
    149.                   :config="provinceConfirmedCountBoardConfig"
    150.                   style="width: 100%; height: 360px"
    151.                 />
    152.             </chart-card>
    153.           </div>
    154.           <!-- 右侧区域结束 -->
    155.         </el-col>
    156.       </el-row>
    157.     </div>
    158.     <!-- 其他页面 -->
    159.     <div class="province-data-table-wrapper">
    160.       <el-dialog
    161.         :visible.sync="provinceTableDialogVisible"
    162.         width="50%"
    163.         :before-close="provinceTableDialogClose"
    164.       >
    165.         <div slot="title" class="province-data-modal-title">
    166.           <p>各省数据表</p>
    167.           <span class="province-data-modal-update-time"
    168.             >（更新时间：{{ basicData.updateTime }}）</span
    169.           >
    170.         </div>
    171.         <div class="area-data-table-wrapper">
    172.           <el-table
    173.             class="area-data-table"
    174.             :data="provinceDataList"
    175.             style="width: 100%"
    176.           >
    177.             <el-table-column prop="provinceLabel" align="center" label="省份">
    178.             </el-table-column>
    179.             <el-table-column
    180.               prop="confirmedCount"
    181.               align="center"
    182.               label="累计确诊"
    183.             >
    184.             </el-table-column>
    185.             <el-table-column
    186.               prop="currentConfirmedCount"
    187.               align="center"
    188.               label="现有确诊"
    189.             >
    190.             </el-table-column>
    191.             <el-table-column prop="curedCount" align="center" label="累计治愈">
    192.             </el-table-column>
    193.             <el-table-column prop="deadCount" align="center" label="累计死亡">
    194.             </el-table-column>
    195.           </el-table>
    196.         </div>
    197.       </el-dialog>
    198.       <!-- 关于弹窗 -->
    199.       <el-dialog
    200.         title="关于"
    201.         :visible.sync="aboutDialogVisible"
    202.         width="30%"
    203.         :before-close="aboutDialogClose"
    204.       >
    205.         <about />
    206.       </el-dialog>
    207.       <!-- 关于图标 -->
    208.       <div class="about-wraper">
    209.         <i
    210.           class="el-icon-info"
    211.           style="font-size: 30px"
    212.           @click="aboutDialogShowHandler"
    213.         ></i>
    214.       </div>
    215.     </div>
    216.   </div>
    217. </template>
    218. <script>
    219. import ChartCard from '../components/ChartCard'
    220. import DataMap from '../components/DataMap'
    221. import CuredAndDeadRateChart from '../components/CuredAndDeadRateChart'
    222. import BasicDataItemLabel from '../components/BasicDataItemLabel'
    223. import BasicTrendChart from '../components/BasicTrendChart'
    224. import ProvinceRankingBarChart from '../components/ProvinceRankingBarChart'
    225. import CurrentConfirmedCompareBarChart from '../components/CurrentConfirmedCompareBarChart'
    226. import About from '../components/About'
    227. import BasicProportionChart from '../components/BasicProportionChart'
    228.  
    229. import covid19Service from '../api/covid19'
    230.  
    231. const formatter = (number) => {
    232.   const numbers = number.toString().split('').reverse()
    233.   const segs = []
    234.   while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
    235.   return segs.join(',').split('').reverse().join('')
    236. }
    237. // 数据样式
    238. const getNumberStyle = (color = '#E8EAF6', fontSize = 30, fontWeight = 'bolder') => {
    239.   return {
    240.     fontSize: fontSize,
    241.     fill: color,
    242.     fontWeight: fontWeight
    243.   }
    244. }
    245.  
    246. const initBasicConfig = (data = null) => {
    247.   let currentConfirmedCount = data ? [data.currentConfirmedCount] : 0
    248.   let confirmedCount = data ? [data.confirmedCount] : 0
    249.   let importedCount = data ? [data.importedCount] : 0
    250.   let noInFectCount = data ? [data.noInFectCount] : 0
    251.   let deadCount = data ? [data.deadCount] : 0
    252.   let curedCount = data ? [data.curedCount] : 0
    253.   return {
    254.     confirmedCount: {
    255.       number: [confirmedCount],
    256.       content: '{nt}',
    257.       formatter,
    258.       style: getNumberStyle()
    259.     },
    260.     currentConfirmedCount: {
    261.       number: [currentConfirmedCount],
    262.       content: '{nt}',
    263.       formatter,
    264.       style: getNumberStyle('#2E8EEA')
    265.     },
    266.     importedCount: {
    267.       number: [importedCount],
    268.       content: '{nt}',
    269.       formatter,
    270.       style: getNumberStyle()
    271.     },
    272.     noInFectCount: {
    273.       number: [noInFectCount],
    274.       content: '{nt}',
    275.       formatter,
    276.       style: getNumberStyle()
    277.     },
    278.     deadCount: {
    279.       number: [deadCount],
    280.       content: '{nt}',
    281.       formatter,
    282.       style: getNumberStyle('#D32E58')
    283.     },
    284.     curedCount: {
    285.       number: [curedCount],
    286.       content: '{nt}',
    287.       formatter,
    288.       style: getNumberStyle()
    289.     }
    290.   }
    291. }
    292.  
    293. const initProvinceConfirmedCountBoardConfig = (resultList = []) => {
    294.   return {
    295.     header: ['省份', '累计确诊', '累计治愈', '累计死亡'],
    296.     headerHeight: 30,
    297.     data: resultList,
    298.     align: ['center'],
    299.     rowNum: 10,
    300.     index: true,
    301.     indexHeader: '排名',
    302.     headerBGC: '',
    303.     oddRowBGC: '',
    304.     evenRowBGC: '',
    305.     carousel: 'single'
    306.   }
    307. }
    308. export default {
    309.   components: {
    310.     ChartCard,
    311.     DataMap,
    312.     CuredAndDeadRateChart,
    313.     BasicDataItemLabel,
    314.     BasicTrendChart,
    315.     ProvinceRankingBarChart,
    316.     CurrentConfirmedCompareBarChart,
    317.     About,
    318.     BasicProportionChart
    319.   },
    320.   data () {
    321.     return {
    322.       title: '全国新冠肺炎疫情数据大屏',
    323.       provinceTableDialogVisible: false,
    324.       aboutDialogVisible: false,
    325.       commonData: {},
    326.       basicData: {
    327.         currentConfirmedCount: 0,
    328.         currentConfirmedIncr: 0,
    329.         confirmedCount: 0,
    330.         confirmedIncr: 0,
    331.         curedCount: 0,
    332.         curedIncr: 0,
    333.         deadCount: 0,
    334.         deadIncr: 0,
    335.         sure: 0,
    336.         sureAdd: 0,
    337.         importedCount: 0,
    338.         importedIncr: 0,
    339.         noInFectCount: 0,
    340.         noInFectIncr: 0,
    341.         suspectCount: 0,
    342.         suspectIncr: 0,
    343.         updateTime: '2022-3-1'
    344.       },
    345.       defaultDataConfig: initBasicConfig(),
    346.       cureRateConfig: {
    347.         data: [0],
    348.         shape: 'round'
    349.       },
    350.       deadRateConfig: {
    351.         data: [0],
    352.         shape: 'round'
    353.       },
    354.       countryRankingTakeTurnChartConfig: {
    355.         data: [],
    356.         waitTime: 2000,
    357.         unit: '单位',
    358.         valueFormatter ({ value }) {
    359.           const reverseNumber = (value + '').split('').reverse()
    360.           let valueStr = ''
    361.  
    362.           while (reverseNumber.length) {
    363.             const seg = reverseNumber.splice(0, 3).join('')
    364.             valueStr += seg
    365.             if (seg.length === 3) valueStr += ','
    366.           }
    367.  
    368.           return valueStr.split('').reverse().join('')
    369.         }
    370.       },
    371.       provinceConfirmedCountBoardConfig: initProvinceConfirmedCountBoardConfig(),
    372.       provinceDataList: [],
    373.       trendDataList: [],
    374.       confirmedCountList: [],
    375.       top10ProvinceData: {
    376.         provinceList: [],
    377.         valueList: []
    378.       },
    379.       basicIncrTrendData: {
    380.         dateList: [],
    381.         importedIncrDataList: [],
    382.         currentConfirmedIncrDataList: []
    383.       },
    384.       confirmSingleBarChartData: {
    385.         dateList: [],
    386.         currentConfirmedCountList: [],
    387.         confirmedCountList: []
    388.       },
    389.       rate: {
    390.         curedRate: 0,
    391.         deadRate: 0
    392.       },
    393.       areaData: {},
    394.       mapDataList: []
    395.     }
    396.   },
    397.   methods: {
    398.     queryBasicData () {
    399.       let self = this
    400.       covid19Service.getOverall().then((res) => {
    401.         if (!res.success) {
    402.           console.log('错误:' + res.info)
    403.           return
    404.         }
    405.         self.basicData = res.data
    406.         self.setBasicData(res.data)
    407.       })
    408.     },
    409.     queryProvinceDataList () {
    410.       let self = this
    411.       covid19Service.getProvinceDataList().then((res) => {
    412.         if (!res.success) {
    413.           // TODO 错误处理...
    414.           console.log('错误:' + res.info)
    415.           return
    416.         }
    417.         self.provinceDataList = res.data
    418.         self.setAreaChartData(res.data)
    419.         // 设置累计排名数据
    420.         self.setProvinceRankingData(res.data)
    421.         // 设置各省累计确诊轮播表格数据
    422.         self.setProvinceComfirmedCountBoardData(res.data)
    423.         // 设置地图数据
    424.         self.setMapData(res.data)
    425.       })
    426.     },
    427.     queryTrendDataList () {
    428.       let self = this
    429.       covid19Service.getDailyList().then((res) => {
    430.         if (!res.success) {
    431.           // TODO 错误处理...
    432.           console.log('错误:' + res.info)
    433.           return
    434.         }
    435.         self.trendDataList = res.data
    436.         // 重置图表数据
    437.         self.setBasicIncrTrendData(res.data)
    438.       })
    439.     },
    440.     setProvinceRankingData (areaList) {
    441.       let provinceList = []
    442.       let dataValueList = []
    443.       for (let i = 0; i < 10; i++) {
    444.         provinceList.push(areaList[i].provinceLabel)
    445.         dataValueList.push(areaList[i].confirmedCount)
    446.       }
    447.       let data = {
    448.         provinceList: provinceList,
    449.         valueList: dataValueList
    450.       }
    451.       this.top10ProvinceData = data
    452.     },
    453.     setBasicIncrTrendData (data) {
    454.       let dateList = []
    455.       let currentConfirmedIncrList = []
    456.       let importedIncrList = []
    457.  
    458.       let sevenDayDateList = []
    459.       // 仅显示一周条数据
    460.       let confirmedCountList = []
    461.       let curedCountList = []
    462.       // 仅获取7条数据
    463.       let count = 7
    464.       let noInFectDataList = []
    465.  
    466.       for (let i = data.currentConfirmedIncrList.length - 1; i >= 0; i--) {
    467.         dateList.push(data.currentConfirmedIncrList[i][0])
    468.         currentConfirmedIncrList.push(data.currentConfirmedIncrList[i][1])
    469.       }
    470.       for (let i = data.importedIncrList.length - 1; i >= 0; i--) {
    471.         importedIncrList.push(data.importedIncrList[i][1])
    472.       }
    473.       for (let i = data.noInFectCountList.length - 1; i >= 0; i--) {
    474.         noInFectDataList.push(data.noInFectCountList[i][1])
    475.       }
    476.  
    477.       for (let i = count; i >= 0; i--) {
    478.         if (confirmedCountList.length >= count) {
    479.           break
    480.         }
    481.         sevenDayDateList.push(data.confirmedCountList[i][0])
    482.         confirmedCountList.push(data.confirmedCountList[i][1])
    483.       }
    484.       for (let i = count; i >= 0; i--) {
    485.         if (curedCountList.length >= count) {
    486.           break
    487.         }
    488.         curedCountList.push(data.curedCountList[i][1])
    489.       }
    490.  
    491.       this.basicIncrTrendData = {
    492.         dateList: dateList,
    493.         importedIncrDataList: importedIncrList,
    494.         currentConfirmedIncrDataList: currentConfirmedIncrList,
    495.         noInFectDataList: noInFectDataList
    496.       }
    497.       this.confirmSingleBarChartData = {
    498.         dateList: sevenDayDateList,
    499.         curedCountList: curedCountList,
    500.         confirmedCountList: confirmedCountList
    501.       }
    502.     },
    503.     setProvinceComfirmedCountBoardData (areaList) {
    504.       let resultList = areaList.map(item => {
    505.         return [item.provinceLabel, item.confirmedCount, item.curedCount, item.deadCount]
    506.       })
    507.       // 重新生成，否则无法刷新状态
    508.       this.provinceConfirmedCountBoardConfig = initProvinceConfirmedCountBoardConfig(resultList)
    509.     },
    510.     setAreaChartData (areaList) {
    511.       let confirmedCountList = []
    512.       let provinceList = []
    513.       let curedCountList = []
    514.       let deadCountList = []
    515.       areaList.forEach(item => {
    516.         provinceList.push(item.provinceLabel)
    517.         confirmedCountList.push(item.confirmedCount)
    518.         curedCountList.push(item.curedCount)
    519.         deadCountList.push(item.deadCount)
    520.       })
    521.       this.areaData = {
    522.         provinceList: provinceList,
    523.         confirmedCountList: confirmedCountList,
    524.         curedCountList: curedCountList,
    525.         deadCountList: deadCountList
    526.       }
    527.     },
    528.     setMapData (dataList) {
    529.       let list = dataList.map(item => {
    530.         return {
    531.           name: item.provinceLabel,
    532.           value: item.confirmedCount
    533.         }
    534.       })
    535.       this.mapDataList = list
    536.     },
    537.     provinceTableDialogShowHandler () {
    538.       this.provinceTableDialogVisible = true
    539.     },
    540.     provinceTableDialogClose () {
    541.       this.provinceTableDialogVisible = false
    542.     },
    543.     aboutDialogShowHandler () {
    544.       this.aboutDialogVisible = true
    545.     },
    546.     aboutDialogClose () {
    547.       this.aboutDialogVisible = false
    548.     },
    549.     setBasicData (data) {
    550.       // 重新生成，否则视图不更新
    551.       let config = initBasicConfig(data)
    552.       this.defaultDataConfig = config
    553.       // 处理治愈率和死亡率
    554.       this.rate = {
    555.         curedRate: data.curedRate / 100,
    556.         deadRate: data.deadRate / 100
    557.       }
    558.     },
    559.     startQueryData () {
    560.       this.queryBasicData()
    561.       this.queryProvinceDataList()
    562.       this.queryTrendDataList()
    563.     },
    564.     initAllChart() {
    565.       this.$refs.dataMap.initChart()
    566.       this.$refs.cureRateChart.initChart()
    567.       this.$refs.confirmedCountTrendChart.initChart()
    568.       this.$refs.topConfirmedCountRankChart.initChart()
    569.       this.$refs.confirmSingleBarChart.initChart()
    570.       this.$refs.basicProportionChart.initChart()
    571.     }
    572.   },
    573.   mounted () {
    574.     this.initAllChart()
    575.     this.startQueryData()
    576.  
    577.     let self = this
    578.     // 定义定时器，隔 5 秒刷新一次
    579.     this.timer = setInterval(() => {
    580.       self.startQueryData()
    581.     }, 5000)
    582.   },
    583.   beforeDestroy() {
    584.     clearInterval(this.timer)
    585.   }
    586. }
    587. </script>
    588. <style>
    589. .container {
    590.   position: relative;
    591. }
    592. h1 {
    593.   font-size: 35px;
    594.   font-weight: bold;
    595.   padding: 20px;
    596. }
    597. .flex {
    598.   display: flex;
    599. }
    600. .top-header {
    601.   position: relative;
    602.   margin-bottom: 10px;
    603. }
    604. .top-header-tip {
    605.   font-size: 14px;
    606.   position: absolute;
    607.   padding: 20px 20px;
    608.   text-align: right;
    609.   top: 0;
    610.   right: 0;
    611. }
    612. .title {
    613.   min-width: 350px;
    614. }
    615. .chart-card {
    616.   background: #0f142b;
    617.   border-radius: 10px;
    618.   margin: 0 20px;
    619. }
    620. .main-inner-map-wraper {
    621.   height: 100%;
    622.   margin: 0 20px;
    623. }
    624. .map {
    625.   width: 99%;
    626.   height: 840px;
    627.   padding: 20px 10px 10px 10px;
    628. }
    629. .province-scroll-board-wrapper {
    630.   padding-top: 10px;
    631.   padding-bottom: 10px;
    632. }
    633. .chart-item-bottom-sep {
    634.   margin-bottom: 20px;
    635. }
    636. .province-table-title {
    637.   color: #fff;
    638.   font-size: 16px;
    639.   font-weight: bold;
    640.   padding: 10px 10px 10px 20px;
    641.   text-align: left;
    642. }
    643. .basic-incr-trend-chart-wrapper {
    644.   padding-bottom: 10px;
    645. }
    646. .sub-title,
    647. .last-update-time,
    648. .province-scroll-board-wrapper ::v-deep .dv-scroll-board .header,
    649. .province-scroll-board-wrapper ::v-deep .dv-scroll-board .rows {
    650.   font-size: 14px;
    651. }
    652. .province-scroll-board-wrapper ::v-deep .dv-scroll-board .rows {
    653.   color: #bcbcbf;
    654. }
    655. .province-data-modal-title {
    656.   color: #000;
    657.   font-size: 20px;
    658.   font-weight: bold;
    659. }
    660. .province-data-modal-update-time {
    661.   color: #58585a;
    662.   font-size: 16px;
    663.   font-weight: normal;
    664.   padding-top: 10px;
    665.   display: block;
    666. }
    667. .cure-and-dead-rate-chart {
    668.   display: flex;
    669.   justify-content: space-around;
    670. }
    671. .top-basic-info {
    672.   display: flex;
    673. }
    674. .dv-scroll-ranking-board .ranking-column .inside-column {
    675.   background: linear-gradient(90deg, #29bfff, #a231ff, #0deccd, #29bfff);
    676. }
    677. .chart-item-container {
    678.   margin: 0 10px;
    679. }
    680. .about-wraper {
    681.   position: fixed;
    682.   bottom: 20px;
    683.   right: 20px;
    684. }
    685. </style>

    七、成品展示

 

 

 

 

 结束语

截至到 2022年 3 月，疫情仍未完全褪去，民众最为关心的是疫苗接种情况。本系统基于疫情数据显 示的基础上，增加疫苗数据显示功能。利用数据爬虫 技术完成数据的获取与下载，经数据处理后形成数据 集，数据可视化阶段利用 Python 语言的 Flask 框架、 Vue、ECharts可视化等可视化技术，对疫情数据以及疫苗数据进行数据可视化。经过对现有技术的分析，并在可 视化内容上做出创新。集可视化内容于一个页面中， 疫情数据与疫苗数据一目了然，用户可以从多方面，多角度，全方位直观的观察到疫情数据、疫情发展 趋势，以及疫苗接种情况。本系统的开发是用来帮助 民众充分了解全国各地的疫情情况、近期的疫情发展 趋势以及疫苗接种情况。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/195216
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号