效果图
主要代码
依赖echarts.min.jsaxios.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);
