简介ECharts飞线图示例包主要面向前端开发者和数据可视化爱好者基于ECharts库实现地图飞线效果适用于物流路线、人员流动、网络流量等方向性数据的可视化展示可帮助开发者快速搭建动态数据流向视图。压缩包共4个文件包括2个脚本分别为ECharts开发版与压缩版核心库、1个数据文件提供地图区域边界与起始点坐标和1个页面入口负责加载资源并渲染图表整体大小约1.06MB便于快速部署和二次修改。已有447人学习适合希望用动态效果呈现数据流向的初中级开发者。通过该示例可掌握飞线颜色、宽度、动画速度以及起终点坐标的配置方法并理解ECharts中地理坐标系与系列数据配合的基本思路数据文件可直接替换配合图片等静态资源可灵活扩展应用场景是搭建数据大屏或分析报告时的实用参考。1. ECharts 飞线图不是「会动的线」坐标、动效、性能才是真正的坎提到 ECharts 飞线图很多人第一反应是地图上会动的线。我第一次做是在某公司的物流大屏上需求就一句话让货到哪儿线就亮到哪儿。真上手才发现ECharts 飞线图也叫迁移轨迹图、迁徙图的难点根本不在动画而在三件事坐标对不对、动效自然不自然、数据多了卡不卡。下面按我实际做过的路线把坐标系选择、动效参数、高频翻车点、框架接入和性能兜底一条线讲完。适合正在做可视化大屏、想把区域间流量关系画出来的开发者新手能照着复现熟手可以跳着看参数和排障段。2. 跑通第一张飞线图geo 坐标系与 lines 系列的最小配置2.1 为什么飞线图必须挂在 geo 上坐标系选型决定线条能不能画对ECharts 里能画线的系列不止一个。line 系列走的是直角坐标系grid 加 xAxis、yAxis看起来也能画曲线但用在飞线图上有两个硬伤一是没有地图底图业务语义直接丢了一半二是没有经纬度投影你得自己把每个城市坐标换算成像素值地图一旦缩放拖拽所有点全部错位。所以飞线图的正解不是用 line 硬画而是用 lines 系列挂到 geo 坐标系上。geo 在这里承担两件事把经纬度投影成屏幕坐标以及绘制地图底图。lines 系列声明coordinateSystem: geo之后data 里的 coords 才会被解释成经纬度轨迹。这是飞线图能飞起来的前提也是后面所有排查工作的共同基础。有人会问用 map 系列当底图再叠加 lines 行不行。map 系列本质是一个展示用的图形系列不是坐标系它不能给其他系列做坐标投影而 geo 是组件天然能被 lines、effectScatter、scatter 这些系列引用。所以标准做法是geo 做底图和坐标系lines 和 effectScatter 引用同一个 geo。记住这一点后面百分之九十的配置问题都不会偏。2.2 最小可运行配置一份直接能复制的 lines effectScatter 示例先给一份能直接跑起来的最小配置。假设你已经通过 npm 安装并引入了 ECharts也准备好了区域 GeoJSON 数据。import * as echarts from echarts; // 1. 注册地图geoJson 是你下载的区域 GeoJSON注册名可自定义 echarts.registerMap(myRegion, geoJson); const chart echarts.init(document.getElementById(flyline)); const option { geo: { map: myRegion, roam: true, // 允许缩放拖拽大屏展示常关掉 itemStyle: { areaColor: #1a2a4a, // 区域填充色 borderColor: #3b5b8a // 区域边界色 } }, series: [ { type: lines, // 飞线本体 id: lines-main, coordinateSystem: geo, // 关键把线挂到 geo 上 data: [ { coords: [[110.2, 30.1], [98.6, 24.9]] }, // [起点经纬度, 终点经纬度] { coords: [[110.2, 30.1], [120.8, 28.2]] } ], lineStyle: { color: #ffd700, width: 1.5, opacity: 0.6 }, effect: { show: true, period: 3, // 粒子跑完全程的秒数 trailLength: 0.4, // 拖尾长度取值 0~1 symbol: circle, // 粒子形状 symbolSize: 5 } }, { type: effectScatter, // 起终点发光点 id: points-main, coordinateSystem: geo, data: [ { name: 站点A, value: [110.2, 30.1, 20] }, { name: 站点B, value: [98.6, 24.9, 12] }, { name: 站点C, value: [120.8, 28.2, 8] } ], symbolSize: function (val) { return val[2]; // value 数组第三位是数值 }, rippleEffect: { brushType: stroke // 波纹描边模式视觉更轻盈 } } ] }; chart.setOption(option);这段代码的逻辑分四层。第一层 registerMap 把 GeoJSON 注册进去注册名必须和后面geo.map里写的完全一致两处不一致直接白屏。第二层 geo 负责投影和底图roam 控制缩放拖拽itemStyle 管底图观感。第三层 lines 是飞线本体coordinateSystem: geo决定 coords 按经纬度解析effect 子配置把静态线段变成流动粒子。第四层 effectScatter 用同样的坐标系在起终点做发光点value 前两位是经纬度第三位用来映射圆点大小。这就是一套标准的 ECharts 飞线图骨架。参数上有几个默认值值得主动改period 默认 4 秒在宽屏上偏拖沓我一般调到 2.5 到 3.5trailLength 默认 0.2想突出流动感可以提到 0.4但再高就会糊成一条光带symbol 默认是 circle想表达方向感可以换 arrow但符号大了会遮住地图建议只在重点线路上用。2.3 coords 数据格式起终点从「站点名」到「经纬度」的转换飞线图最常见的翻车就是把 coords 写成字符串站点名。coords 只认数值对[lng, lat]而且经度在前、纬度在后。我一般在业务数据进图之前先过一层转换函数绝不让原始数据直接进 option。// 站点坐标表全项目共用一份 const stationGeo { 站点A: [110.2, 30.1], // 演示值替换成真实业务坐标 站点B: [98.6, 24.9], 站点C: [120.8, 28.2] }; // 业务原始数据通常是 { from: 站点A, to: 站点B, volume: 35 } function buildFlyData(routes) { return routes .filter(function (r) { return stationGeo[r.from] stationGeo[r.to]; }) .map(function (r) { return { fromName: r.from, toName: r.to, coords: [stationGeo[r.from], stationGeo[r.to]] }; }); }filter 那一步是故意的。业务数据里经常有还没维护坐标的新站点不过滤的话ECharts 会拿 undefined 去解析整条线直接消失或者画到地图外。我在某公司上线物流大屏时就因为漏了这步有过好几天被运营截图问为什么某片区少了一条干线的尴尬。转换函数里顺手带上 fromName 和 toName后面配 tooltip 时直接用不用再反查一次坐标表。提示经纬度顺序是 lng 在前、lat 在后。坐标写反在低纬度地区偏差小不容易发现一旦线路跨度大偏差会非常明显排查时先怀疑这一点。3. 飞线图观感全靠动效参数effect、lineStyle 和流量强弱的 5 个必调项3.1 effect 三要素trailLength、period、symbol 怎么配合飞线图看着活不活全靠 effect 那段配置。effect 字段不少但决定观感的核心就三个trailLength、period、symbol。trailLength 取值 0 到 1控制拖尾占整条线长度的比例。0.2 是干脆的粒子0.6 是浓郁的光带。大屏深色背景下我推荐 0.2 到 0.4因为深色底上长拖尾会产生大量高亮像素看久了刺眼。如果地图上同时有几十条线统一把 trailLength 调小比逐条调颜色更有效。period 是粒子从起点到终点的时间单位秒。它和线路长度是耦合的period 固定时短线路的粒子很快就跑完长线路看起来慢吞吞。业务上线路长度差异大时比如既有同城 20 公里又有跨区 2000 公里建议设constantSpeed: true让粒子按固定速度运动长度只影响运动时长不影响节奏。这是我做跨区干线路网时总结出来的不设 constantSpeed短途线一多画面就像到处乱蹦。effect 参数推荐取值说明trailLength0.2 ~ 0.4拖尾比例越大越有光带感但高亮像素也越多period2.5 ~ 3.5单条线路跑完的秒数线路长短差异大时改用 constantSpeedconstantSpeedtrue / 数值固定像素速度长短线节奏统一symbolcircle / arrowcircle 干净arrow 有方向性但容易显脏symbolSize4 ~ 8超过线宽的 4 倍就会盖住线路本身symbol 决定粒子长什么样但注意 symbolSize 不要超过线路宽度的 4 倍否则飞线就变成了飞点。想强调方向我一般给重点线路单独开一个 lines 系列用 arrow普通线路保持 circle避免满屏箭头互相干扰。3.2 lineStyle 的渐变色与 curveness怎么让线条有方向和体积线条本身决定图的信息密度。lineStyle 里我必调三个字段color、width、curveness。curveness 是 0 到 1 的弯曲程度飞线图里 0.2 到 0.3 最自然既有弧线感又不会夸张到穿地心。超过 0.5 后曲线会拱得很高在小比例尺地图上经常拱出画布观感是在飞外太空。color 和 width 都支持到 data 级这是表达流量强弱的正确入口。常见误区是想在 series 级用一个 width 表达所有线流量——lines 系列的 width 是整体宽度一改全变粗没法做差异化。正确做法是在每条 data 里单独写 lineStyle。data: routes.map(function (r) { return { coords: [stationGeo[r.from], stationGeo[r.to]], lineStyle: { width: 1 Math.log2(r.volume 1), // 对数缩放避免大值撑爆画面 color: r.volume 100 ? #ff4d4f : #ffd700 } }; })width 用 log2 缩放是我一直坚持的写法。业务流量经常呈幂律分布几条干线占了大头几十条支线都很小。直接用线性映射支线宽度趋近于 0看不见用对数干线和支线的差距还在但支线至少宽度为 1肉眼可辨。color 按阈值切分适合是否超限这类业务语义。3.3 流量强弱怎么表达多条 series 分组还是 data 级 lineStyle上一节说了 data 级 lineStyle这里补一个选型判断什么时候应该把飞线拆成多个 series。我的判断标准是如果需要不同的 effect 参数——不同速度、不同粒子形状——就必须拆系列因为 effect 是 series 级配置。比如同城配送用快速小圆点跨区干线用缓慢箭头这必须拆成两个 lines 系列各自定义 effect再用 legend 控制显隐。如果只是颜色和粗细不同effect 又一致就放同一个系列里用 data 级样式性能更好代码也少。拆系列会增加渲染开销还会带来一个副作用多个 lines 系列的线叠加时透明度会叠深深色底上容易糊成一片。所以拆系列建议控制在 3 个以内并且给不同系列设置不同 opacity叠出来的颜色才干净。还有一个细节多个系列引用同一个 geo 时geo 只绘制一次底图不需要担心重复渲染。但 effectScatter 的发光点如果和 lines 系列数量一样多发光动画会抢视线。我一般只为起终点各取 Top N 站点加 effectScatter其余用普通 scatter既不丢信息也不乱闪。4. 飞线图高频踩坑排查5 个「现象→原因→解决」的真实记录4.1 地图白屏、只剩飞线在空转现象图上有粒子在动tooltip 也能触发但底图空白或只有边框区域填充全不见。控制台常见报错是地图不存在或 registerMap 相关提示。原因忘掉注册地图或者geo.map的名字和 registerMap 注册名不一致。另一个隐蔽原因是 GeoJSON 异步加载setOption 先执行、registerMap 后执行组件拿不到地图定义。本地开发几乎不遇到因为 JSON 是同步 import一到生产环境改成 fetch 加载就白屏本质是加载时序问题。解决保证注册先于渲染把地图加载和图表初始化放进同一个 async 流程。const geoJson await fetch(/geo/region.json).then(function (r) { return r.json(); }); echarts.registerMap(myRegion, geoJson); chart.setOption(option);fetch 失败的情况也要考虑我习惯在 registerMap 外层包一层 try/catch失败时给页面一个明确提示而不是让用户看一张空地图。4.2 所有飞线挤到一个点上现象几十条线不从各自起点出发全部从地图同一点向四周放射或者全部缩成一个点。原因coords 里传了字符串站点名或者把[lng, lat]写反成[lat, lng]。字符串无法解析时会被丢弃图上可能直接不画经纬度反了在低纬度地区偏差不大在高纬度地区会明显偏离。当坐标恰好都落在解析失败的回退点时视觉上就是所有线从一个点冒出。解决先过转换函数再在 setOption 前打印前三条数据核对 coords。我的自查习惯是在浏览器控制台执行chart.getOption().series[0].data.slice(0, 3)看 coords 是否为两个数字组成的数组。如果看到字符串或者 NaN问题就在数据预处理不在 ECharts 配置。4.3 线一多就掉帧缩放拖拽像幻灯片现象线条数超过 100 条且全部开 effect拖动地图时帧率明显下降粒子运动开始跳跃。原因effect 每帧都要重算粒子位置并且重新绘制线条越多canvas 绘制压力越大。我见过一个项目里塞了 500 条带 effect 的飞线直接卡到没法演示。解决先分清主次。主干线保留 effect支线收敛成静态线再给 lines 系列开 large。large: true会切换到增量渲染模式用更高效的绘制方式换掉部分视觉细节——箭头、复杂渐变这类样式在 large 模式下会受限——换来上百条线也能保持交互流畅。一般 100 条以下不需要开 large超过 300 条强烈建议开并且把 trailLength 压到 0.2 以下。4.4 setOption 不生效或旧数据残留现象在框架里通过 watch 更新了数据调用 setOption 后线条没变化或者新旧线路叠在一起越积越多。原因setOption 默认是合并模式series 按位置合并。如果新 data 比旧 data 短多出来的旧线条不会被自动删除于是出现删不掉的线。另外如果初始化时在 mounted 里重复执行 echarts.init会创建多个实例叠在同一个容器上表现成改了没反应。解决整体替换数据时用setOption(option, true)第二个参数 true 表示 notMerge直接覆盖而不是合并。多系列场景下精确更新要给系列加 id。chart.setOption({ series: [{ id: lines-main, data: nextData }] });用 id 定位系列不依赖 series 的下标位置能避免因为增减系列导致的串位。这条规则在 Vue 和 React 里同样适用。4.5 在隐藏容器里初始化飞线图宽高错乱现象图表放在弹窗、折叠面板或 Tab 页里打开时飞线图变成长条形、粒子位置错乱或者完全空白。原因容器 display: none 时宽高为 0ECharts 初始化拿到的画布尺寸就是 0 或极小值后续即使容器可见画布也不会自动重算。解决原则是容器可见后再初始化如果做不到就在容器可见时调用 chart.resize()。我常用 ResizeObserver 监听容器尺寸。const observer new ResizeObserver(function () { if (el.offsetWidth 0) { chart.resize(); } }); observer.observe(el);另外window 的 resize 事件里也要挂 chart.resize()但必须做 200ms 防抖否则拖动窗口时会连续触发重绘肉眼可见卡顿。5. 把飞线图接进业务数据驱动与 Vue/React 生命周期管理的正确姿势5.1 坐标表与飞线数据解耦一份表多处复用刚上手时很多人会把坐标写死在业务数据里换来的是每次新增站点都要改业务接口。我一般把坐标表单独维护成一份静态映射业务接口只负责谁到谁、多少量画图前用 buildFlyData 组装。这么做有三个收益坐标表可以复用tooltip 格式化、站点打点、搜索联想都用它新站点没配坐标时会被 filter 安全过滤而不是让图崩掉坐标修正只改一处不用回改历史数据。5.2 Vue 组件里管理实例init、dispose 与 watch 的正确姿势框架里用 ECharts生命周期是最容易踩的坑。init 要在 DOM 挂载后dispose 要在组件卸载前watch 要防重复渲染。给一段 Vue 3 的参考写法。import * as echarts from echarts; import { onMounted, onBeforeUnmount, watch, ref } from vue; const el ref(null); let chart null; onMounted(function () { chart echarts.init(el.value); chart.setOption(buildBaseOption()); }); onBeforeUnmount(function () { if (chart) { chart.dispose(); // 释放 canvas 与事件绑定避免内存泄漏 chart null; } }); // 假设组件接收 routes 数组作为 props watch(function () { return props.routes; }, function (routes) { if (!chart) return; const flyData buildFlyData(routes); chart.setOption({ series: [{ id: lines-main, data: flyData }] }); }, { deep: true });dispose 这一步看着多余但在单页应用里路由来回切换会不断创建 ECharts 实例不销毁的话内存和 canvas 数量持续上涨页面会越来越卡。watch 里不要重新 init只 setOption因为 geo 和 effectScatter 的配置没变不需要重建如果连 geo 布局都要跟着改再整体setOption(option, true)。在 React 里同理useEffect 的 cleanup 里必须调用 dispose否则严格模式下的双执行会让实例重复创建。这是我见过的另一个高频翻车点。5.3 定时刷新只更新 data不重传整份 option实时监控类大屏经常要求飞线每十秒刷新一次。最容易犯的错是每次刷新都重新组装整个 option——大屏上光底图重绘就够呛。正确做法是维持一份基础 option刷新时只替换需要的系列数据。用 seriesId 定位的写法刷新时新线路会从起点重新流动。注意 effect 动画在数据替换时会重新开始这通常是期望行为新数据来了动效重置一次视觉上正好提示数据更新了。如果不想要这个重置就得保留旧数据数组的骨架只改 value逻辑复杂我一般只在需要极平滑滚动时才这么做。另一个建议是刷新频率不要低于 period 的时长。如果 period 是 3 秒却每 1 秒刷一次数据粒子永远跑不到终点视觉上全是半截线业务方会误以为线路断了。6. 交付前最后一步让百条飞线在大屏上不掉帧的两个习惯飞线图做到能看不难做到能交付还得过性能这关。我现在的习惯是先写死effect: { show: false }做静帧审查确认线路和站点没有串点、没有漏线再打开动画微调参数。这个习惯帮我拦下了不止一次把线路画错的线上事故。性能上数据量一旦上百我会直接给 lines 系列上 large 模式。large: true开启增量渲染配合 progressive 按批次绘制图表的缩放拖拽会明显跟手。const option { series: [{ type: lines, coordinateSystem: geo, id: lines-main, large: true, // 大数据量下开启增量渲染 progressive: 1000, // 分片渲染的批次大小按地图复杂度微调 data: flyData, effect: { show: true, trailLength: 0.15, // 大屏上收短拖尾减少高亮像素 constantSpeed: 60, // 固定像素速度长短线节奏一致 symbolSize: 4 } }] };开 large 之后要注意细线条和简化样式是常态别在 large 模式下追求箭头和复杂渐变效果会打折扣。我一般把 large 当作超过 300 条线才打开的开关数据量没那么大时保持默认绘制观感更好。另外一个交付前必做的验证把地图缩放一级、再拖到边缘看飞线是否越界、粒子是否偏离站点。很多问题只在某个缩放级别下暴露比如线条拱出画布、粒子在途中断掉。我习惯把 roam 打开测试一轮再按需求决定交付时是否关闭。测试完关掉 roam能避免用户误拖后找不到原来的视角。最后说一个心态上的建议飞线图不是配置越满越好。多系列、多粒子、多发光点叠在一起信息密度过高运营看一眼就晕。我后来做同类大屏默认只保留 Top 10 干线带动效其余线静态呈现反而没人再提太花的意见。希望帮到你。本文还有配套的精品资源点击获取