十四届蓝桥杯省赛Web大学组真题（3）

黄同学不会前端

已于 2023-12-11 09:02:55 修改

阅读量644

点赞数 1

文章标签：蓝桥杯职场和发展

于 2023-12-09 20:35:59 首次发布

本文链接：https://blog.csdn.net/m0_56164661/article/details/134899524

版权

5. 全球新冠疫情数据统计（考点 ECharts，axios，数据重复渲染）

https://www.lanqiao.cn/problems/5137/learning/?subject_code=4&group_code=2&match_num=14&match_flow=1&origin=cup

实现目标：

在组件加载时利用 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 轴数据为累计确诊人数，效果如下：

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

图片描述

思路：

首先肯定是要axios请求数据，我们可以直接在mounted中就直接异步请求数据或者是写一个异步函数，在mounted中调用，两者写法上是有一定区别的。

代码：

<!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>{{targetCountry}}</h2>
        </div>
        <div class="boxes">
          <div class="box1">
            <h3>确诊</h3>
            <div class="number">
              <span class="font-bold">新增:</span>
              {{NewConfirmed}}
            </div>
            <div class="number">
              <span class="font-bold">总计:</span>
              {{TotalConfirmed}}
            </div>
          </div>
          <div class="box2">
            <h3>死亡</h3>
            <div class="number">
              <span class="font-bold">新增:</span>
              {{NewDeaths}}
            </div>
            <div class="number">
              <span class="font-bold">总计:</span>
              {{TotalDeaths}}
            </div>
          </div>
        </div>
        <select v-model="targetCountry" @change="changeData">
          <option value="请选择国家">Select Country</option>
          <!-- 请在此渲染所有国家选项 -->
          <option :value="item.Country" v-for="item in data">
            {{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 {
          data: [],
          targetCountry: "请选择国家",
          NewConfirmed: 0,
          NewDeaths: 0,
          TotalConfirmed: 0,
          TotalDeaths: 0,
        };
      },

      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.data.map(item => item.CountryCode),
              axisLabel: {
                show: true,
                interval: 0,
              },
            },
            yAxis: {
              type: "value",
              name: "确诊数量",
            },
            // 设置y轴数据
            series: [
              {
                data: this.data.map(item => item.TotalConfirmed),
                type: "bar",
                itemStyle: {
                  normal: {
                    color: "#a90000",
                  },
                },
              },
            ],
          };
          // 调用此方法设置 echarts 数据
          this.chart.setOption(this.chartOptions);
        },


        changeData() {
          let findCountry = this.data.find(
            (item) => item.Country == this.targetCountry
          );
          console.log(findCountry);
          if (!findCountry) {
            this.NewConfirmed = 0;
            this.NewDeaths = 0;
            this.TotalConfirmed = 0;
            this.TotalDeaths = 0;
          } else {
            this.NewConfirmed = findCountry.NewConfirmed;
            this.NewDeaths = findCountry.NewDeaths;
            this.TotalConfirmed = findCountry.TotalConfirmed;
            this.TotalDeaths = findCountry.TotalDeaths;
          }
        },
      },
      // TODO: 请在此添加代码实现组件加载时数据请求的功能
      async mounted() {
        var list = await axios.get("./js/covid-data.json");
        this.data = list.data;
        console.log(this.data);
        this.initChart();
      }, 
    });
  </script>
</html>

请求数据后，目标三就很简单了，就我这里举例option中遍历数据插值语法就好了，相对比较简单，值得一提的是我上面提的