需求描述
将接口返回的中文国家名称做两种展示：①在echarts世界地图中高亮显示对应的国家区域；②在一个列表中显示带有国旗图标的国家名称，预期效果如下图所示：
实现思路
带有国旗图标的列表实现思路较简单，通过网络收集所有国旗图标后显示即可；由于实现世界地图高亮效果使用echarts，其引用的国家轮廓经纬度列表world.json中使用了固定的英文字符串命名每个国家，所以必须将接口返回的中文国家名称与world.json中的英文字符串一一对应，且使用world.json中的英文字符串（若其中存在空格则替换成下划线）来命名对应的国旗便于引用。
具体实现
1、echarts世界地图
在我的印象中，echarts有提供与效果图类似的在线示例，但翻遍了官网只找到以下这则相关声明：
最后根据一位同事提供的示例代码，在官网的在线示例中运行得到了预期的效果（现在官网的旧版/新版在线示例中确实找不到这个世界地图了，但还是可以运行的）：
echarts世界地图示例代码
// echarts世界地图示例代码
myChart.showLoading();
let projection;
$.when(
$.get(ROOT_PATH + '/data/asset/geo/world.json'),
$.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
$.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
).done(function (res) {
myChart.hideLoading();
echarts.registerMap('world', res[0]);
projection = d3.geoOrthographic();
option = {
series: [
{
type: 'map',
map: 'world',
itemStyle: {
borderColor: '#333',
borderWidth: 1,
borderJoin: 'round',
color: 'grey'
},
emphasis: {
label: {
show: false
},
itemStyle: {
color: 'skyblue'
}
},
regions: [
{
name: 'graticule',
itemStyle: {
borderColor: '#bbb'
},
emphasis: {
disabled: true
}
}
],
data: [{ name: 'China', selected: true }]
}
]
};
myChart.setOption(option);
});
option && myChart.setOption(option);
在线运行
可以拷贝到这个在线示例运行调试：2012年美国人口统计
图表配置项
echarts地图的配置项看这里：配置项-地图系列
在vue中使用echarts地图图表的Demo和国旗图标资源均可通过文末的Gitee链接拉取
2、世界国旗图标
这个收集过程其实没有什么技术含量。。笔者花了将近两天从网络一个一个下载了所有能找到的国旗图标（整理不易，求赞求收藏哈~★▼★~；此外，依然可能有未收集到、或中文名称不同导致匹配不到对应国旗的情况，那就麻烦自行处理一下啦），其中大多数图标来源于世界各国国旗图案这一网站，为了保持格式统一，笔者整理的所有国旗图标都是“.git”格式，还请留意。
其余的国旗图标大多来自百度百科，这里分享一个亲测有效去除百度图片水印的方法：最简单的百度图片去水印
参考代码及资源下载
国旗图标资源以及vue中引用图标、使用echarts世界地图的参考代码都已上传到笔者个人的Gitee仓库，有需要的小伙伴可自行拉取（代码仅提供核心逻辑实现参考，无法直接运行）：
仓库链接：https://gitee.com/smm311/my-demos.git
分支：worldMapFlagDemo
echarts显示自定义范围的地图图表
如果需要在echarts显示自定义范围的地图图表，只需要下载对应的轮廓经纬度列表json并引用（与示例中引用world.json一样）即可，下载方法可参考：echarts map中如何获取所需要的json
比官网更丰富的echarts示例！
强烈推荐一个有非常丰富的echarts在线示例的网站：PPChart，但由于遭到DDOS攻击，PPChart服务不太稳定，大家也可以访问PPChart开发者推荐的另外两个站点：madeapie、isqqw
创作这篇博客时笔者还不知道PPChart，Emm…这三个站点上的echarts地图示例简直不要太多了，大家可自行跳转参考
参考网址
[1] echarts在线示例-2012年美国人口统计
[2] echarts配置项-地图系列
[3] 世界各国国旗图案
[4] 最简单的百度图片去水印
[5] echarts map中如何获取所需要的json