echarts世界地图飞线图

### 使用 ECharts 实现世界地图飞线图 为了使用 ECharts 创建世界地图上的飞线效果，需先确保已正确引入必要的库文件。具体来说，在 HTML 文件头部应加入如下脚本标签来加载 ECharts 库以及世界地图数据集[^1]： ```html <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> ``` 接着定义一个容器用于承载图表，并通过 JavaScript 初始化该实例并配置选项。下面是一个简单的例子展示如何设置基本的地图样式和添加几条随机生成的飞行路径。 #### 完整代码示例 ```javascript // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { backgroundColor: '#404a59', title : { text: 'World Map with Flight Lines', subtext: '', left: 'center', textStyle: { color: '#fff' } }, tooltip : { trigger: 'item' }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['High','Low'], calculable: true, seriesIndex: [1], inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf','#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] } }, geo: { map: 'world', roam: true, // 是否开启鼠标缩放和平移漫游 label: { emphasis: {show: false} }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series : [ { name: 'Flight lines', type: 'lines', coordinateSystem: 'geo', effect: { show: true, period: 6, trailLength: 0.7, symbolSize: 3 }, lineStyle: { width: 0, opacity: 0.5, curveness: 0.2 }, data:[ {fromName:'Beijing', toName:'New York'}, {fromName:'Shanghai', toName:'Los Angeles'}, {fromName:'Guangzhou', toName:'London'} ] }, { name: 'Points', type: 'effectScatter', coordinateSystem: 'geo', rippleEffect: { brushType: 'stroke' }, label: { normal: { formatter: '{b}', position: 'right', offset: [5, 0] } }, itemStyle: { normal: { color: '#ddb926' } }, data: convertData([ {name: 'Beijing', value: [-100.4183, 39.0431]}, {name: 'Shanghai', value: [121.4737, 31.2304]}, {name: 'Guangzhou', value: [113.2644, 23.1291]}, {name: 'New York', value: [-74.0059, 40.7128]}, {name: 'Los Angeles', value: [-118.2437, 34.0522]}, {name: 'London', value: [-0.1257, 51.5085]} ]) } ] }; function convertData(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = data[i].value; res.push({ name: data[i].name, value: geoCoord.concat([data[i].value]) }); } return res; } myChart.setOption(option); ``` 此段代码展示了如何利用 `series` 中的 `lines` 和 `effectScatter` 类型组合起来形成动态的飞行线路效果。其中 `convertData()` 函数负责转换城市名称到地理坐标以便绘制成点位标记。