echarts 自定义世界地图（含中国地图省份数据）

效果图

主要代码

依赖echarts.min.js axios.js

!(function(global) {let chart = echarts.init(document.getElementById('mapContainer'));// 异步数据加载前动画chart.showLoading();let fetch = axios.create({baseURL: 'http://localhost:5000/api'});let warMapData = [{name: 'xxxx1',longitude: 123.38,latitude: 43.35}, {name: 'xxxx2',longitude: 93.51,latitude: 37.52}, {name: 'xxxx3',longitude: 110.56,latitude: 25.53}, {name: 'xxxx4',longitude: 120.17,latitude: 31.62}, {name: 'xxxx5',longitude: 116.40,latitude: 39.90}];const worldMapName = {'Afghanistan': '阿富汗','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': '几内亚比绍','Equatorial Guinea': '赤道几内亚','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': '柬埔寨','South Korea': '韩国','Dem. Rep. Korea': '韩国','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': '北朝鲜','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 of America': '美国','Uzbekistan': '乌兹别克斯坦','Venezuela': '委内瑞拉','Vietnam': '越南','Vanuatu': '瓦努阿图','West Bank': '西岸','Yemen': '也门','South Africa': '南非','Zambia': '赞比亚','Zimbabwe': '津巴布韦'}let colors = ['rgba(51, 152, 225, 1)', 'rgba(92, 176, 233, 1)', 'rgba(134, 190, 231, 1)'];let mapArea = {color: {getColorValue(index) {return colors[index]}}};function log(msg) {if (console && console.log && typeof console.log === 'function') {console.log(msg);}}function error(msg) {if (console && console.log && typeof console.error === 'function') {console.error(msg);}}fetch({url: '../map/geojson/world.json',method: 'GET'}).then((res) => {echarts.registerMap('WorldMap', res.data);let option = {backgroundColor: '#020c5e',geo: {map: 'WorldMap',center: [104.114129, 37.550339],zoom: 3.5,roam: true,scaleLimit: {min: 1.0,max: 8.0},nameMap: worldMapName,nameProperty: 'name',selectMode: 'single',label: {position: 'top',backgroundColor: 'transparent',borderColor: 'transparent',color: '#93c9ff',fontStyle: 'normal',fontWeight: 'normal',fontFamily: 'Microsoft Yahei',fontSize: 16,show: true,// formatter: [//     '{a|富文本样式}'// ],// rich: {//     a: {//         color: 'red'//     }// },emphasis: {color: '#93c9ff',show: true}},itemStyle: {normal: {areaColor: '#1582e6',borderColor: '#fff',borderWidth: 1,borderType: 'solid',opacity: 1},emphasis: {areaColor: '#198ffa'}},regions: [{ // 北部name: '内蒙古自治区',itemStyle: {areaColor: 'rgba(92, 176, 233, 1)',color: 'rgba(92, 176, 233, 1)'}}, {name: '黑龙江省',itemStyle: {areaColor: 'rgba(92, 176, 233, 1)',color: 'rgba(92, 176, 233, 1)'}}, {name: '吉林省',itemStyle: {areaColor: 'rgba(92, 176, 233, 1)',color: 'rgba(92, 176, 233, 1)'}}, {name: '辽宁省',itemStyle: {areaColor: 'rgba(92, 176, 233, 1)',color: 'rgba(92, 176, 233, 1)'}}, {name: '山东省',itemStyle: {areaColor: 'rgba(92, 176, 233, 1)',color: 'rgba(92, 176, 233, 1)'}}, { // 西部name: '新疆维吾尔自治区',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '西藏自治区',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '青海省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '甘肃省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '宁夏回族自治区',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '四川省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '重庆市',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, { // 南部name: '云南省',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '广西壮族自治区',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '贵州省',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '广东省',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '湖南省',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '海南省',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '香港',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '澳门',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, {name: '南海诸岛',itemStyle: {areaColor: 'rgba(103, 176, 226, 1)',color: 'rgba(103, 176, 226, 1)'}}, { // 东部name: '福建省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '浙江省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '江苏省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '上海市',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '安徽省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, {name: '江西省',itemStyle: {areaColor: 'rgba(134, 190, 231, 1)',color: 'rgba(134, 190, 231, 1)'}}, { // 中部name: '北京市',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '天津市',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '陕西省',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '山西省',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '河北省',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '河南省',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}, {name: '湖北省',itemStyle: {areaColor: 'rgba(51, 152, 225, 1)',color: 'rgba(51, 152, 225, 1)'}}],silent: false,z: 0},series: [//根据经纬度在地图上描点{type: 'effectScatter',coordinateSystem: 'geo',animation: true,rippleEffect: {brushType: 'stroke'},symbolSize: function (val, params) {return 30;},data: warMapData.map(function (itemOpt) {return {name: itemOpt.name,value: [itemOpt.longitude,itemOpt.latitude,],label: {emphasis: {position: 'right',show: false}},itemStyle: {normal: {color: 'yellow' //色值}}};}),symbolSize: function (val) {return 5; //描点的大小}}]};// 隐藏加载动画chart.hideLoading();chart.setOption(option);chart.on('click', (params) => {console.log(params);})});
})(this);

echarts 自定义世界地图（含中国地图省份数据）相关推荐

Echart系列 | 绘制世界地图含中国各个省份（地图篇）（一）
步骤一先绘制一张世界地图,这一步为基础工程,代码+效果图附下: world.json 链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:o ...
用Python勾勒世界地图和中国地图
阅读文本大概需要 5 分钟. 大家还记得中学课本里的一首现代诗歌吗? 乡愁现代 · 余光中小时候, 乡愁是一枚小小的邮票, 我在这头, 母亲在那头. 长大后, 乡愁是一张窄窄的船票, 我在这头, ...
python作中国地图背景气泡图_exce表格中怎么制作中国地图背景数据气泡图
exce表格中怎么制作中国地图背景数据气泡图 exce表格中怎么制作中国地图背景数据气泡图?excel表格中想要在中国地图上显示气泡来看看地区分布情况,该怎么设置中国地图气泡图表呢?下面我们就来看看详 ...
【ECharts学习】—实现中国地图
[ECharts学习]-实现中国地图使用Echarts进行地图绘制展示的时候,需要china.js的引入,我把它放在百度网盘里了,需要的自取点我跳转到百度网盘提取码:clby <!DOCT ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
Echarts的世界、中国、省份地图
效果图安装的依赖 npm i echarts echarts-gl -S html <div class="beijing"><div id="Chi ...
最新中国地图GeoJson数据（含十段线）
阿里联合高德的数据,最新中国地图的GeoJson数据 https://datav.aliyun.com/portal/school/atlas/area_selector 我自己拿到数据后又调整了一些 ...
pycharts实现地图可视化(世界地图、中国地图、省份地图)
使用之前先导入包,pycharts的1.x版本和0.5不兼容,我的环境之前是1.x版本,所以下面都是以1.x版本为例. from pyecharts.charts import Map from py ...
echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版）
首先,在实现地图之前,需要实现地图的json文件(包含各省份和整个中国地图),文件可从阿里云可视化数据平台下载网址:http://datav.aliyun.com/portal/school/atla ...

echarts 自定义世界地图（含中国地图省份数据）

效果图

主要代码

echarts 自定义世界地图（含中国地图省份数据）相关推荐

最新文章

热门文章