大数据可视化--全球分布散点图
先看效果，有动画的，一闪一闪（图片展示不出来）：
上面的图是从 2G的txt文件中提取出来的，这些文件是记录用户行为的数据，而图中所标识的每一个点代表一个用户。后端对数据的层层提取和处理就不说，太多了，我打字又慢。这里只讲前端如何描绘出散点图。
我用的是Echarts，很强大的图表分析工具，github地址：https://github.com/ecomfe/echarts， 这是最详细的资料。
然后到Echarts官网，看看api，地址：http://echarts.baidu.com/option.html，摸清楚代码的结构。
如果以上做的差不多了，就开始码代码了。我这里只模拟几个点测试，纯前端，文件路径根据自己的实际情况改：
<html>
<head>
<meta charset='utf-8'>
<script src='lib/esl.js'>script>
<script src='lib/config.js'>script>
<script src='lib/jquery.min.js'>script>
head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
background: #000;
}
style>
<div id='main'>div>
<script>
//返回随机颜色
function getColor() {
var colors = ['#00F5FF','#00E5EE','#00FFFF','#00C5CD'];
var index = Math.floor((Math.random() * colors.length));
return colors[index];
}
require([
'echarts'
// 'echarts/chart/map',
// 'echarts/chart/scatter',
// 'echarts/component/legend',
// 'echarts/component/geo',
// 'echarts/component/visualMap'
], function (echarts) {
$.get('../map/json/world.json', function (worldJson) {
echarts.registerMap('world', worldJson);
var latlong = [
{'latitude':42.5, 'longitude':1.5},
{'latitude':22, 'longitude':116},
{'latitude':24, 'longitude':54},
{'latitude':24, 'longitude':54},
{'latitude':33, 'longitude':65},
{'latitude':17.05, 'longitude':-61.8},
{'latitude':18.25, 'longitude':-63.1667}];
var chart = echarts.init(document.getElementById('main'), null, {
});
var max = -Infinity;
var min = Infinity;
console.profile('setOption');
chart.setOption({
title : {
x:'center',
y:'top'
},
tooltip : {
trigger: 'item',
formatter : function (params) {
return '';
}
},
visualMap: {
show: false,
min: 0,
max: max,
inRange: {
symbolSize: [20, 20]
}
},
geo: {
name: '',
//类型
type: 'map',
//地图
map: 'world',
roam: true,
z:1,
//图形上的文本标签,这里不显示
label: {
emphasis: {
show: false
}
},
//地图区域的多边形 图形样式
itemStyle: {
//普通状态
normal: {
areaColor: '#000',
borderColor: '#1C86EE'
},
//高亮状态
emphasis: {
color: 'rgba(0,191,255, 0.2)'
}
}
},
series : [
{
type: 'effectScatter',
coordinateSystem: 'geo',
//可以容纳的动画数量
animationThreshold:50000,
//是否启用图例 hover 时的联动高亮。
legendHoverLink:true,
//特效类型，目前只支持涟漪特效'ripple'
effectType:'ripple',
//配置何时显示特效，render表示渲染完就显示
showEffectOn:'render',
//涟漪特效相关配置，period:动画的时间，scale：动画中波纹的最大缩放比例，brushType：波纹的绘制方式，可选 'stroke' 和 'fill'
rippleEffect:{'period':5, 'scale':3, 'brushType':'stroke'},
symbolSize:[2,10],
symbolRotate :10,
data: latlong.map(function (itemOpt) {
return {
value: [
itemOpt.longitude,
itemOpt.latitude
],
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
//color: getColor(),
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
type: 'radial',
x: 2,
y: 2,
r: 1,
colorStops: [{
offset: 0, color: getColor() // 0% 处的颜色
}, {
offset: 1, color: getColor() // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
z:2,
};
})
}
]
});
console.profileEnd('setOption');
});
});
script>
body>
html>如果顺利的话，效果应该出来了：
方法/参数说明：
$.get(‘../map/json/world.json’, function (worldJson) {
echarts.registerMap(‘world’, worldJson) 注册一个世界地图，引用world.jsonlatlong 是我们的经纬度数据，是可以动态的，也可以从后端接口获取
chart.setOption 是Echarts指定图表的配置项和数据
title、tooltip 、visualMap 都是图标的信息，标定图表的作用、大小，其中inRange: {symbolSize: [20, 20]}是表示图中每个点的大小
geo是地理坐标系组件，看代码的注释
series是系列列表
effectScatter是带有涟漪特效动画的散点（气泡）图，看代码的注释
如果要接入后端，注意禁用异步
//取消异步
$.ajaxSetup({
async : false
});接收数据时，转一下
var latlong = JSON.parse(getUser());最后，祝大家成功！！！