全球新冠疫情数据统计

作者:江月迟迟

发表于:2024-12-10

字数统计:1408 字

预计阅读5分钟

介绍

新冠疫情席卷全球，在此期间有很多免费的 API 和网站为人们提供了各个国家疫情数据的查询功能，这些免费公开的数据体现出了互联网作为信息媒介的优越性，帮助全球人民更好的了解一线疫情信息。

本题请实现一个可以对各个国家的新冠疫情数据统计的页面。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

txt

├── css
│   └── style.css
├── effect.gif
├── index.html
└── js
    ├── axios.js
    ├── covid-data.json
    ├── echarts.min.js
    └── vue.js

其中：

css/style.css 是样式文件。
index.html 是主页面。
js/axios.js 是 axios 文件。
js/vue.min.js 是 vue2.x 文件。
js/echarts.min.js 是 echarts 文件。
js/covid-data.json 是页面所用到的新冠数据。
effect.gif 是页面最终的效果图。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载：

bash

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/covid-page.zip
unzip covid-page.zip && rm covid-page.zip

在浏览器中预览 index.html 页面效果如下：

图片描述

目标

请在 index.html 文件中补全代码，具体需求如下：

在组件加载时利用 axios 请求地址为 ./js/covid-data.json （必须使用该路径请求，否则可能会请求不到数据）文件中的数据。并将所有国家名称在 select 标签下的 option 元素进行渲染（保留默认选项 “Select Country”），效果如下：
- ```
covid-data.json
```
  数据参数说明
  参数说明类型
  Country 国家名称 string
  CountryCode 国家简称 string
  NewConfirmed 新增确诊 number
  TotalConfirmed 累计确诊 number
  NewDeaths 新增死亡 number
  TotalDeaths 累计死亡 number
当用户改变 select 筛选器的选择时，根据用户的选择改变页面中展示的国家名以及确诊和死亡人数数据。如果用户没有选择任何国家，则展示默认值 0 和默认标题**“请选择国家”**。以选择法国为例：
页面底部的 ECharts 图表希望显示各个国家的累计确诊人数，请修改 initChart 函数的内容，使得图表 x 轴数据为国家简称，y 轴数据为累计确诊人数，效果如下：
- 页面最终效果可参考 effect.gif 文件。

参数	说明	类型
`Country`	国家名称	string
`CountryCode`	国家简称	string
`NewConfirmed`	新增确诊	number
`TotalConfirmed`	累计确诊	number
`NewDeaths`	新增死亡	number
`TotalDeaths`	累计死亡	number

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

完成目标 1，得 5 分。
完成目标 2，得 10 分。
完成目标 3，得 5 分。

总通过次数: 426 | 总提交次数: 774 | 通过率: 55%

难度: 中等标签: 蓝桥杯, 2023, 省赛, Web 前端, Vue.js, ECharts, 异步

题解

vue

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>全球新冠疫情数据统计</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="js/axios.js"></script>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="app">
    <header>
      <div>
        全球新冠疫情数据统计
      </div>
    </header>
    <main>
      <!-- TODO: 请修改以下代码实现不同国家的数据展示功能 -->
      <div class="title">
        <h2>{{ selectValue ? selectValue.Country : '请选择国家' }}
        </h2>
      </div>
      <div class="boxes">
        <div class="box1">
          <h3>确诊</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{ selectValue ? selectValue.NewConfirmed : 0 }}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{ selectValue ? selectValue.TotalConfirmed : 0 }}
          </div>
        </div>
        <div class="box2">
          <h3>死亡</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{ selectValue ? selectValue.NewDeaths : 0 }}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{ selectValue ? selectValue.TotalDeaths : 0 }}
          </div>
        </div>
      </div>
      <select v-model="selectValue">
        <option value="">Select Country</option>
        <!-- 请在此渲染所有国家选项 -->
        <option v-for="item in list" :key="item.Country" :value="item">{{ item.Country }}</option>

      </select>
      <div id="chart" style="width: 100%; height: 50vh;"></div>
    </main>
  </div>
</body>

<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        list: [],
        selectValue: ''
      }
    },
    methods: {
      // TODO: 请修改该函数代码实现题目要求
      initChart() {
        // 初始化图表
        this.chart = echarts.init(document.getElementById("chart"));
        this.chartOptions = {
          title: {
            text: "全球感染人数前30国家累计确诊人数统计",
            x: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          // 设置x轴数据
          xAxis: {
            // 这里需要显示国家名称缩写，因为有些国家的全称太长，会导致界面不美观
            data: this.list.map(item => item.CountryCode),
            axisLabel: {
              show: true,
              interval: 0,
            }
          },
          yAxis: {
            type: 'value',
            name: '确诊数量',
          },
          // 设置y轴数据
          series: [
            {
              data: this.list.map(item => item.TotalConfirmed),
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#a90000'
                }
              }
            },
          ],
        };
        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },

    },
    // TODO: 请在此添加代码实现组件加载时数据请求的功能
    async mounted() {
      const {data} = await axios.get('./js/covid-data.json')
      console.log(data);
      this.list = data
      this.initChart();
    },
  });
</script>

</html>

全球新冠疫情数据统计 ​

介绍 ​

准备 ​

目标 ​

规定 ​

判分标准 ​

题解 ​

全球新冠疫情数据统计

介绍

准备

目标

规定

判分标准

题解