分析

类型：VUE
分数：20分
难度：难

考点

• 掌握VUE生命周期和钩子函数
• 掌握 axios 发送 AJAX

解题思路

第一题：使用 axios 发送 AJAX，并将返回的国家添加到 countryArr 数组中

第二题：给 <select> 控件添加事件，选择国家时，将该国家的信息显示到页面上

第三题：修改 initChart() 方法，在 x轴 上显示国家简称

实现

第一题

修改 index.html

mounted() {

  axios.get("./js/covid-data.json").then( (res)=>{
    this.covidDatas = res.data

    for(let item of res.data){
      // console.log("item:",item)
      this.countryArr.push(item.Country)
    }


    this.initChart();
  })

},

第二题

<div class="title">
  <h2>{{countryName}}</h2>
</div>
<div class="boxes">
  <div class="box1">
    <h3>确诊</h3>
    <div class="number">
      <span class="font-bold">新增:{{newConfirmed}}</span>
    </div>
    <div class="number">
      <span class="font-bold">总计:{{totalConfirmed}}</span>

    </div>
  </div>
  <div class="box2">
    <h3>死亡</h3>
    <div class="number">
      <span class="font-bold">新增:{{newDeaths}}</span>

    </div>
    <div class="number">
      <span class="font-bold">总计:{{totalDeaths}}</span>

    </div>
  </div>
</div>

ch(){
  console.log("selCountry:",this.selCountry)

  if(this.selCountry == ''){
      this.newConfirmed = 0
      this.totalConfirmed = 0
      this.newDeaths = 0
      this.totalDeaths = 0
      this.countryName = "请选择国家"
  }else{

    for(let item of this.covidDatas){
      // 如果 covidDatas 中的数据的国家名称 与 select选中的国家名称一致
      // 那么从 covidDatas 取出该国家的数据，更新
      if(item.Country === this.selCountry){
        this.newConfirmed = item.NewConfirmed
        this.totalConfirmed = item.TotalConfirmed
        this.newDeaths = item.NewDeaths
        this.totalDeaths = item.TotalDeaths
        this.countryName = this.selCountry
      }
    }
  }
}

第三题

  initChart() {
    // 国家简称
    const countryNames=[]
    const totalConfirmeds=[]
    for(let item of this.covidDatas){
      countryNames.push( item.CountryCode )
      totalConfirmeds.push(item.TotalConfirmed)
    }

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

原文出处：/show_1GWMfkliFhZ.html