需求描述
将接口返回的中文国家名称做两种展示:①在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