全球新冠疫情数据统计（蓝桥杯练习题）

万花镜whj

已于 2024-03-11 15:20:44 修改

阅读量1.1k

点赞数 17

文章标签： html5 javascript

于 2024-03-11 15:20:15 首次发布

本文链接：https://blog.csdn.net/weixin_62613460/article/details/136624931

版权

全球新冠疫情数据统计（蓝桥杯练习题）

仅做记录之用

<!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>{{select?select.Country:"请选择国家"}}
        </h2>
      </div>
      <div class="boxes">
        <div class="box1">
          <h3>确诊</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{select?select.NewConfirmed:"0"}}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{select?select.TotalConfirmed:"0"}}
          </div>
        </div>
        <div class="box2">
          <h3>死亡</h3>
          <div class="number">
            <span class="font-bold">新增:</span>
            {{select?select.NewDeaths:"0"}}
          </div>
          <div class="number">
            <span class="font-bold">总计:</span>
            {{select?select.TotalDeaths:"0"}}
          </div>
        </div>
      </div>
      <select v-model="svalue" @change="choose($event)">
        <option value="">Select Country</option>
        <option  v-for="(item, index) in country" :key="index" :value="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:{
      country:[],
      select: '',
      svalue: '',
    },
    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: [
            //   "US",
            //   "IN",
            //   "FR",
            //   "DE",
            //   "BR",
            //   "JP",
            //   "KR",
            // ],
            data: this.getX(),
            axisLabel: {
              show: true,
              interval: 0,
            }
          },
          yAxis: {
            type: 'value',
            name: '确诊数量',
          },
          // 设置y轴数据
          series: [
            {
              // data: [
              //   100856162, 44680355, 39560482, 37446795, 36362366, 29489769, 29299166,],
              data:this.getY(),
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#a90000'
                }
              }
            },
          ],
        };
        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },
      choose(e){
          this.select = this.country.find((item)=>{
            return item.Country == this.svalue
          })
      },
      getX(){
        var list=[]
        for(let i of this.country){
          list = [...list, ...[i.CountryCode]]
        }
        return list
      },
      getY(){
        var list=[]
        for(let i of this.country){
          list = [...list, ...[i.TotalConfirmed]]
        }
        return list
      }
    },
    // TODO: 请在此添加代码实现组件加载时数据请求的功能
    async mounted() {
      await axios.get("./js/covid-data.json ").then((res)=>{
        this.country = res.data
      })
      this.initChart();
    },
  });
</script>

</html>

万花镜whj

关注

17
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
全球新冠疫情数据统计（蓝桥杯练习题）

全球新冠疫情数据统计（蓝桥杯练习题）仅做记录之用<!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-
复制链接

扫一扫