echarts折线图流动特效怎么实现

本文小编为大家详细介绍“echarts折线图流动特效怎么实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“echarts折线图流动特效怎么实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

echarts官网：series-lines

注意：流动特效只支持非平滑曲线（smooth：false）

series-lines路径图：用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果，在 ECharts 3 里建议使用单独的 lines 类型图表。

一些参数：

series-lines.coordinateSystem ：该系列使用的坐标系，可选：‘cartesian2d’-使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。‘geo’-使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

series-lines.polyline：是否是多段线。默认为 false，只能用于绘制只有两个端点的线段，线段可以通过 lineStyle.curveness 配置为曲线。如果该配置项为 true，则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线，在绘制路线轨迹的时候比较有用，见示例 北京公交路线，设置为多段线后 lineStyle.curveness 无效。

series-lines.effect. show：是否显示特效。

series-lines.effect. period = 4。 特效动画的时间，单位为 s。

series-lines.effect. symbol = ‘circle’。特效图形的标记。ECharts 提供的标记类型包括’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。

series-lines.effect. symbolSize = 3。特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。

series-lines.effect. trailLength = 0.2。特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。

series-lines.effect. loop = true。是否循环显示特效。

series-lines.data. coords ：一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。eg：

data. coords的获取：