<!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: {
// 尾迹线条宽度
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：
