echarts map china 地图不展示，不居中，中英文问题（世界地图同理）

最新推荐文章于 2024-01-21 08:13:22 发布

原创

最新推荐文章于 2024-01-21 08:13:22 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

本文探讨了echarts地图不展示的原因，包括需要自行引入地图文件如china.js，以及地图显示省份不居中的解决方案，涉及地图中城市中英文问题。针对中文与英文城市名称的匹配问题，提出了通过配置series解决的方法，并提供了世界地图国家中英文数据对照的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不展示原因：

echarts不再内置地图文件，需自己引入

GITHUB: https://github.com/apache/incubator-echarts 下 map/js/china.js文件

node_modules引入： node_modules/echarts/map/js/china.js

map

地图展示省份不居中问题

地图上显示名称的位置为其省会的坐标位置，可通过china.js文件来调整位置。
properties下的cp属性存储的是经纬度坐标，可手动配置
70d415436791ae318ffdc7c76518a0c

城市中英文问题

中国地图文件 china.js 中使用的是中文城市名称
世界地图文件 world.js 中使用的是英文国家名称

当数据不满足中英文结构时，需自行配置series：
参考：https://www.echartsjs.com/examples/zh/editor.html?c=map-HK

nameMap: {
   
	'北京': 'Beijing',
	'河北': 'Hebei'
}

附：echarts 世界地图国家中英文数据对照

{
   
	Canada: '加拿大',
    Turkmenistan: '土库曼斯坦',
    'Saint Helena': '圣赫勒拿',
    'Lao PDR': '老挝',
    Lithuania: '立陶宛',
    Cambodia: '柬埔寨',
    Ethiopia: '埃塞俄比亚',
    'Faeroe Is.': '法罗群岛',
    Swaziland: '斯威士兰',
    Palestine: '巴勒斯坦',
    Belize: '伯利兹',
    Argentina: '阿根廷',
    Bolivia: '玻利维亚',
    Cameroon: '喀麦隆',
    'Burkina Faso': '布基纳法索',
    Aland: '奥兰群岛',
    Bahrain: '巴林',
    'Saudi Arabia': '沙特阿拉伯',
    'Fr. Polynesia': '法属波利尼西亚',
    'Cape Verde': '佛得角',
    'W. Sahara': '西撒哈拉',
    Slovenia: '斯洛文尼亚',
    Guatemala: '危地马拉',
    Guinea: '几内亚',
    'Dem. Rep. Congo': '刚果（金）',
    Germany: '德国',
    Spain: '西班牙',
    Liberia: '利比里亚',
    Netherlands: '荷兰',
    Jamaica: '牙买加',
    'Solomon Is.': '所罗门群岛',
    Oman: '阿曼',
    Tanzania: '坦桑尼亚',
    'Costa Rica'