Flyaway
LiuLichao的技术随笔

使用Echart制作网站流量统计分布地图

Flyaway阅读(1356)评论(0)

在开发站点流量统计平台的过程中,需要将网站访客IP地理位置数据进行可视化,而可视化的工具则包括D3.jsHighMap.js以及Echart.js等等等等,综合来看,Echart使用更为简单,更容易上手,其效果大致如下:

1

 

1 、Echart简介

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

项目主页: http://echarts.baidu.com/

GitHub: https://github.com/ecomfe/echarts

 

2、数据示例

现有访问地理分布的数据如下所示,你可以在服务器端使用一定的方法进行构造:

{
    "series": [
        {
            "name": "北京城市记忆主站点",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"","value":6},{"name":"Amazonas","value":1},{"name":"Antioquia","value":1},{"name":"Canarias","value":1},{"name":"Ceara","value":1},{"name":"Leiria","value":1},{"name":"Lombardia","value":1},{"name":"Marrakech-Tensift-Al Haouz","value":1},{"name":"Mato Grosso do Sul","value":1},{"name":"Minas Gerais","value":1},{"name":"Noord-Holland","value":19},{"name":"Pays de la Loire","value":1},{"name":"Rajasthan","value":1},{"name":"Region Metropolitana","value":1},{"name":"Rio Grande do Sul","value":1},{"name":"Seoul-t'ukpyolsi","value":4},{"name":"Tanger-Tetouan","value":1},{"name":"Toscana","value":1},{"name":"上海","value":18},{"name":"伊利诺伊","value":1},{"name":"佛罗里达","value":1},{"name":"俄亥俄州","value":1},{"name":"内蒙古","value":2},{"name":"加利福尼亚","value":13},{"name":"北京","value":1614},{"name":"华盛顿州","value":5},{"name":"圣保罗","value":6},{"name":"墨西哥城","value":1},{"name":"天津","value":6},{"name":"奇瓦瓦","value":1},{"name":"山东","value":767},{"name":"山西","value":2},{"name":"布宜诺斯艾利斯","value":1},{"name":"广东","value":6},{"name":"广西","value":4},{"name":"得克萨斯州","value":2},{"name":"新疆","value":36},{"name":"江苏","value":3},{"name":"河内","value":1},{"name":"河北","value":3},{"name":"河南","value":1},{"name":"浙江","value":11},{"name":"湖北","value":5},{"name":"湖南","value":2},{"name":"贝尔法斯特","value":1},{"name":"辽宁","value":1},{"name":"里约热内卢","value":1},{"name":"重庆","value":7},{"name":"陕西","value":3},{"name":"香港","value":3}]
        },
        {
            "name": "北京说唱艺术",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"Seoul-t'ukpyolsi","value":3},{"name":"上海","value":9},{"name":"伦敦","value":6},{"name":"加利福尼亚","value":17},{"name":"北京","value":3192},{"name":"华盛顿州","value":1},{"name":"天津","value":7},{"name":"河北","value":37},{"name":"浙江","value":1},{"name":"重庆","value":6}]
        },
        {
            "name": "北京饮食文化",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"上海","value":2},{"name":"加利福尼亚","value":4},{"name":"北京","value":898},{"name":"华盛顿州","value":4},{"name":"天津","value":15},{"name":"山西","value":1},{"name":"广东","value":1},{"name":"河南","value":42},{"name":"浙江","value":1},{"name":"重庆","value":1}]
        },
        {
            "name": "瑞蚨祥",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"北京","value":95},{"name":"浙江","value":1}]
        },
        {
            "name": "内联升",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"北京","value":209},{"name":"山西","value":1},{"name":"重庆","value":2}]
        },
        {
            "name": "八大水院",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"上海","value":8},{"name":"内蒙古","value":3},{"name":"加利福尼亚","value":13},{"name":"北京","value":1491},{"name":"广西","value":6},{"name":"浙江","value":4}]
        },
        {
            "name": "国学孔庙",
            "type": "map",
            "mapType": "china",
            "data": [{"name":"上海","value":3},{"name":"加利福尼亚","value":2},{"name":"北京","value":185}]
        }
    ],
    "max": 9168,
    "legend": [
        "北京城市记忆主站点",
        "北京说唱艺术",
        "北京饮食文化",
        "瑞蚨祥",
        "内联升",
        "八大水院",
        "国学孔庙"
    ]
}

