漏刻有时数据可视化Echarts组件开发(23)：世界地图动态时间轴的散点气泡图

项目说明

项目基于百度开源框架ECharts予以开发。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

其中使用到的ECharts组件为：

1. geo，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图。本例使用是的是世界地图的geojson地理数据。
2. timeline组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。即将2003年至2018年每年对应的国家数据单独设置成一个配置项option，通过对配置项的切换，实现在地图上展示不同时间段的数据，形成时间轴动画。
3. series-effectScatter，带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

项目目录

1.readme.txt 说明文档 2.index.html 项目启动页，可本地离线运行 3.js 核心封装库 echarts.min.js，echarts封装库 jquery.2.14.js， jquery封装库 wolrd.js，世界地图地理信息geojson文件 database.js，数据配置文件

项目代码 外部js文件调用

timeline组件

 timeline: {
                data: year,
                axisType: 'category',
                autoPlay: true,//是否自动播放
                playInterval: 2000,//切换时间，2*1000=2秒
                left: '10%',
                right: '10%',
                bottom: '3%',
                width: '80%',
                label: {
                    normal: {
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbolSize: 10,
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    borderColor: '#777',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: true,
                    showPrevBtn: true,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },

            },

geo组件

 geo: {
                    show: true,
                    map: 'lockdatav',
                    roam: true,
                    zoom: 1,
                    label: {
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                }

option配置项

 for (var n = 0; n