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

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

这里写图片描述

上面的图是从 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.json
latlong 是我们的经纬度数据，是可以动态的，也可以从后端接口获取
chart.setOption 是Echarts指定图表的配置项和数据
title、tooltip 、visualMap 都是图标的信息，标定图表的作用、大小，其中inRange: {symbolSize: [20, 20]}是表示图中每个点的大小
geo是地理坐标系组件，看代码的注释
series是系列列表
effectScatter是带有涟漪特效动画的散点（气泡）图，看代码的注释

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

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

接收数据时，转一下

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

最后，祝大家成功！！！

本文链接：https://blog.csdn.net/change_on/article/details/78751549

智能推荐

Python数据可视化8-散点图

随机生成一些散点，并绘图...

项目2：数据可视化（一）绘制散点图

plt.tick_params()函数中的可选参数which有三个值，分别是’major’, ‘minor’, ‘both’，分别表示修改主刻度尺、副刻度尺和所有刻度尺。这里的主副刻度尺类似于尺子上CM和MM的刻度。默认是which = ‘major’ 用函数自动生成计算数据 plt.axis()是设置...

9.6.1 三维数据可视化之散点图

...

数据可视化pyecharts学习笔记---散点图

直角坐标系图表–散点图 from pyecharts.charts import Scatter from pyecharts.charts import EffectScatter 1、基本示例 2、视觉映射组件 3、动态散点图...

python笔记32:数据可视化之散点图

相关文件下载地址：https://pan.baidu.com/s/1iOefRWY_VrgxmmkEBAdN8Q 提取码：8v21 程序运行结果截图：...

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

智能推荐

猜你喜欢