先上圖，要不感覺沒有說服力：
飛線圖應該是大屏中很常見的一種了，通常你可以很輕易的用datav做一個飛線圖，而且datav做的大屏逼格真的很高，本身也是開源免費的項目，開箱即用，上手簡單……行了回歸正題，我們使用echarts自己配置一個飛線圖。當然echarts配置起來也不復雜，只要查看下面對應幾個屬性的配置就ok了
- geo
- serise 里的effectScatter
- serise 里的lines
三個配置，geo畫地圖，effectScatter在地圖上畫散點圖，lines畫線集，熟悉echarts配置項的看到這里基本就不用看了，自己看下配置文檔馬上就能擼一個出來，接下來我們按部就班把上面那個例子擼出來。
1、基礎環境准備
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛線圖</title>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
background-color:#2F4056;
}
</style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
<script type="text/javascript">
const chart = echarts.init(document.getElementById('chart-box'));
const xhr = new XMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data = JSON.parse(xhr.responseText);
} else {
alert(xhr.status);
}
}
</script>
</body>
這里為了簡便處理，直接引用cdn上的echarts和datav官方的地圖json文件，當然地圖json文件也可以從http://geojson.io/#map=12/30.2275/120.1777獲得；
好了，上面代碼已經初始化了chart容器，然后請求獲取了雲南省地圖json數據
2、畫地圖
echarts.registerMap('yns', data);
const option ={
title: {
text: '雲南省',
},
geo: {
map: 'yns',
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: false,
layoutSize: "90%",
zoom: 1,
label: {
normal: {
show: true,
textStyle:{
fontSize:12,
color: '#43D0D6'
}
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
}
},
emphasis: {
areaColor: '#FFB800',
label:{
show:false
}
}
}
}
chart.setOption(option);
好了，這個geo配置已經能畫出一個完整的雲南地圖了，這里因為要在地圖上畫線集和散點，所畫地圖要用geo而不是serise的map
3、配置散點和線集，具體的配置項的含義請參考echarts官網，下面附上完整代碼，此代碼直接復制粘在html，在有網絡的環境下打開就能運行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛線圖</title>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
background-color:#2F4056;
}
</style>
</head>
<body>
<div id="chart-box" style="width:100%; height:100%;"></div>
<script type="text/javascript">
const chart = echarts.init(document.getElementById('chart-box'));
const xhr = new XMLHttpRequest();
xhr.open('get','https://geo.datav.aliyun.com/areas/bound/530000_full.json',true)
xhr.send(null)
xhr.onreadystatechange = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
const data = JSON.parse(xhr.responseText);
console.log(Object.prototype.toString(data))
const coord = data.features.map(val => {
return {
name:val.properties.name,
value:val.properties.center
}
})
const lines_coord = [];
coord.forEach((v,index)=> {
index > 0 && lines_coord.push({
coords:[v.value,coord[0].value]
})
})
//地市取簡稱
data.features.forEach(v => {
v.properties.name = v.properties.name.indexOf('版納')>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
})
echarts.registerMap('yns', data);
const option ={
title: {
text: '雲南省',
},
geo: {
map: 'yns',
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: false,
layoutSize: "90%",
zoom: 1,
label: {
normal: {
show: true,
textStyle:{
fontSize:12,
color: '#43D0D6'
}
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
}
},
emphasis: {
areaColor: '#FFB800',
label:{
show:false
}
}
},
series: [
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:8,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
itemStyle:{
color:'#FFB800',
opacity:1
},
data:coord.slice(1)
},
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:12,
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle:{
color:'#FF5722',
opacity:1
},
data:coord.slice(0,1)
},
{
type:'lines',
coordinateSystem:'geo',
zlevel: 15,
effect: {
show: true, period: 5, trailLength: 0, symbol: 'arrow', color:'#01AAED',symbolSize: 8,
},
lineStyle: {
normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
},
data:lines_coord
}
]
}
chart.setOption(option);
chart.on('click', function (params) {
console.log(params);
});
} else {
alert(xhr.status);
}
}
</script>
</body>