(第一次写掘金，嗯也不知道写啥好。想了想，先来一份简单可口的老菜谱。虽然以前在其他平台也上过，换个地方说不准口味刚好呢哈哈哈哈～)
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label
以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo
以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 （若转载请标注出处）
直接上效果图，对应代码在效果图下面
安装：
1. npm install echarts --save
2. npm install --save @types/echarts
3. import * as echarts from 'echarts'（在所需要用到的组件中TS引入，也可以在main.ts里面引入）
复制代码1. 因为typescript的限制原因，在引入的时候校对以上步骤。然后在需要用到的组件中ts文件引入对应的地图js
例如：
import '../../../node_modules/echarts/map/js/world.js' // 引入世界地图数据
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据 复制代码2. 在vue文件中先写好一个div用来包裹ECarts 就是id为allChart(世界地图)和provinceChart(中国地图)这两个容器。为后面js操作DOM做铺垫 P.S记得给这两个容器宽高才能显示地图哦~
<div class="table-line">
<div class="table-title">全球地域分布数据折线表</div>
<div id="allChart" class="charts"></div>
</div>
<div class="table-line">
<div class="table-title">国内地域分布数据折线表</div>
<div id="provinceChart" class="charts"></div>
</div>
复制代码3. 接下来通过function将数据转入（这里只举例世界地图的相关数据配置） P.S 在这里面放入data数据记得格式跟ECharts相符，即对应的省份名称例如广东，上海，北京。黑龙江等。后面跟着对应的value值（number格式）
chinaConfigure() {
let myChart = echarts.init(document.getElementById('provinceChart')) //这里是为了获得容器所在位置
myChart.setOption({ // 进行相关配置
tooltip: {}, // 鼠标移到图里面的浮动提示框
visualMap: { //左侧小柱子的配置
min: 0, // 最小值
max:15000, //最大值
left: 'left', // 定位左边
top: 'bottom', // 定位底部
text: ['高', '低'], // 上下两个文字
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#006edd'] // 深浅颜色
},
calculable: true // 显示与否
},
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图
roam: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo' // 对应上方配置
},
{
name: '启动次数', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [
{name:'广东', value: 1324}
]// 这里就是数据，即数组可以单独放在外面也可以直接写
}
]
})
} 复制代码
以上数据data填写完后即可看到对应的效果了。如果是后端数据返回的时候省份没有对应的格式，则需要自己遍历然后slice截取前两个字。但黑龙江和内蒙古要额外处理。
说完中国地图相信世界地图也不是难事。但要注意的是。ECharts里面提供的世界地图js是英文版的国家名称。在开发中难免会遇到数据返回的是中文国家名。所以这时候要在配置世界地图的时候加入nameMap更改对应的字段。
如下：(nameMap中的内容就是全球各国家和地区中英文对照)
worldConfigure() {
let myChart = echarts.init(document.getElementById('allChart'))
myChart.setOption({
tooltip: {},
visualMap: {
min: 0,
max: this.maxValue,
left: 'left',
top: 'bottom',
text: ['高', '低'],
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#006edd']
},
calculable: true
},
geo: {
map: 'world',
roam: true,
label: {
normal: {
// show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
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.': '圣文森特和格林纳丁斯'
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo'
},
{
name: '启动次数',
type: 'map',
geoIndex: 0,
data: this.worldData
}
]
})
}复制代码需要的朋友可以直接复制这里的nameMap到自己的js文件对应位置中。里面只有一百多个常用国家的对应更改。有些还是英文的国家名需要朋友自己对照ECharts里面地图显示的英文，再翻译成中文添加在nameMap中即可。