大数据可视化--全球分布散点图

怼烎@ 2022-06-04 08:13 311阅读 0赞

**先看效果，有动画的，一闪一闪（图片展示不出来）**：

![这里写图片描述][SouthEast]

上面的图是从 **2G的txt文件**中提取出来的，这些文件是记录用户行为的数据，而图中所标识的每一个点代表一个用户。后端对数据的层层提取和处理就不说，太多了，我打字又慢。这里只讲前端如何描绘出散点图。

我用的是Echarts，很强大的图表分析工具，github地址：[https://github.com/ecomfe/echarts][https_github.com_ecomfe_echarts]， 这是最详细的资料。

然后到Echarts官网，看看api，地址：[http://echarts.baidu.com/option.html][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>

**如果顺利的话，效果应该出来了**：

![这里写图片描述][SouthEast 1]

**方法/参数说明**：

*  $.get(‘../map/json/world.json’, function (worldJson) \{  
    echarts.registerMap(‘world’, worldJson) 注册一个世界地图，引用world.json
 *  latlong 是我们的经纬度数据，是可以动态的，也可以从后端接口获取
 *  chart.setOption 是Echarts指定图表的配置项和数据
 *  title、tooltip 、visualMap 都是图标的信息，标定图表的作用、大小，其中inRange: \{symbolSize: \[20, 20\]\}是表示图中每个点的大小
 *  geo是地理坐标系组件，看代码的注释
 *  series是系列列表
 *  effectScatter是带有涟漪特效动画的散点（气泡）图，看代码的注释

**如果要接入后端，注意禁用异步**

//取消异步 
    $.ajaxSetup({  
       async : false
     });

**接收数据时，转一下**

var latlong = JSON.parse(getUser());

**最后，祝大家成功！！！**

[SouthEast]: /images/20220604/98ae647693ac4e799d3d2d5aca61094d.png
[https_github.com_ecomfe_echarts]: https://github.com/ecomfe/echarts
[http_echarts.baidu.com_option.html]: http://echarts.baidu.com/option.html
[SouthEast 1]: /images/20220604/ef13a8c58c8643239ed3877685d99a6a.png