<!DOCTYPE html>
<html>
<head>
<title>openlayers6结合echarts4实现迁徙图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<!-- 引入变量shijie -->
<script src="./datamap.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initData() {
var data = [
{ "name": "拉萨市", "value": ["91.140860000", "29.645571000", 15], "xzqh": "5401", "zxcs": "y" },
{ "name": "昌都市", "value": ["97.175897000", "31.143480000", 50], "xzqh": "5421", "zxcs": "n" },
{ "name": "山南市", "value": ["91.771023000", "29.185499000", 60], "xzqh": "5422", "zxcs": "n" },
{ "name": "日喀则市", "value": ["88.719257000", "29.184578000", 80], "xzqh": "5423", "zxcs": "n" },
{ "name": "那曲市", "value": ["92.345548000", "31.720672000", 40], "xzqh": "5424", "zxcs": "n" },
{ "name": "阿里地区", "value": ["80.044934000", "32.377686000", 30], "xzqh": "5425", "zxcs": "n" },
{ "name": "林芝市", "value": ["94.366439000", "29.664846000", 10], "xzqh": "5426", "zxcs": "n" }
]
initEcharts(data);
}
function initEcharts(convertData) {
convertData.forEach((ele) => {
ele.value[2] = ele.value[2]
})
// 标记点
var geoCoordMap = {
拉萨市: [\'91.140860000\', \'29.645571000\'],
日喀则市: [\'88.719257000\', \'29.184578000\'],
昌都市: [\'97.175897000\', \'31.143480000\'],
林芝市: [\'94.366439000\', \'29.664846000\'],
山南市: [\'91.771023000\', \'29.185499000\'],
那曲市: [\'92.345548000\', \'31.720672000\'],
阿里地区: [\'80.044934000\', \'32.377686000\']
}
// 给value一个随机值
var mapData = convertData.map((val) => {
return {
name: val.name,
value: val.value[2]
}
})
var color1 = [\'#f0ffec\', \'#d2ffc3\', \'#a6f28e\', \'#258c30\', \'#61b8ff\', \'#0000e1\', \'#fa00fa\', \'#be011e\', \'#880015\']
// 设置目标点, 配置线条指向
function convertToLineData(data) {
var res = []
for (var i = 0; i < data.length; i++) {
// 起点
var fromCoord = geoCoordMap[data[i].name]
// 终点,
var toCoord = [\'91.140860000\', \'29.645571000\']
res.push([
{
coord: fromCoord,
value: data[i].value
},
{
coord: toCoord
}
])
}
return res
}
var myChart = echarts.init(document.getElementById(\'map\'))
// 注册地图,传入数据
echarts.registerMap(\'lasa\', shijie)
var optionMap = {
timeline: {
show: false
},
baseOption: {
// 设置地图参数和样式
geo: {
show: true,
map: \'lasa\',
roam: true,
zoom: 0,
// 地图中心点, 可调节显示的偏移量
center: [\'90.140860000\', \'30.645571000\'],
label: {
// 高亮文字隐藏
emphasis: {
show: false
}
},
silent: true,
itemStyle: {
normal: {
borderColor: \'#08ACF0\',
borderWidth: 1,
areaColor: {
type: \'radial\',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,// 0% 处的颜色
color: \'rgba(0, 0, 0, 0)\'
},
{
offset: 1, // 100% 处的颜色
color: \'rgba(0, 0, 0, .3)\'
}
]
},
shadowColor: \'rgba(0, 0, 0, 1)\',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
}
}
}
},
options: [{
grid: {
right: 50
},
xAxis: {
show: false
},
yAxis: {
show: false
},
tooltip: {
trigger: \'item\',
formatter: function(params) {
if (params.seriesType === \'effectScatter\') {
return params.name + \'在线率\' + params.data.value[2] + \'%\'
}
}
},
visualMap: {
type: \'continuous\',
calculable: false,
show: true,
min: 0,
max: 100,
color: color1,
textStyle: {
color: \'#005\'
},
text: [\'100\', \'0\'],
pieces: [
{ min: 0, max: 25 },
{ min: 25, max: 50 },
{ min: 50, max: 55 },
{ min: 55, max: 60 },
{ min: 60, max: 65 },
{ min: 65, max: 70 },
{ min: 70, max: 75 },
{ min: 75, max: 80 },
{ min: 80, max: 100 }
],
left: 50
// top: 0,
// right: 0,
// bottom: 10,
// itemWidth: 10
},
series: [
{
// 坐标点参数和样式
type: \'effectScatter\',
coordinateSystem: \'geo\',
data: convertData,
// symbolSize: function(val) {
// return val[2] / 4
// },
symbolSize: 15,
showEffectOn: \'render\',
rippleEffect: {
brushType: \'stroke\'
},
label: {
normal: {
formatter: \'{b}\',
position: \'right\',
show: true
}
},
itemStyle: {
normal: {
// color: \'#FF4500\',
// shadowBlur: 10,
// shadowColor: \'#FF4500\'
}
}
},
{
// 线条参数和样式
type: \'lines\',
// 变化频率
zlevel: 2,
effect: {
show: true,
// 箭头指向速度，值越小速度越快
period: 4,
// 特效尾迹长度,取值0到1,值越大,尾迹越长 0为没有尾迹特效
trailLength: 0.05,
symbol: \'arrow\',
// 图标大小
symbolSize: 10
},
label: {
emphasis: {
show: false
}
},
lineStyle: {
normal: {
// 尾迹线条宽度
width: 1,
// 尾迹线条透明度
opacity: 1,
// 尾迹线条曲直度 0为直线
curveness: 0.2
}
},
data: convertToLineData(mapData)
}
]
}
]
}
myChart.setOption(optionMap)
}
initData();
</script>
</body>
</html>
效果图：
datamap.js内容：（即变量shijie定义）
https://yun.baidu.com/s/4moGB7gG(源文件分享)
变量shijie：