全球新冠疫情数据统计

介绍

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

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

准备

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

├── 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 是页面最终的效果图。

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

1
2
3

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 |

2. 当用户改变 `select` 筛选器的选择时，根据用户的选择改变页面中展示的国家名以及确诊和死亡人数数据。如果用户没有选择任何国家，则展示默认值 0 和默认标题**“请选择国家”**。以选择法国为例： ![图片描述](https://pics.hzyspace.com/img/202405161140629.png)

3. 页面底部的 `ECharts` 图表希望显示各个国家的累计确诊人数，请修改 `initChart` 函数的内容，使得图表 x 轴数据为**国家简称**，y 轴数据为**累计确诊人数**，效果如下： ![图片描述](https://pics.hzyspace.com/img/202405161140691.png)

   - 页面最终效果可参考 `effect.gif` 文件。

## 规定

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

## 判分标准

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

总通过次数: 530 | 总提交次数: 927 | 通过率: 57.2%

难度: 中等  标签: 蓝桥杯, 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>{{ showItem ? showItem.Country : '请选择国家' }}
        </h2>
      </div>
      <div class="boxes">
        <div class="box1">
          <h3>确诊</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{ showItem ? showItem.NewConfirmed : '0' }}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{ showItem ? showItem.TotalConfirmed : '0' }}
          </div>
        </div>
        <div class="box2">
          <h3>死亡</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{ showItem ? showItem.NewDeaths : '0' }}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{ showItem ? showItem.TotalDeaths : '0' }}
          </div>
        </div>
      </div>
      <select @change="changeCountry">
        <option value="">Select Country</option>
        <!-- 请在此渲染所有国家选项 -->
        <option :value="item.Country" v-for="item in dataList" :key="item.Country">{{ 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 {
        dataList: [],
        showIndex: 0,
        showItem: ''
      }
    },
    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.dataList.map(item => item.CountryCode),
            axisLabel: {
              show: true,
              interval: 0,
            }
          },
          yAxis: {
            type: 'value',
            name: '确诊数量',
          },
          // 设置y轴数据
          series: [
            {
              data: this.dataList.map(item => item.TotalConfirmed),
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#a90000'
                }
              }
            },
          ],
        };
        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },
      changeCountry(e) {
        console.log(e.target.value);
        const countryName = e.target.value
        this.showItem = this.dataList.find(item => item.Country === countryName);
        console.log(this.showItem);
      }
    },
    // TODO: 请在此添加代码实现组件加载时数据请求的功能
    async mounted() {
      const {data} = await axios('./js/covid-data.json')
      console.log(data);
      this.dataList = data
      this.initChart();
    },
  });
</script>

</html>