【毕设Day9】

前言

第9天啦！！！加油加油加油！！！

---

一、新建世界地图

1.echarts.js文件新增worldMap方法

2.将世界国家的英文名映射为中文

echarts.js文件导入utils/country.js文件

//导入映射国家名字的文件
import worldName from '../utils/country'

使用echarts自定义地区的名称映射

series: [{
nameMap: worldName, //映射国家的名字
}],

二、国外疫情数据接口

1.获取接口

请求地址：https://cspe.api.storeapi.net/api/94/220
MD5加密字符串：appid13847formatjson+密钥
sign:ce1d300a7fd3c3c4d56c7a0516fd05d0
请求方式：GET
请求参数：format=json&appid=13847&sign=ce1d300a7fd3c3c4d56c7a0516fd05d0

2.base.js引入接口

// 【挖数据】国外疫情数据
    worldMap: '/api/94/220`'

将请求参数密钥放到Secret.js中

// 【挖数据】国外疫情数据的密钥
    worldSignorance: '?format=json&appid=13847&sign=ce1d300a7fd3c3c4d56c7a0516fd05d0'

3.index.js创建getWorldMap方法

//【挖数据】世界疫情数据
    getWorldMap() {
        return axios.get(base.baseUrl2 + base.worldMap + Secret.worldSign)
    }

4.CovidMap调用接口

this.$api.getWorldMap().then((res) => {
      console.log(res.data);
    });

三、绘制世界地图

1.CovidMap文件 绘制世界地图

	<h2>世界地图</h2>
    <div id="world"></div>
   
    //==================绘制世界地图===================
    this.$api.getWorldMap().then((res) => {
      console.log(res.data.retdata);
      let arr = []; //装地图数据
      res.data.retdata.forEach((element) => {
        //forEach遍历数组每一项，也就是这里的类
        //xArea: "美国"   curConfirm: "1000000"
        let temp = {};
        temp.name = element.xArea;
        temp.value = element.curConfirm;
        arr.push(temp);
      });
      // 插入地图
      this.$echarts.worldMap("world", arr);
      console.log(arr);
    });
    
    #world {
 	 height: 8rem;
 	 width: 7rem;
	}

不足：格陵兰和中国数据不显示