echarts实现地图飞线
时间: 2025-01-10 14:53:09 浏览: 157
### 如何使用 ECharts 实现地图飞线效果
为了实现在 ECharts 中的地图上显示飞行航线的效果,可以利用 `lines` 类型系列来绘制连接不同地理坐标的线条。下面是一个详细的说明以及代码示例。
#### 准备工作
确保已经引入了 ECharts 库,并加载了中国地图或其他所需地区的地图数据[^1]:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
```
接着初始化图表实例并设置全局配置项和组件选项:
```javascript
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// 加载地图
myChart.showLoading();
$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000.json', function (chinaJson) {
echarts.registerMap('China', chinaJson);
myChart.hideLoading();
// 设置图形的option参数
option = {
backgroundColor: '#404a59',
title: {
text: 'ECharts 地图飞线特效展示',
subtext: '',
top: 'top',
left: 'center'
},
tooltip: {
trigger: 'item'
},
geo: {
map: 'China',
roam: true,
emphasis: {
areaColor: '#F3B329',
borderColor: 'rgb(7,50,85)',
itemStyle: {
color: '#F3B329'
}
}
},
series: [
{
name: 'Flight Lines',
type: 'lines',
coordinateSystem: 'geo',
symbol: ['none', 'arrow'],
lineStyle: {
width: 1,
opacity: 0.6,
curveness: 0.2
},
data: generateData()
}
]
};
myChart.setOption(option);
});
function generateData() {
var data = [];
const cities = [['北京', [116.46, 39.92]], ['上海', [121.48, 31.22]]];
for (let i = 0; i < cities.length - 1; ++i) {
let fromCityCoord = cities[i][1];
let toCityCoord = cities[i + 1][1];
data.push({
coords: [fromCityCoord, toCityCoord],
value: Math.random() * 1000
});
}
return data;
}
```
上述代码片段展示了如何创建一个简单的飞线动画,在两个城市之间画出带有箭头指示方向的曲线路径。通过调整 `generateData()` 方法中的城市列表,可以根据实际需求自定义起点和终点位置。
阅读全文
相关推荐















