echarts map 时间轴的使用

先看一下效果：

 

时间轴的使用还是挺简单的，只是如果数据量大的话可能要做异步加载之类的比较麻烦

这里主要阐述timeline部分，其他的可以见我的上一篇文章，完整代码及数据见我的github，https://github.com/bolanlaike/echarts-map

使用timeline组件就得在option里上这个，data即为时间轴对应的数据，

timeline: {
                                bottom: '6%',
                                autoPlay: true,
                                data: ['2002-01-01', '2003-01-01', '2004-01-01']
                            },

和其他组件不同，使用timeline组件时option里多了options属性，options是一个数组，分别对应timeline.data里的时间 

options: [
                            { //option 1 对应timeline.data中第一项2002年
                                title: {
                                    text: '2002年统计值'
                                },
                                series: [
                                    {
                                        type: 'heatmap',
                                        coordinateSystem: 'geo',
                                        data: [[116.46, 39.92, 6000]],
                                    },
                                    {
                                        type: 'lines',
                                        coordinateSystem: 'geo',
                                        polyline: true,
                                        data: busLines,
                                        lineStyle: {
                                            normal: {
                                                opacity: 1,
                                                width: 2,
                                                color:'#DDDDDD'
                                            }
                                        },
                                        progressiveThreshold: 500,
                                        progressive: 200,
                                        zlevel: 10
                                    }, {
                                        type: 'lines',
                                        coordinateSystem: 'geo',
                                        polyline: true,
                                        data: busLines,
                                        lineStyle: {
                                            normal: {
                                                width: 0,
                                 //               color:'#FF0000'
                                            }
                                        },
                                        effect: {
                                            constantSpeed: 20,
                                            show: true,
                                            trailLength: 0.1,
                                            symbolSize: 1.5
                                        },
                                        zlevel: 999
                                    }]
                            },
                            {//option 2 对应timeline.data 中第二项2003年
                                title: {
                                    text: '2003年统计值'
                                },
                                series: [{
                                    type: 'heatmap',
                                    coordinateSystem: 'geo',
                                    data: [[116.46, 39.92, 8000]],
                                }, {
                                    type: 'lines',
                                    coordinateSystem: 'geo',
                                    polyline: true,
                                    data: busLines,
                                    lineStyle: {
                                        normal: {
                                            opacity: 1,
                                            width: 2,
                                            color:'#DDDDDD'
                                        }
                                    },
                                    progressiveThreshold: 500,
                                    progressive: 200,
                                    zlevel: 10
                                }, {
                                    type: 'lines',
                                    coordinateSystem: 'geo',
                                    polyline: true,
                                    data: busLines,
                                    lineStyle: {
                                        normal: {
                                            width: 0,
                                //            color:'#FF0000'
                                        }
                                    },
                                    effect: {
                                        constantSpeed: 20,
                                        show: true,
                                        trailLength: 0.1,
                                        symbolSize: 1.5
                                    },
                                    zlevel: 999
                                }]},
                                {// option 3 对应timeline.data中第三项 2004年
                                    title: {
                                        text: '2004年统计值'
                                    },
                                    series:[ {
                                        type: 'heatmap',
                                        coordinateSystem: 'geo',
                                        data: [[116.46, 39.92, 10000]],
                                    },{
                                    type: 'lines',
                                    coordinateSystem: 'geo',
                                    polyline: true,
                                    data: busLines,
                                    lineStyle: {
                                        normal: {
                                            opacity: 1,
                                            width: 2,
                                            color:'#DDDDDD'
                                        }
                                    },
                                    progressiveThreshold: 500,
                                    progressive: 200,
                                    zlevel: 10
                                }, {
                                    type: 'lines',
                                    coordinateSystem: 'geo',
                                    polyline: true,
                                    data: busLines,
                                    lineStyle: {
                                        normal: {
                                            width: 0,
                                  //          color:'#FF0000'
                                        }
                                    },
                                    effect: {
                                        constantSpeed: 20,
                                        show: true,
                                        trailLength: 0.1,
                                        symbolSize: 1.5
                                    },
                                    zlevel: 999
                                }
                                    ]
                                }
                                ]