基于VUE+TS中引用ECharts的中国地图和世界地图密度表
Posted 爱上大树的小猪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于VUE+TS中引用ECharts的中国地图和世界地图密度表相关的知识，希望对你有一定的参考价值。
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo
以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 （若转载请标注出处）
直接上效果图，对应代码在效果图下面
安装：
1. npm install echarts --saveimport * as echarts from \'echarts\'（
2. npm install --save @types/echarts
3.在所需要用到的组件中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: \'巴哈马vue中，基于echarts 地图实现一个人才回流的大数据展示效果