项目说明
项目基于百度开源框架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文件调用
<script type="text/javascript" src="js/jquery.2.14.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <!--世界地图数据--> <script type="text/javascript" src="js/wolrd.js"></script> <!--数据配置--> <script type="text/javascript" src="js/database.js"></script>
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 < year.length; n++) { option.options.push({ backgroundColor: 'rgba(0,0,0,1)',//背景颜色 title: { text: "Export data of textile industry to Countries along the belt and Road from " + year[n], subtext: 'Data of countries along the Belt and Road', left: 'center', textStyle: { color: '#fff' } }, series: [ { type: 'effectScatter',//动态气泡 //type: 'scatter',//静态气泡 coordinateSystem: 'geo', data: mapData[n].sort(function (a, b) { return b.value - a.value; }), symbolSize: function (val) { return val[2] / 400000000;//气泡大小 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { formatter: function (params) { return params.data.value[2]; }, position: 'right', show: false//散点文本 }, itemStyle: { color: ranColor,//不同气泡随机颜色 }, zlevel: 1 } ] }) }
@lockdata.cn
