Take a look at the renderings first

The new HTML

 <div id="flying-lines" class="pt-5"></div>
Copy the code

China. json To obtain the address

http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
Copy the code

Create a new JS file (using jquery)

$(function () { "use strict" $.ajax({ url: 'https://geo.datav.aliyun.com/areas_v2/bound/100000.json', success: function(data) { var flyingLines = document.getElementById('flying-lines') var chart = echarts.init(flyingLines) Echarts.registermap (' China ', data) // registerMap(' China ', data) Var coor = [] for(var I = 0; var coor = [] for(var I = 0; i< areaIndex.length; i++) { coor.push({ name: data.features[areaIndex[i]].properties.name, value: data.features[areaIndex[i]].properties.center }) } var lines_coord = [] for(var i = 0; i< coor.length; i++) { if(coor[i].value) { lines_coord.push({ coords: [coor[I]. Value, [117.137891,34.302287]]})} var series = [{type:'effectScatter', coordinateSystem: 'geo', zlevel: 18, symbolSize: 4, rippleEffect: { period: 4, brushType: 'stroke', scale: 4 }, itemStyle:{ color:'#1A8CF2', opacity:1 }, data: coor }, { type:'lines', coordinateSystem:'geo', zlevel: 15, effect: { show: true, period: 8, // constantSpeed: 20, trailLength: .1, symbol: Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0 {type: 'linear', x: 0, y: 0, x2: 0, y2:1, colorStops: [{offset: 0, color: '#1A92FF' // 0% of the color}, {offset: 1, color: '#8be1f4' // 100% of the color}], global: false // default false}}}, data: lines_coord } ] // coord, value var option ={ geo: { map: 'china', zlevel: 10, show: true, layoutCenter: ['50%', '50%'], roam: false, layoutSize: "90%", zoom: 1, label: { normal: { show: False, textStyle:{fontSize:12, color: '#6d3142'}}, itemStyle: {normal: {color: {type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorstop: [{offset: 0, color: '#071E39' // 0% of the color}, {offset: 1, color: #071E39' // 0% of the color}, {offset: 1, color: #071E39' // 0% of the color}, '#17436A' // color at 100%}], global: false // Default is false}, borderWidth:.5, borderColor: '#1B72C1', shadowColor: '#4E779C', shadowBlur: 8}}, Emphasis :{label:{show:false}, itemStyle: {areaColor: {type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorstop: [{offset: 0, color: '#17436A' // 0% of the color}, {offset: 1, color: #17436A' // 0% of the color}, '#5FB7FF' // color at 100%}], global: false // default false}}}}, series: series} chart.setoption (option); }})})Copy the code

Any questions are welcome to correct ~