Echarts的series-lines

先上效果：

  

我想要的，就是一个动态的轨迹图，但是做这个的过程中，我踩了一个大坑，花了不少时间。

先看官网相关的说明：

series-lines

路径图

用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。

初始版代码：

series: [
            {
                type: 'lines',
                coordinateSystem: 'geo',
                effect: {
                    show: true,
                    period: 4, // 图标飞跃速度，值越小速度越快
                    trailLength: 0.4, // 尾迹长度[0,1]值越大，尾迹越长
                    symbolSize: 4, // 图标大小
                    color: "red", // 图标颜色
                },
                lineStyle: {
                    normal: {
                        show: true,
                        width: 2,
                        opacity: 0.3,
                        curveness: 0.3,
                        color: "#fff",
                    },
                },
                data: [
                    {
                        coords: [
                            [110, 40],  // 起点
                            [115, 22]   // 终点
                        ],
                    }
                ]
            }
        ]

代码写完了，但是效果差太远了，很纳闷？为什么啊，都是按照官网上写的……

相关配置说明：

effect：

线特效的配置，见示例 模拟迁徙 和 北京公交路线

注意： 所有带有尾迹特效的图表需要单独放在一个层，也就是需要单独设置 zlevel，同时建议关闭该层的动画（animation: false）。不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。

初始版代码，我反复修改，就是不得其所，效果不达标，时间也浪费了。直到，我注意到了上边标黄的那句话，试着加上了一个配置项：zlevel，效果才算是满足自己的预期；

修改后代码：

series: [
            {
                type: 'lines',
                zlevel: 100,//加上即可，数值随意
                coordinateSystem: 'geo',
                effect: {
                    show: true,
                    period: 4, // 图标飞跃速度，值越小速度越快
                    trailLength: 0.4, // 尾迹长度[0,1]值越大，尾迹越长
                    symbolSize: 4, // 图标大小
                    color: "red", // 图标颜色
                },
                lineStyle: {
                    normal: {
                        show: true,
                        width: 2,
                        opacity: 0.3,
                        curveness: 0.3,
                        color: "#fff",
                    },
                },
                data: [
                    {
                        coords: [
                            [110, 40],  // 起点
                            [115, 22]   // 终点
                        ],
                    }
                ]
            }
        ]

总结：

        1、使用lines里面的effect时，一定加上zlevel，不然“尾迹特效”出不来；

        2、注意在lineStyle这个配置项里面加入normal；（老版本的echarts，需要这个属性，新版本可能不需要）

        3、看echarts官网的时候，仔细一点，不然可能会花更多的时间！

完整配置项代码附上：

export function mapOption(mapName) {
    return {
        geo: {
            type: "map",
            map: mapName,
            roam: true,
            zoom: 1.1,
            selectedMode: "single",
            itemStyle: {
                areaColor: "#eee",
                borderType: "dashed"
            }
        },
        series: [
            {
                type: 'lines',
                zlevel: 100,
                coordinateSystem: 'geo',
                effect: {
                    show: true,
                    period: 4, // 图标飞跃速度，值越小速度越快
                    trailLength: 0.4, // 尾迹长度[0,1]值越大，尾迹越长
                    symbolSize: 4, // 图标大小
                    color: "red", // 图标颜色
                },
                lineStyle: {
                    normal: {
                        show: true,
                        width: 2,
                        opacity: 0.3,
                        curveness: 0.3,
                        color: "#fff",
                    },
                },
                data: [
                    {
                        coords: [
                            [110, 40],  // 起点
                            [115, 22]   // 终点
                        ],
                    }
                ]
            }
        ]
    };
}