Echarts绘制地图（超详细版！）
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码要注意echarts需要引用一些js文件~
文章共4,756字 · 阅读需要大约16分钟
一键AI生成摘要，助你高效阅读
问答
·
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码
要注意echarts需要引用一些js文件~
完整代码访问我的GitHub：
1、绘制中国地图
效果：
代码：
china_map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="china_map" style="width:1000px;height:1000px;"></div>
</body>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script>
var china_map =echarts.init(document.getElementById("china_map"),'infographic');
function randomData() {
return Math.round(Math.random()*500);
}
var mydata = [
{name: '北京',value: randomData() },{name: '天津',value: randomData() },
{name: '上海',value: randomData() },{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },{name: '河南',value: randomData() },
{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData()},
{name: '安徽',value: randomData() },{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData()},
{name: '吉林',value: randomData() },{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },{name: '广东',value: randomData() },
{name: '青海',value: randomData() },{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },{name: '澳门',value: randomData() }
];
var option = {
//backgroundColor: '#FFFFFF',
title: {
text: '各省份的总成交量对比',
textStyle:{color:'#fff'},
//subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
visualMap: {
show : false,
x: 'left',
y: 'bottom',
//layoutCenter:['30%','30%'],
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
// color: ['#ff0', '#ffff00', '#0E94EB','#6FBCF0', '#F0F06F', '#00CC00']
color:['#5bc2e7', '#6980c5', '#70dfdf', '#f7f1ee', '#3390FF']
},
series: [{
name: '各省份的总成交量对比',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:mydata
}]
};
china_map.setOption(option);
</script>
</html>2、绘制省份地图
以湖南省为例
效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>湖南省</title>
</head>
<style>
.highcharts-credits {
display: none;
}
.highcharts-legend {
display: none;
}
</style>
<body><div id="map" style="width:800px;height: 500px;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/hunan.js"></script>
<script>
// 随机数据
var data = [{"name":"长沙","value":42},{"name":"株洲","value":81},{"name":"湘潭","value":94},{"name":"衡阳","value":8},{"name":"邵阳","value":67},{"name":"岳阳","value":38},{"name":"常德","value":7},{"name":"张家界","value":9},{"name":"益阳","value":77},{"name":"郴州","value":78},{"name":"永州","value":17},{"name":"怀化","value":83},{"name":"娄底","value":23},{"name":"湘西","value":75}];
// 初始化图表
var map = new Highcharts.Map('map', {
title: {
text: '湖南省'
},
colorAxis: {
min: 0,
minColor: 'rgb(255,255,255)',
maxColor: '#006cee'
},
series: [{
data: data,
name: '随机数据',
mapData: Highcharts.maps['cn/hunan'],
joinBy: 'name', // 根据 name 属性进行关联
states: {
hover: {
color: '#000'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
</script></body></html>3、绘制世界地图
效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/world.js"></script>
</head>
<body>
<div class="map" id="map" style="width:1000px;height:1000px;"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('map'));
let nameMap = {
Afghanistan: '阿富汗',
Singapore: '新加坡',
Angola: '安哥拉',
Albania: '阿尔巴尼亚',
'United Arab Emirates': '阿联酋',
Argentina: '阿根廷',
Armenia: '亚美尼亚',
'French Southern and Antarctic Lands':
'法属南半球和南极领地',
Australia: '澳大利亚',
Austria: '奥地利',
Azerbaijan: '阿塞拜疆',
Burundi: '布隆迪',
Belgium: '比利时',
Benin: '贝宁',
'Burkina Faso': '布基纳法索',
Bangladesh: '孟加拉国',
Bulgaria: '保加利亚',
'The Bahamas': '巴哈马',
'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
Belarus: '白俄罗斯',
Belize: '伯利兹',
Bermuda: '百慕大',
Bolivia: '玻利维亚',
Brazil: '巴西',
Brunei: '文莱',
Bhutan: '不丹',
Botswana: '博茨瓦纳',
'Central African Republic': '中非共和国',
Canada: '加拿大',
Switzerland: '瑞士',
Chile: '智利',
China: '中国',
'Ivory Coast': '象牙海岸',
Cameroon: '喀麦隆',
'Democratic Republic of the Congo': '刚果民主共和国',
'Republic of the Congo': '刚果共和国',
Colombia: '哥伦比亚',
'Costa Rica': '哥斯达黎加',
Cuba: '古巴',
'Northern Cyprus': '北塞浦路斯',
Cyprus: '塞浦路斯',
'Czech Republic': '捷克共和国',
Germany: '德国',
Djibouti: '吉布提',
Denmark: '丹麦',
'Dominican Republic': '多明尼加共和国',
Algeria: '阿尔及利亚',
Ecuador: '厄瓜多尔',
Egypt: '埃及',
Eritrea: '厄立特里亚',
Spain: '西班牙',
Estonia: '爱沙尼亚',
Ethiopia: '埃塞俄比亚',
Finland: '芬兰',
Fiji: '斐',
'Falkland Islands': '福克兰群岛',
France: '法国',
Gabon: '加蓬',
'United Kingdom': '英国',
Georgia: '格鲁吉亚',
Ghana: '加纳',
Guinea: '几内亚',
Gambia: '冈比亚',
'Guinea Bissau': '几内亚比绍',
Greece: '希腊',
Greenland: '格陵兰',
Guatemala: '危地马拉',
'French Guiana': '法属圭亚那',
Guyana: '圭亚那',
Honduras: '洪都拉斯',
Croatia: '克罗地亚',
Haiti: '海地',
Hungary: '匈牙利',
Indonesia: '印度尼西亚',
India: '印度',
Ireland: '爱尔兰',
Iran: '伊朗',
Iraq: '伊拉克',
Iceland: '冰岛',
Israel: '以色列',
Italy: '意大利',
Jamaica: '牙买加',
Jordan: '约旦',
Japan: '日本',
Kazakhstan: '哈萨克斯坦',
Kenya: '肯尼亚',
Kyrgyzstan: '吉尔吉斯斯坦',
Cambodia: '柬埔寨',
Kosovo: '科索沃',
Kuwait: '科威特',
Laos: '老挝',
Lebanon: '黎巴嫩',
Liberia: '利比里亚',
Libya: '利比亚',
'Sri Lanka': '斯里兰卡',
Lesotho: '莱索托',
Lithuania: '立陶宛',
Luxembourg: '卢森堡',
Latvia: '拉脱维亚',
Morocco: '摩洛哥',
Moldova: '摩尔多瓦',
Madagascar: '马达加斯加',
Mexico: '墨西哥',
Macedonia: '马其顿',
Mali: '马里',
Myanmar: '缅甸',
Montenegro: '黑山',
Mongolia: '蒙古',
Mozambique: '莫桑比克',
Mauritania: '毛里塔尼亚',
Malawi: '马拉维',
Malaysia: '马来西亚',
Namibia: '纳米比亚',
'New Caledonia': '新喀里多尼亚',
Niger: '尼日尔',
Nigeria: '尼日利亚',
Nicaragua: '尼加拉瓜',
Netherlands: '荷兰',
Norway: '挪威',
Nepal: '尼泊尔',
'New Zealand': '新西兰',
Oman: '阿曼',
Pakistan: '巴基斯坦',
Panama: '巴拿马',
Peru: '秘鲁',
Philippines: '菲律宾',
'Papua New Guinea': '巴布亚新几内亚',
Poland: '波兰',
'Puerto Rico': '波多黎各',
'North Korea': '北朝鲜',
Portugal: '葡萄牙',
Paraguay: '巴拉圭',
Qatar: '卡塔尔',
Romania: '罗马尼亚',
Russia: '俄罗斯',
Rwanda: '卢旺达',
'Western Sahara': '西撒哈拉',
'Saudi Arabia': '沙特阿拉伯',
Sudan: '苏丹',
'South Sudan': '南苏丹',
Senegal: '塞内加尔',
'Solomon Islands': '所罗门群岛',
'Sierra Leone': '塞拉利昂',
'El Salvador': '萨尔瓦多',
Somaliland: '索马里兰',
Somalia: '索马里',
'Republic of Serbia': '塞尔维亚',
Suriname: '苏里南',
Slovakia: '斯洛伐克',
Slovenia: '斯洛文尼亚',
Sweden: '瑞典',
Swaziland: '斯威士兰',
Syria: '叙利亚',
Chad: '乍得',
Togo: '多哥',
Thailand: '泰国',
Tajikistan: '塔吉克斯坦',
Turkmenistan: '土库曼斯坦',
'East Timor': '东帝汶',
'Trinidad and Tobago': '特里尼达和多巴哥',
Tunisia: '突尼斯',
Turkey: '土耳其',
'United Republic of Tanzania': '坦桑尼亚',
Uganda: '乌干达',
Ukraine: '乌克兰',
Uruguay: '乌拉圭',
'United States': '美国',
Uzbekistan: '乌兹别克斯坦',
Venezuela: '委内瑞拉',
Vietnam: '越南',
Vanuatu: '瓦努阿图',
'West Bank': '西岸',
Yemen: '也门',
'South Africa': '南非',
Zambia: '赞比亚',
Korea: '韩国',
Tanzania: '坦桑尼亚',
Zimbabwe: '津巴布韦',
Congo: '刚果',
'Central African Rep.': '中非',
Serbia: '塞尔维亚',
'Bosnia and Herz.': '波黑',
'Czech Rep.': '捷克',
'W. Sahara': '西撒哈拉',
'Lao PDR': '老挝',
'Dem.Rep.Korea': '朝鲜',
'Falkland Is.': '福克兰群岛',
'Timor-Leste': '东帝汶',
'Solomon Is.': '所罗门群岛',
Palestine: '巴勒斯坦',
'N. Cyprus': '北塞浦路斯',
Aland: '奥兰群岛',
'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
Mauritius: '毛里求斯',
Comoros: '科摩罗',
'Eq. Guinea': '赤道几内亚',
'Guinea-Bissau': '几内亚比绍',
'Dominican Rep.': '多米尼加',
'Saint Lucia': '圣卢西亚',
Dominica: '多米尼克',
'Antigua and Barb.': '安提瓜和巴布达',
'U.S. Virgin Is.': '美国原始岛屿',
Montserrat: '蒙塞拉特',
Grenada: '格林纳达',
Barbados: '巴巴多斯',
Samoa: '萨摩亚',
Bahamas: '巴哈马',
'Cayman Is.': '开曼群岛',
'Faeroe Is.': '法罗群岛',
'IsIe of Man': '马恩岛',
Malta: '马耳他共和国',
Jersey: '泽西',
'Cape Verde': '佛得角共和国',
'Turks and Caicos Is.': '特克斯和凯科斯群岛',
'St. Vin. and Gren.': '圣文森特和格林纳丁斯'
}
option={
// backgroundColor: "#02AFDB",
title: {
left: '40%',
top: '0px',
textStyle: {
color: '#02AFDB',
opacity: 0.7
}
},
visualMap: {
max:390000,
min:100,
type: 'continuous', // continuous 类型为连续型 piecewise 类型为分段型
show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
// 文本样式
textStyle: {
fontSize: 14,
color: 'black'
},
realtime: false, // 拖拽时，是否实时更新
calculable: true, // 是否显示拖拽用的手柄
// 定义 在选中范围中 的视觉元素
inRange: {
color: ['#5bc2e7', '#6980c5', '#70dfdf', '#f7f1ee', '#3390FF'] // 图元的颜色
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params)
if (params.name) {
return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
}
}
},
// geo: {//用于增加图层设置效果
// map: 'world',
// zoom: 1.2,
// label: {
// emphasis: {
// show: false
// }
// },
// roam: true,
// silent: true,
// itemStyle: {
// normal: {
// areaColor: '#37376e',
// borderColor: '#000'
// },
// emphasis: {
// areaColor: '#2a333d'
// }
// }
// },
series: [{
type: 'map',
roam: true,
mapType: 'world',
zoom: 1.2,
mapLocation: {
y: 100
},
data:[
{name:'俄罗斯',value:388320},
{name:'乌克兰',value:368971},
{name:'美国',value:81713},
{name:'英国',value:31238},
{name:'德国',value:22838},
{name:'波兰',value:14551},
{name:'中国',value:14290},
{name:'法国',value:14148},
{name:'土耳其',value:14031},
{name:'白俄罗斯',value:8713},
{name:'加拿大',value:7761},
{name:'以色列',value:7368},
{name:'澳大利亚',value:4870},
{name:'意大利',value:4345},
{name:'比利时',value:4291},
{name:'日本',value:4167},
{name:'芬兰',value:3810},
{name:'瑞士',value:3541},
{name:'匈牙利',value:3498},
{name:'立陶宛',value:3423},
{name:'瑞典',value:3109},
{name:'叙利亚',value:2938},
{name:'伊朗',value:2894},
{name:'爱沙尼亚',value:2546},
{name:'摩尔多瓦',value:2399},
{name:'拉脱维亚',value:2236},
{name:'荷兰',value:2126},
{name:'印度',value:1954},
{name:'爱尔兰',value:1858},
{name:'西班牙',value:1823},
{name:'挪威',value:1718},
{name:'奥地利',value:1697},
{name:'斯洛伐克',value:1675},
{name:'印度尼西亚',value:1513},
{name:'捷克共和国',value:1494},
{name:'葡萄牙',value:1433},
{name:'尼日利亚',value:1306},
{name:'巴基斯坦',value:1277},
{name:'阿富汗',value:1241},
{name:'丹麦',value:1218},
{name:'希腊',value:1205},
{name:'保加利亚',value:1165},
{name:'新西兰',value:1112},
{name:'卡塔尔',value:920},
{name:'韩国',value:859},
{name:'埃及',value:835},
{name:'伊拉克',value:828},
{name:'哈萨克斯坦',value:731},
{name:'罗马教廷（梵蒂冈城）',value:725},
{name:'南非',value:714},
{name:'沙特阿拉伯',value:708},
{name:'菲律宾',value:658},
{name:'墨西哥',value:650},
{name:'阿塞拜疆',value:582},
{name:'朝鲜',value:573},
{name:'巴西',value:567},
{name:'阿拉伯联合酋长国',value:553},
{name:'古巴',value:551},
{name:'越南',value:522},
{name:'亚美尼亚',value:518},
{name:'孟加拉国',value:499},
{name:'委内瑞拉',value:471},
{name:'被占领巴勒斯坦领土',value:447},
{name:'塞尔维亚',value:436},
{name:'新加坡',value:427},
{name:'摩洛哥',value:415},
{name:'肯尼亚',value:399},
{name:'马来西亚',value:378},
{name:'阿尔巴尼亚',value:367},
{name:'塔吉克斯坦',value:346},
{name:'塞浦路斯',value:322},
{name:'斐济',value:308},
{name:'利比亚',value:291},
{name:'黎巴嫩',value:283},
{name:'也门',value:276},
{name:'泰国',value:274},
{name:'阿根廷',value:269},
{name:'卢森堡',value:268},
{name:'加纳',value:252},
{name:'克罗地亚',value:249},
{name:'乔丹',value:232},
{name:'土库曼斯坦',value:216},
{name:'乌兹别克斯坦',value:216},
{name:'苏丹',value:212},
{name:'塞内加尔',value:205},
{name:'厄立特里亚',value:195},
{name:'津巴布韦',value:190},
{name:'智利',value:187},
{name:'尼泊尔',value:180},
{name:'冰岛',value:178},
{name:'缅甸',value:176},
{name:'阿尔及利亚',value:175},
{name:'吉尔吉斯斯坦',value:157},
{name:'尼加拉瓜',value:157},
{name:'哥伦比亚',value:156},
{name:'斯里兰卡',value:152},
{name:'马耳他',value:142},
{name:'卢旺达',value:138},
{name:'埃塞俄比亚',value:113},
{name:'索马里',value:110},
{name:'柬埔寨',value:108},
{name:'马里',value:105},
{name:'科威特',value:99},
{name:'秘鲁',value:83},
{name:'蒙古',value:79},
{name:'厄瓜多尔',value:77},
{name:'阿曼',value:74},
{name:'突尼斯',value:71},
{name:'马其顿',value:68},
{name:'乌干达',value:66},
{name:'文莱达鲁萨兰国',value:61},
{name:'马尔代夫',value:57},
{name:'危地马拉',value:56},
{name:'巴林',value:55},
{name:'摩纳哥',value:55},
{name:'坦桑尼亚',value:51},
{name:'中非共和国',value:50},
{name:'乌拉圭',value:50},
{name:'莫桑比克',value:49},
{name:'马拉维',value:48},
{name:'巴拿马',value:48},
{name:'乍得',value:45},
{name:'多米尼加共和国',value:43},
{name:'喀麦隆',value:40},
{name:'伯利兹',value:35},
{name:'加蓬',value:35},
{name:'尼日尔',value:34},
{name:'刚果',value:33},
{name:'百慕大群岛',value:31},
{name:'圭亚那',value:31},
{name:'赞比亚',value:31},
{name:'刚果',value:30},
{name:'佐治亚州',value:29},
{name:'洪都拉斯',value:29},
{name:'利比里亚',value:29},
{name:'塞舌尔',value:29},
{name:'所罗门群岛',value:27},
{name:'格林纳达',value:26},
{name:'牙买加',value:26},
{name:'巴拉圭',value:26},
{name:'哥斯达黎加',value:25},
{name:'圣基茨和尼维斯',value:24},
{name:'纳米比亚',value:22},
{name:'安哥拉',value:21},
{name:'科特迪瓦（科特迪瓦）',value:21},
{name:'老挝',value:20},
{name:'博茨瓦纳',value:19},
{name:'布基纳法索',value:18},
{name:'玻利维亚',value:18},
{name:'巴巴多斯',value:18},
{name:'罗马尼亚',value:18},
{name:'吉布提',value:17},
{name:'塞拉利昂',value:17},
{name:'不丹',value:16},
{name:'萨尔瓦多',value:16},
{name:'巴哈马',value:13},
{name:'圣卢西亚',value:12},
{name:'圣文森特和格林纳丁斯',value:12},
{name:'密克罗尼西亚',value:9},
{name:'特立尼达和多巴哥',value:9},
{name:'赤道几内亚',value:8},
{name:'海地',value:8},
{name:'帕劳',value:8},
{name:'毛里塔尼亚',value:7},
{name:'布隆迪',value:6},
{name:'科摩罗',value:6},
{name:'开曼群岛',value:6},
{name:'冈比亚',value:6},
{name:'马达加斯加',value:6},
{name:'毛里求斯',value:6},
{name:'多米尼加',value:5},
{name:'几尼',value:5},
{name:'基里巴斯',value:5},
{name:'汤加',value:5},
{name:'列支敦士登',value:3},
{name:'莱索托',value:3},
{name:'多哥',value:3},
{name:'瓦努阿图',value:3},
{name:'安提瓜和巴布达',value:2},
{name:'几内亚比绍',value:2},
{name:'中国香港特别行政区',value:1},
{name:'中国澳门特别行政区',value:1},
{name:'巴布亚新几内亚',value:1},
{name:'苏里南',value:1},
],
nameMap: nameMap,
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: true,
textStyle:{color:'white'}
}
},
itemStyle: {
borderWidth: 0.5, // 描边线宽 为 0 时无描边
borderColor: 'rgba(112,187,252,.5)', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
borderType: 'solid', // rgba(2,37,101,.5)描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
emphasis: {areaColor: 'rgba(2,37,101,.8)',
lable:{color:"white"},
textStyle:{color:"black"}}
}
}],
};
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
</script>
</html>都看到这里了，给个小心心❤呗~
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
13
0- 0
已为社区贡献3条内容
所有评论(0)