<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>飞线title>
<style type="text/css">
body {
margin: 0;
border: 0;
overflow: hidden;
}
#map_canvas {
width: 100%;
height: 100%;
position: absolute;
}
style>
head>
<body>
<div id="container" style="height: 100%">div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js">script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=秘钥">script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/extension/bmap.js">script>
<script>
var chinaGeoCoordMap = {
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891]
}
const dom = document.getElementById('container')
const myChart = echarts.init(dom)
let option = null
const startPoint = {
x: (116.4551 + 121.4648) / 2,
y: (40.2539 + 31.2891) / 2
}
const bmap = {
center: [startPoint.x, startPoint.y],
zoom: 6,
roam: true,
mapStyleV2: {
styleId: '1c9508432f1bd060b4485d79045d5bdd'
}
}
const planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
const series = [
{
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
show: true,
width: 1,
opacity: 1,
curveness: 0.3,
color: '#fcdd6e'
},
normal: {
color: '#a6c84c',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: [
{
fromName: '北京',
toName: '上海',
coords: [
[116.4551, 40.2539],
[121.4648, 31.2891]
]
}
]
},
{
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 3,
color: '#38ff85'
},
label: {
normal: {
show: false,
position: 'right',
offset: [0, 0],
color: 'red',
formatter: function (params) {
return params.data.name
},
fontSize: 10
},
emphasis: {
show: false,
color: '#38ff85'
}
},
symbol: 'circle',
symbolSize: 5,
itemStyle: {
color: '#38ff85'
},
data: Object.keys(chinaGeoCoordMap).map(function (dataItem) {
return {
name: dataItem,
value: chinaGeoCoordMap[dataItem].concat([0])
}
})
}
]
option = {
bmap: bmap,
series: series
}
myChart.setOption(option)
script>
body>
html>
