效果图
安装的依赖
npm i echarts echarts-gl -S
html
<div class="beijing"><div id="ChinaMap"></div><div id="WorldMap"></div><div id="CityMap"></div></div>
js
import echartsGL from "echarts-gl";var echarts = require("echarts");require("echarts/map/js/china");require("echarts/map/js/world");// 河北省require("echarts/map/js/province/hebei");// 其他省require("echarts/map/js/province/anhui");require("echarts/map/js/province/aomen");require("echarts/map/js/province/heilongjiang");require("echarts/map/js/province/henan");require("echarts/map/js/province/hubei");require("echarts/map/js/province/hunan");require("echarts/map/js/province/jiangsu");require("echarts/map/js/province/jiangxi");require("echarts/map/js/province/jilin");require("echarts/map/js/province/liaoning");require("echarts/map/js/province/neimenggu");require("echarts/map/js/province/beijing");require("echarts/map/js/province/ningxia");require("echarts/map/js/province/qinghai");require("echarts/map/js/province/shandong");require("echarts/map/js/province/shanghai");require("echarts/map/js/province/shanxi");require("echarts/map/js/province/shanxi1");require("echarts/map/js/province/sichuan");require("echarts/map/js/province/taiwan");require("echarts/map/js/province/tianjin");require("echarts/map/js/province/xianggang");require("echarts/map/js/province/chongqing");require("echarts/map/js/province/xinjiang");require("echarts/map/js/province/xizang");require("echarts/map/js/province/yunnan");require("echarts/map/js/province/zhejiang");require("echarts/map/js/province/fujian");require("echarts/map/js/province/gansu");require("echarts/map/js/province/guangdong");require("echarts/map/js/province/guangxi");require("echarts/map/js/province/guizhou");require("echarts/map/js/province/hainan");export default {data() {return {//map3D 配置项开始autoRotate: false, //是否开启视角绕物体的自动旋转查看。autoRotateDirection: "cw", //物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。autoRotateSpeed: 20, //旋转速度autoRotateAfterStill: 3, //在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。damping: 0.8, //鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。rotateSensitivity: 5, //旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。0不能旋转distance: 92, //地图大小 值越大-地图越小，值越小-地图越大alpha: 45, //垂直翻转角度beta: 0, //视角绕 y 轴，即左右旋转的角度。zoomSensitivity: 3, //缩放操作的灵敏度，值越大越灵敏。0表示不能缩放center: [0, -10, 0], //[ 18, 10, 0 ]视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。//map3D 配置项结束//lines3D 轨迹线数据datas: [{fromName: "北京",toName: "宁波",coords: [[116.24, 39.55, 1],[114.577059, 38.153047, 1],],},{fromName: "上海",toName: "宁波",coords: [[121.46, 31.28],[114.577059, 38.153047, 1],],},{fromName: "河北",toName: "宁波",coords: [[116.21, 39.44],[114.577059, 38.153047, 1],],},{fromName: "山西",toName: "宁波",coords: [[111.95, 37.65],[114.577059, 38.153047, 1],],},{fromName: "内蒙古",toName: "宁波",coords: [[111.764469, 40.859042],[114.577059, 38.153047, 1],],},{fromName: "辽宁",toName: "宁波",coords: [[122.42, 41.29],[114.577059, 38.153047, 1],],},{fromName: "吉林",toName: "宁波",coords: [[126.32, 43.68],[114.577059, 38.153047, 1],],},{fromName: "黑龙江",toName: "宁波",coords: [[128.34, 48.85],[114.577059, 38.153047, 1],],},{fromName: "江苏",toName: "宁波",coords: [[119.26, 33.04],[114.577059, 38.153047, 1],],},{fromName: "浙江",toName: "宁波",coords: [[120.15, 29.28],[114.577059, 38.153047, 1],],},{fromName: "安徽",toName: "宁波",coords: [[117.28, 31.86],[114.577059, 38.153047, 1],],},{fromName: "福建",toName: "宁波",coords: [[118.31, 26.07],[114.577059, 38.153047, 1],],},{fromName: "山西",toName: "宁波",coords: [[115.89, 27.97],[114.577059, 38.153047, 1],],},{fromName: "山东",toName: "宁波",coords: [[118.01, 36.37],[114.577059, 38.153047, 1],],},{fromName: "河南",toName: "宁波",coords: [[113.46, 34.25],[114.577059, 38.153047, 1],],},{fromName: "湖北",toName: "宁波",coords: [[112.29, 30.98],[114.577059, 38.153047, 1],],},{fromName: "湖南",toName: "宁波",coords: [[112.08, 27.79],[114.577059, 38.153047, 1],],},{fromName: "广东",toName: "宁波",coords: [[113.98, 22.82],[114.577059, 38.153047, 1],],},{fromName: "广西",toName: "宁波",coords: [[108.67, 23.68],[114.577059, 38.153047, 1],],},{fromName: "海南",toName: "宁波",coords: [[110.03, 19.33],[114.577059, 38.153047, 1],],},{fromName: "四川",toName: "宁波",coords: [[103.36, 30.65],[114.577059, 38.153047, 1],],},{fromName: "贵州",toName: "宁波",coords: [[106.91, 26.67],[114.577059, 38.153047, 1],],},{fromName: "云南",toName: "宁波",coords: [[101.71, 24.84],[114.577059, 38.153047, 1],],},{fromName: "西藏",toName: "宁波",coords: [[89.13, 31.76],[114.577059, 38.153047, 1],],},{fromName: "陕西",toName: "宁波",coords: [[108.94, 35.86],[114.577059, 38.153047, 1],],},{fromName: "甘肃",toName: "宁波",coords: [[100.82, 38.05],[114.577059, 38.153047, 1],],},{fromName: "青海",toName: "宁波",coords: [[96.07, 35.62],[114.577059, 38.153047, 1],],},{fromName: "宁夏",toName: "宁波",coords: [[106.27, 37.56],[114.577059, 38.153047, 1],],},{fromName: "新疆",toName: "宁波",coords: [[84.61, 42.89],[114.577059, 38.153047, 1],],},{fromName: "天津",toName: "宁波",coords: [[117.44, 39.52],[114.577059, 38.153047, 1],],},{fromName: "重庆",toName: "宁波",coords: [[107.51, 30.33],[114.577059, 38.153047, 1],],},{fromName: "香港",toName: "宁波",coords: [[114.17, 22.38],[114.577059, 38.153047, 1],],},{fromName: "澳门",toName: "宁波",coords: [[113.55, 22.17],[114.577059, 38.153047, 1],],},{fromName: "台湾",toName: "宁波",coords: [[121.01, 23.54],[114.577059, 38.153047, 1],],},],myChart_a: {},};},methods: {// 世界地图initWorldMap() {var myChart = echarts.init(document.getElementById("WorldMap"));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.": "圣文森特和格林纳丁斯",};let option = {tooltip: {trigger: "item",formatter: function (params) {console.log(params);if (params.name) {return (params.name +" : " +(isNaN(params.value) ? 0 : parseInt(params.value)));}},},// 视觉映射组件visualMap: {show: false,inRange: {color: ["#9fb5ea","#e6ac53","#74e2ca","#85daef","#9feaa5","#5475f5",], // 图元的颜色},},geo3D: {map: "world",show: false,top: "0",viewControl: {autoRotate: this.autoRotate,distance: this.distance, //地图大小 值越大-地图越小，值越小-地图越大alpha: this.alpha, //垂直翻转角度beta: this.beta,zoomSensitivity: this.zoomSensitivity,center: this.center,autoRotateDirection: this.autoRotateDirection,autoRotateSpeed: this.autoRotateSpeed,autoRotateAfterStill: this.autoRotateAfterStill,damping: this.damping,rotateSensitivity: this.rotateSensitivity,},emphasis: {show: false,label: {formatter: function (params) {areaStr = params.name;return params.name;},show: true,textStyle: {color: "#fff",fontSize: 26,backgroundColor: "#fff",},},},},series: [{name: "World Population ()",type: "map",mapType: "world",roam: true,itemStyle: {areaColor: "#7B68EE", // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用borderWidth: 0.5, // 描边线宽 为 0 时无描边borderColor: "#000", // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数borderType: "solid", // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'emphasis: {label: {show: true } },},label: {show: false, // 是否显示对应地名},// data,data: [{name: "萨摩亚", value: 28397 },{name: "乌克兰", value: 19549.124 },{name: "越南", value: 3150.143 },{name: "新西兰", value: 8441.537 },{name: "墨西哥", value: 40374.224 },{name: "美国", value: 2963.496 },{name: "巴拿马", value: 268.065 },{name: "澳大利亚", value: 22404.488 },],nameMap: nameMap,},],};myChart.setOption(option);},//中国地图initChinaMap() {this.myChart_a = echarts.init(document.getElementById("ChinaMap"));var areaStr = "";var series1 = [];var option = {};series1.push({type: "map3D",map: "china",name: "china_3DMap",height: "auto",zlevel: 3,boxWidth: "auto",boxHeight: "auto",boxDepth: "auto",regionHeight: 3,top: "0",instancing: false, //instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。//environment: 'background.png',viewControl: {autoRotate: this.autoRotate,distance: this.distance, //地图大小 值越大-地图越小，值越小-地图越大alpha: this.alpha, //垂直翻转角度beta: this.beta,zoomSensitivity: this.zoomSensitivity,center: this.center,autoRotateDirection: this.autoRotateDirection,autoRotateSpeed: this.autoRotateSpeed,autoRotateAfterStill: this.autoRotateAfterStill,damping: this.damping,rotateSensitivity: this.rotateSensitivity,},itemStyle: {areaColor: "#32b3e9",opacity: 1,borderWidth: 0.5,borderColor: "#eee",},emphasis: {//当鼠标放上去 地区区域是否显示名称label: {show: false,textStyle: {color: "#fff",fontSize: 16,backgroundColor: "rgba(0,23,11,0)",},},itemStyle: {areaColor: "#e3c854",opacity: 1,},},light: {//光照阴影main: {color: "#fff", //光照颜色 1d5e98intensity: 1, //光照强度shadowQuality: "high", //阴影亮度shadow: false, //是否显示阴影alpha: 55,beta: 10,},ambient: {intensity: 0.22,},},// data: arrData, //this.arrSheng2data: [{name: "广东",value: 20,},{name: "北京",value: 20,},{name: "上海",value: 20,},{name: "杭州",value: 20,},],},{type: "lines3D",name: "轨迹线",polyline: false,coordinateSystem: "geo3D",zlevel: 10, //设置这个才会有轨迹线的小尾巴effect: {show: true,period: 8,trailLength: 0.3,trailColor: "#50f80d",color: "#50f80d", //流动点颜色symbol: "arrow",symbolSize: 10,},lineStyle: {normal: {color: "#cbe0ee", //线条颜色width: 1.5,curveness: 0.5,shadowColor: "#cbe0ee",},},blendMode: "lighter",data: this.datas,});option = {title: {// text: '测试bar3D、scatter3D、geo3D',x: "left",top: "10",textStyle: {color: "#000",fontSize: 14,},},visualMap: {show: false,},geo3D: {map: "china",show: false,top: "0",viewControl: {autoRotate: this.autoRotate,distance: this.distance, //地图大小 值越大-地图越小，值越小-地图越大alpha: this.alpha, //垂直翻转角度beta: this.beta,zoomSensitivity: this.zoomSensitivity,center: this.center,autoRotateDirection: this.autoRotateDirection,autoRotateSpeed: this.autoRotateSpeed,autoRotateAfterStill: this.autoRotateAfterStill,damping: this.damping,rotateSensitivity: this.rotateSensitivity,},emphasis: {show: false,label: {formatter: function (params) {areaStr = params.name;return params.name;},show: true,textStyle: {color: "#fff",fontSize: 26,backgroundColor: "#fff",},},},},//鼠标移入后的数据tooltip: {show: true,trigger: "item",formatter: (p) => {areaStr = p.name;var val = p.value ? p.value : 0;let txtCon ="<div style='text-align:center'>" +p.name +":<br />客流量:" +val +"</div>";return txtCon;},},series: series1,visualMap: {show: true,seriesIndex: 0,dimension: 0, //取第一维度,批次//left:10,//top:10,right: 10,bottom: 10,zlevel: 10,calculable: true,min: 1,max: 30500,inRange: {//由低到高color: ["#3096fa", "#61ebff"],},textStyle: {color: "#fff",fontSize: 14,},},};this.myChart_a.setOption(option);// this.myChart_a.getZr().on("click", () => {// if (areaStr) {//this.getCityData(areaStr);// } else {// }// });},//省内地图（河北省）initMapCity() {let cityName = "河北";let arrData = [{name: "石家庄", value: 300 }];var option1 = {title: {x: "left",top: "10",textStyle: {color: "#000",fontSize: 14,},},visualMap: {show: false,},geo3D: {map: "china",show: false,top: "0",itemStyle: {areaColor: "#32b3e9",opacity: 1,borderWidth: 0.4,borderColor: "#fff",},emphasis: {//当鼠标放上去 地区区域是否显示名称label: {formatter: function (params) {return params.name;},show: true,textStyle: {color: "#fff",fontSize: 16,backgroundColor: "rgba(0,23,11)",},},},light: {//光照阴影main: {color: "#fff", //光照颜色intensity: 1.2, //光照强度shadowQuality: "high", //阴影亮度shadow: true, //是否显示阴影alpha: 55,beta: 10,},ambient: {intensity: 0.3,},},//地图大小缩放viewControl: {projection: "perspective",autoRotate: false,damping: 0,alpha: this.alpha,rotateSensitivity: 1, //旋转操作的灵敏度rotateMouseButton: "left", //旋转操作使用的鼠标按键zoomSensitivity: 2, //缩放操作的灵敏度panSensitivity: 1, //平移操作的灵敏度panMouseButton: "right", //平移操作使用的鼠标按键distance: this.distance, //默认视角距离主体的距离center: [-3, -16, -10],animation: true,animationDurationUpdate: 1000,animationEasingUpdate: "cubicInOut",},},//鼠标移入后的数据tooltip: {show: true,trigger: "item",formatter: (p) => {var val = p.value ? p.value : 0;var txtCon ="<div style='text-align:center'>" +p.name +":<br />车流量:" +val +"</div>";return txtCon;},},visualMap: {show: false,seriesIndex: 0,dimension: 0, //取第一维度,批次//left:10,//top:10,right: 10,bottom: 10,zlevel: 10,calculable: true,min: 1,max: 500,inRange: {//由低到高color: ["#1d5e98", "#E57051"],},textStyle: {color: "#fff",fontSize: 14,},},series: [{type: "map3D",map: cityName,name: "china_3DMap",height: "auto",zlevel: 3,boxWidth: "auto",boxHeight: "auto",boxDepth: "auto",regionHeight: 3,//'color' 只显示颜色，不受光照等其它因素的影响。//'lambert' 通过经典的 lambert 着色表现光照带来的明暗//'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升//shading:'lambert',top: "0",instancing: false, //instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。//environment: 'background.png',viewControl: {autoRotate: false,distance: 120, //地图大小 值越大-地图越小，值越小-地图越大alpha: this.alpha, //垂直翻转角度beta: this.beta,zoomSensitivity: this.zoomSensitivity,center: this.center,autoRotateDirection: this.autoRotateDirection,autoRotateSpeed: this.autoRotateSpeed,autoRotateAfterStill: this.autoRotateAfterStill,damping: this.damping,rotateSensitivity: this.rotateSensitivity,},itemStyle: {areaColor: "#32b3e9",opacity: 1,borderWidth: 0.5,borderColor: "#ccc",},emphasis: {//当鼠标放上去 地区区域是否显示名称label: {show: false,textStyle: {color: "#fff",fontSize: 16,backgroundColor: "rgba(0,23,11,0)",},},itemStyle: {areaColor: "#e3c854",opacity: 1,},},light: {//光照阴影main: {color: "#fff", //光照颜色 1d5e98intensity: 1, //光照强度shadowQuality: "high", //阴影亮度shadow: false, //是否显示阴影alpha: 55,beta: 10,},ambient: {intensity: 0.22,},},data: arrData,},],};var echartsShi = echarts.init(document.getElementById("CityMap"));option1.series[0].map = cityName;echartsShi.clear();echartsShi.setOption(option1, true);},},mounted() {this.initChinaMap();this.initWorldMap();this.initMapCity();},};
css
.beijing {background: rgb(51, 153, 148);opacity: 0.5;display: flex;height: 1000px;}#ChinaMap {width: 33%;}#WorldMap {width: 33%;}#CityMap {width: 33%;}