如上所示,在data中,其内部每一个jsonObject都包含一个name与value,其中的name则是后台在统计时直接通过ip地址查询的接口获得的省份,Echart会自动对应这些name到地图上相应的省份,同时剔除掉数据中在地图GeoJSON中所不包含的省份。

 

3、引入Echart与中国GeoJSON

GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。简单来说就是有了这个数据Echart就能在H5的canvas中绘制出中国地图了。

Echart的官网上提供世界地图、中国地图以及中国各省份地图的JSON格式与JS格式的GeoJSON数据下载:http://echarts.baidu.com/download-map.html

页面中引入Echart:

<script src="js/echarts.min.js"></script>

引入地图GeoJSON数据有两种途径,一种是引入相应的JS,另外一种则是通过ajax get加载相应的JSON文件,这里使用第二种方法:

$.get('js/map/china.json').done(function(mapData){
      echarts.registerMap('china', mapData);
});

如上所示,我们在get到china.json数据后,注册了一个名为’china’的map对象,这在之后生成地图的时候会用到。

 

4、加载数据

我们通过jquery Ajax Get请求后台的数据接口,返回如示例中的数据格式,然后将数据加载到echart对象中:

<div id="visit-map" class="visit-map" style="height: 600px;width: 100%;"></div>

<script src="js/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
      //初始化一个Echart对象
      var visitMap = echarts.init(document.getElementById('visit-map'));
      //定义你的后台数据接口
      var url = 'your backend data api 你的后台数据接口';
      //显示chart加载动画
      visitMap.showLoading();
      //get GeoJSON数据
      $.get('js/map/china.json').done(function(mapData){
         //注册China地图对象
         echarts.registerMap('china', mapData);
         //请求后端数据
         $.get(url).done(function(data){
            var mapOption = {
                title: {
                  text: '访问地理分布',
                  subtext: '北京城市记忆站点访问地理分布',
                  left: 'center'
                },
                //设置提示工具样式,formatter中构造提示的数据类型以及样式
                tooltip: {
                  trigger: 'item',
                  formatter: function(mapData){
                    var city = mapData.data.name;
                    var totleNum = 0;
                    var res = "";
                    $.each(data.series,function(key,value){
                       $.each(value.data,function(key,cityValue){
                          if(cityValue.name == mapData.data.name){
                             res+=value.name+" : "+cityValue.value+"<br/>";
                             totleNum+=cityValue.value;
                          }
                       });
                    });
                    res = '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                       +mapData.data.name+":"+totleNum+"</div>" +res;
                    return res;
                  } 
               },
               legend: {
                  orient: 'vertical',
                  left: 'left',
                  data:data.legend
               },
               visualMap: {
                  max:data.max,
                  min: 0,
                  left: 'left',
                  top: 'bottom',
                  text: ['高','低'],           // 文本,默认为数值文本
                  calculable: true,
                  color: ['orangered','yellow','lightskyblue']
               },
               toolbox: {
                  show: true,
                  orient: 'vertical',
                  left: 'right',
                  top: 'center',
                  feature: {
                     dataView: {readOnly: false},
                     restore: {},
                     saveAsImage: {}
                  }
               },
               series: data.series
            };
            //隐藏加载动画
            visitMap.hideLoading();
            //设置echart对象的属性,setOption()是一个万用的方法
            visitMap.setOption(mapOption,true);
         });
      });
   });
</script>

需要注意的是,这里为了方便很多定义项都在后端设置了,比如后端数据series中的mapType后台已经写为我们注册过的地图类型’china’了,因此在构造数据的时候需要留意。

 

5、完成

调试通过后,效果如下图:



至此,网站流量访问地理分布数据的可视化就完成了!

如有任何问题可以通过liulichaoruc@gmail.com联系我
if you have any problem,you can contact me via liulichaoruc@gmail.com

 

版权所有,转载注明出处

随便写的东西