简介
在可视化大屏中碰到要绘制飞线图的需求,采用Echarts
来实现,但是Echarts
的世界地图数据会缺失部分数据
,引入其他来源
的话在网速不好的情况下地图瓦片加载又会很慢,体验感极差;最终通过改造Echarts
地图数据实现了如下效果:
详细代码如下
引入Api
import echarts from 'echarts';
// 世界地图数据(更改后的JSON数据)
import world from './geojson/world.json'
开始使用
- 初始化Echarts
// 注册世界地图数据
echarts.registerMap('world', world)
// 初始化
let chartDom = document.getElementById('main')
if(this.myChart != null && this.myChart != '' && this.myChart != undefined) {
this.myChart.dispose()
}
this.myChart = echarts.init(chartDom)
- 创建配置项
// 小飞机图标
let 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';
// 线路坐标(模拟数据)
let LineData = [
{
'fromName': '加拿大温哥华',
'toName': '咸阳国际机场',
'coords': [
[
-123.023921,
49.311753
],
[
108.76463,
34.44212
]
],
value: 123
},
]
// 线路起点坐标
let LineEffectScatterData = []
// 线路终点坐标
let effectScatterData = []
LineData.map((item) => {
// 线路起点坐标
let objStart = {
name: item.fromName,
value: item.coords[0]
}
LineEffectScatterData.push(objStart)
// 线路终点坐标
let objEnd = {
name: item.toName,
value: item.coords[1]
}
effectScatterData.push(objEnd)
})
let series = [];
series.push(
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
//飞机的速度 这里是s单位
period: 6,
trailLength: 0,
symbol: planePath,
// 飞机大小
symbolSize: 16,
color:'#ff8800',
},
lineStyle: {
normal: {
color:'#8A91BA',
type:'dashed', // 虚线
// 线条宽度
width: 2,
opacity: 1,
curveness: 0.2, // 弯曲度
},
emphasis: {
color: '#FF9600' //飞线悬浮颜色
}
},
label: {
normal: {
show: false,
position: 'middle',
formatter: '{b}'
}
},
data: LineData
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制,值越大波纹越大
},
label: {
normal: {
show: false,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: '{b}', //圆环显示文字
textStyle: {
color: 'red'
}
},
// emphasis: {
// show: true
// }
},
symbol: 'circle',
symbolSize: function(val) {
return 10; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#E0C896',
}
},
data: LineEffectScatterData
},
//终点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: false,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: '', //圆环显示文字
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 10; //圆环大小
},
itemStyle: {
normal: {
show: true,
color: '#FF9300',
}
},
data: effectScatterData
}
);
let option;
option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
padding: 0,
formatter: function(params, ticket, callback) {
if (params.seriesType == 'effectScatter') {
// 这里可根据自己需要自定义
// 起点终点悬浮效果
return params.marker+params.data.name;
} else if (params.seriesType == 'lines') {
// 这里可根据自己需要自定义
// 飞线悬浮效果
return params.data.fromName + ' -> ' + params.data.toName + '<br />' + params.data.value;
}
return params.name;
},
},
geo: {
map: 'world',
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 3
},
layoutCenter: ['50%', '52%'], //地图位置
layoutSize: '130%',
itemStyle: {
normal: {
color: '#6073ae', //地图背景色
borderColor: '#6073ae' //省市边界线
},
emphasis: {
color: '#6073ae' //悬浮背景
}
},
// 设置中国地图边界线
regions: [
{
name: 'China',
itemStyle: {
normal: {
borderColor: '#fedc70',
borderWidth: 1,
areaColor: '#6073ae',
// shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0
},
emphasis: {
color: '#6073ae' //悬浮背景
}
}
}
]
},
series: series
};
- 加载配置
option && this.myChart.setOption(option);
window.addEventListener('resize', () => {
this.myChart.resize()
})
地图颜色等配置可自行修改为所需的配置
所需要的world.json
文件可在博主资源下载中心自行下载
欢迎指正交流