echarts+百度地图实现动态炫酷路线走势图

参考Echarts北京公交路线实例

var hStep = (500 / (lineData.length - 1)) * 10;
var busLines = lineData.map((busLine, idx) => {
    hStep = (500 / (lineData.length - 1)) * 10;
    var prevPt;
    var points = [];
    for (let i = 0; i < busLine.length; i += 2) {
        let pt = [busLine[i], busLine[i + 1]];
        if (i > 0) {
            pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
        }
        prevPt = pt;
        points.push([pt[0] / 1e4, pt[1] / 1e4]);
    }
    return {
        coords: points,
        lineStyle: {
            normal: {
                color: echarts.color.modifyHSL(
                    '#5A94DF',
                    Math.round(hStep * idx)
                )
            }
        }
    };
});
this.myChart = echarts.init(this.$refs.nToS);
this.myChart.setOption({
    bmap: {
    	// 百度地图配置项
        center: [105.46, 36.92],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: [
                {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                        color: '#031628'
                    }
                },
                {
                    featureType: 'land',
                    elementType: 'geometry',
                    stylers: {
                        color: '#000102'
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'road',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#000000'
                    }
                },
                {
                    featureType: 'road',
                    elementType: 'geometry.stroke',
                    stylers: {
                        color: '#0b3d51'
                    }
                },
                {
                    featureType: 'local',
                    elementType: 'geometry',
                    stylers: {
                        color: '#000000'
                    }
                },
                {
                    featureType: 'railway',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#000000'
                    }
                },
                {
                    featureType: 'railway',
                    elementType: 'geometry.stroke',
                    stylers: {
                        color: '#08304b'
                    }
                },
                {
                    featureType: 'subway',
                    elementType: 'geometry',
                    stylers: {
                        lightness: -70
                    }
                },
                {
                    featureType: 'building',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#000000'
                    }
                },
                {
                    featureType: 'all',
                    elementType: 'labels.text.fill',
                    stylers: {
                        color: '#857f7f'
                    }
                },
                {
                    featureType: 'all',
                    elementType: 'labels.text.stroke',
                    stylers: {
                        color: '#000000'
                    }
                },
                {
                    featureType: 'building',
                    elementType: 'geometry',
                    stylers: {
                        color: '#022338'
                    }
                },
                {
                    featureType: 'green',
                    elementType: 'geometry',
                    stylers: {
                        color: '#062032'
                    }
                },
                {
                    featureType: 'boundary',
                    elementType: 'all',
                    stylers: {
                        color: '#465b6c'
                    }
                },
                {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                        color: '#022338'
                    }
                },
                {
                    featureType: 'label',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }
            ]
        }
    },
    series: [
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
                normal: {
                    opacity: 0.1,
                    width: 0.3
                }
            },
            progressiveThreshold: 500,
            progressive: 200
        },
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLines,
            lineStyle: {
                normal: {
                    width: 0
                }
            },
            effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 2
            },
            zlevel: 1
        }
    ]
});