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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/change_on/article/details/78751549


先看效果,有动画的,一闪一闪(图片展示不出来)

这里写图片描述


上面的图是从 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());

最后,祝大家成功!!!

展开阅读全文

没有更多推荐了,返回首页