Pay attention to

Additional quotes needed:

https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js https://www.makeapie.com/dep/echarts/map/js/world.js

code

CSS

#main{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
}
Copy the code

HTML

<div id="main" ></div>
Copy the code

JS

// Const geoCoordMap = {Shanghai ': [120.52, 30.40], Beijing ': [115.25, 39.90], Chongqing ': [107.7539, 30.1904], [24.909912, 60.169095], 'us' : [100.696295, 33.679979],' Japan ': [139.710164, 35.706962],' Korea ': [126.979208, 37.53875], 'Switzerland' : [7.445147, 46.956241], 'German' : [13.402393, 52.518569], 'British' : [0.126608, 51.208425]}; Let CQData = [[{name: 'chongqing'}, {name: "Britain", the value: 70}], [{name: 'chongqing'}, {name: "Finland," value: 80}], [{name: }, {value: 80}]; Let BJData = [[{name: "Beijing"}, {name: "Japan", the value: 30}], [{name: "Beijing"}, {name: "Germany", value: 80}]]. Let SHData = [[{name: "Shanghai"}, {name: "South Korea", value: 80}]]. Function convertData(data) {let res = []; for (let i = 0; i < data.length; i++) { let dataItem = data[i]; let [fromCoord, toCoord] = [geoCoordMap[dataItem[1].name], geoCoordMap[dataItem[0].name]]; if (fromCoord && toCoord) res.push([fromCoord, toCoord]); } return res; } let [series2d, series3d] = [ [], [] ]; [[' CQData ', 'BJData ',' SHData '].foreach (function(item) {// series2d.push({type: 'effectScatter', coordinateSystem: 'geo', zlevel: 3, rippleEffect: { brushType: 'stroke' }, label: { fontSize: 24, show: true, position: 'right', formatter: '{b}'}, itemStyle: {normal: {color: 'rgba(250,250,250,0.8)'}}, data: item[1].map(function(dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name], symbolSize: dataItem[1].value / 4 }; }) }, { type: 'effectScatter', coordinateSystem: 'geo', zlevel: 3, rippleEffect: { brushType: 'stroke' }, label: { show: true, position: 'left', fontSize: 18, formatter: '{b}' }, itemStyle: { normal: { color: '#fff' } }, data: [{ name: item[0], value: geoCoordMap[item[0]], symbolSize: parseInt(Math.random() * 20 + 10), label: { position: 'right' } }] }); Series3d. push({type: 'lines3D', effect: {show: true, period: 3, trailLength: 0.1}, lineStyle: {color: Width: 1.5, opacity: 0.6}, Tooltip: {show: false}, data: convertData(item[1])}, {type: 'scatter3D', name: 'location', coordinateSystem: 'globe', blendMode: 'lighter', symbolSize: 10, itemStyle: { color: Opacity: 1}, label: {show: true, formatter: param => param.data.name}, data: [{name: 'China ', value: [116.4551, 40.2539, 0]}]})}); let chart = echarts.init(document.createElement('canvas'), null, { width: 4096, height: 2048 }); // Add 2d map + scatter chart. SetOption ({backgroundColor: '#040438', tooltip: {backgroundColor: 'red', alwaysShowContent: true }, geo: { type: 'map', map: 'world', left: 0, top: 0, right: 0, bottom: 0, zoom: 0, boundingCoords: [[-180, 90], [180, -90], roam: false, itemStyle: {border-color: RGB (38 122 219/0.4), borderWidth: 1, areaColor: "RGB (4 4 63/0.6)",}, label: {fontSize: 24}}, series: series2d}); // Option = {backgroundColor: 'height ', globe: {baseTexture: chart, top: 'middle', left: 'center', displacementScale: 0, shading: 'color', viewControl: { distance: 240, autoRotate: false } }, roam: true, series: series3d }; var myChart = echarts.init(document.getElementById('main')) myChart.setOption(option, true);Copy the code

The sample

reference

Echarts.apache.org/zh/index.ht…