接触Python有一段时间了，经常用来做一些好玩的事，前几天跟领导聊天说到，要是能够实现全国各地访问流量的显示，那就最好了，刚好要申请一些大屏幕来，所以就想到了做这个。确实稍微大点的公司都有这类东西，确实很酷炫了，自己也搞一个这样的。下面说一下实现过程：
1、首先是数据：采集的话我选择的是读取nginx日志。可以提供的思路是，我们选择同一收集的方式，收集到大数据分析机器(同意收集的工具还是很多的，比如rsyslog)，然后通过正则或者一类东西筛选出我们需要的IP（当然日志肯定是按天切割的）:
2、收集到的数据，通过调用公网的IP查询接口进行筛选，筛选，找出对应的城市、入库
3、最后就是前端展示了，这里我选用的是百度的echarts，百度已经提供了比较完善的API和说明文档，自己去阅读就好。
给一下前端的代码：
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:800px" ></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});// 使用require(['echarts','echarts/chart/map' ],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main')); var option = {backgroundColor: '#1b1b1b',color: ['gold','aqua','lime'],title : {text: '众划算',subtext:'全国各地访问数据',x:'center',textStyle : {color: '#fff'}},tooltip : {trigger: 'item',formatter: '{b}'},legend: {orient: 'vertical',x:'left',data:['北京 Top10'],selectedMode: 'single',selected:{'上海 Top10' : false,'广州 Top10' : false},textStyle : {color: '#fff'}},toolbox: {show : true,orient : 'vertical',x: 'right',y: 'center',feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},dataRange: {min : 0,max : 100,calculable : true,color: ['#ff3333', 'orange', 'yellow','lime','aqua'],textStyle:{color:'#fff'}},series : [{name: '全国',type: 'map',roam: true,hoverable: false,mapType: 'china',itemStyle:{normal:{borderColor:'rgba(100,149,237,1)',borderWidth:0.5,areaStyle:{color: '#1b1b1b'}}},data:[],markLine : {smooth:true,symbol: ['none', 'circle'], symbolSize : 1,itemStyle : {normal: {color:'#fff',borderWidth:1,borderColor:'rgba(30,144,255,0.5)'}},data : [[{name:'北京'},{name:'内蒙古'}],[{name:'北京'},{name:'北海'}],[{name:'北京'},{name:'广东'}],[{name:'北京'},{name:'河南'}],[{name:'北京'},{name:'吉林'}],[{name:'北京'},{name:'长治'}],[{name:'北京'},{name:'重庆'}],[{name:'北京'},{name:'湖南'}], [{name:'北京'},{name:'常州'}],[{name:'北京'},{name:'丹东'}],[{name:'北京'},{name:'辽宁'}],[{name:'北京'},{name:'东营'}],[{name:'北京'},{name:'延安'}],[{name:'北京'},{name:'福建'}],[{name:'北京'},{name:'海口'}],[{name:'北京'},{name:'呼和浩特'}],[{name:'北京'},{name:'安徽'}],[{name:'北京'},{name:'杭州'}],[{name:'北京'},{name:'黑龙江'}],[{name:'北京'},{name:'舟山'}],[{name:'北京'},{name:'银川'}],[{name:'北京'},{name:'衢州'}],[{name:'北京'},{name:'江西'}],[{name:'北京'},{name:'云南'}],[{name:'北京'},{name:'贵州'}],[{name:'北京'},{name:'甘肃'}],[{name:'北京'},{name:'广西'}],[{name:'北京'},{name:'拉萨'}],[{name:'北京'},{name:'连云港'}],[{name:'北京'},{name:'临沂'}],[{name:'北京'},{name:'柳州'}],[{name:'北京'},{name:'宁波'}],[{name:'北京'},{name:'南京'}],[{name:'北京'},{name:'南宁'}],[{name:'北京'},{name:'江苏'}],[{name:'北京'},{name:'上海'}],[{name:'北京'},{name:'沈阳'}],[{name:'北京'},{name:'陕西'}],[{name:'北京'},{name:'汕头'}],[{name:'北京'},{name:'深圳'}],[{name:'北京'},{name:'青岛'}],[{name:'北京'},{name:'山东'}],[{name:'北京'},{name:'山西'}],[{name:'北京'},{name:'乌鲁木齐'}],[{name:'北京'},{name:'潍坊'}],[{name:'北京'},{name:'威海'}],[{name:'北京'},{name:'浙江'}], [{name:'北京'},{name:'无锡'}],[{name:'北京'},{name:'厦门'}],[{name:'北京'},{name:'西宁'}],[{name:'北京'},{name:'徐州'}],[{name:'北京'},{name:'烟台'}],[{name:'北京'},{name:'盐城'}],[{name:'北京'},{name:'珠海'}],[{name:'北京'},{name:'香港'}],[{name:'北京'},{name:'湖北'}],],},geoCoord: {'上海': [121.4648,31.2891],'东莞': [113.8953,22.901],'东营': [118.7073,37.5513],'中山': [113.4229,22.478],'临汾': [111.4783,36.1615],'临沂': [118.3118,35.2936],'丹东': [124.541,40.4242],'丽水': [119.5642,28.1854],'乌鲁木齐': [87.9236,43.5883],'佛山': [112.8955,23.1097],'河北': [115.0488,39.0948],'甘肃': [103.5901,36.3043],'内蒙古': [110.3467,41.4899],'北京': [116.4551,40.2539],'北海': [109.314,21.6211],'南京': [118.8062,31.9208],'南宁': [108.479,23.1152],'广西': [108.479,23.1154],'江西': [116.0046,28.6633],'江苏': [121.1023,32.1625],'厦门': [118.1689,24.6478],'台州': [121.1353,28.6688],'安徽': [117.29,32.0581],'呼和浩特': [111.4124,40.4901],'咸阳': [108.4131,34.8706],'黑龙江': [127.9688,45.368],'唐山': [118.4766,39.6826],'嘉兴': [120.9155,30.6354],'大同': [113.7854,39.8035],'辽宁': [122.2229,39.4409],'天津': [117.4219,39.4189],'山西': [112.3352,37.9413],'威海': [121.9482,37.1393],'宁波': [121.5967,29.6466],'宝鸡': [107.1826,34.3433],'宿迁': [118.5535,33.7775],'常州': [119.4543,31.5582],'广东': [113.5107,23.2196],'香港': [113.5107,31.3569],'廊坊': [116.521,39.0509],'延安': [109.1052,36.4252],'张家口': [115.1477,40.8527],'徐州': [117.5208,34.3268],'德州': [116.6858,37.2107],'惠州': [114.6204,23.1647],'四川': [103.9526,30.7617],'扬州': [119.4653,32.8162],'承德': [117.5757,41.4075],'拉萨': [91.1865,30.1465],'无锡': [120.3442,31.5527],'日照': [119.2786,35.5023],'云南': [102.9199,25.4663],'杭州': [119.5313,29.8773],'枣庄': [117.323,34.8926],'柳州': [109.3799,24.9774],'株洲': [113.5327,27.0319],'湖北': [114.3896,30.6628],'汕头': [117.1692,23.3405],'江门': [112.6318,22.1484],'沈阳': [123.1238,42.1216],'沧州': [116.8286,38.2104],'河源': [114.917,23.9722],'泉州': [118.3228,25.1147],'泰安': [117.0264,36.0516],'泰州': [120.0586,32.5525],'山东': [117.1582,36.8701],'济宁': [116.8286,35.3375],'海口': [110.3893,19.8516],'淄博': [118.0371,36.6064],'淮安': [118.927,33.4039],'深圳': [114.5435,22.5439],'清远': [112.9175,24.3292],'浙江': [120.498,27.8119],'渭南': [109.7864,35.0299],'湖州': [119.8608,30.7782],'湘潭': [112.5439,27.7075],'滨州': [117.8174,37.4963],'潍坊': [119.0918,36.524],'烟台': [120.7397,37.5128],'玉溪': [101.9312,23.8898],'珠海': [113.7305,22.1155],'盐城': [120.2234,33.5577],'盘锦': [121.9482,41.0449],'石家庄': [114.4995,38.1006],'福建': [119.4543,25.9222],'秦皇岛': [119.2126,40.0232],'绍兴': [120.564,29.7565],'聊城': [115.9167,36.4032],'肇庆': [112.1265,23.5822],'舟山': [122.2559,30.2234],'苏州': [120.6519,31.3989],'莱芜': [117.6526,36.2714],'菏泽': [115.6201,35.2057],'营口': [122.4316,40.4297],'葫芦岛': [120.1575,40.578],'衡水': [115.8838,37.7161],'衢州': [118.6853,28.8666],'西宁': [101.4038,36.8207],'陕西': [109.1162,34.2004],'贵州': [106.6992,26.7682],'连云港': [119.1248,34.552],'邢台': [114.8071,37.2821],'邯郸': [114.4775,36.535],'河南': [113.4668,34.6234],'鄂尔多斯': [108.9734,39.2487],'重庆': [107.7539,30.1904],'金华': [120.0037,29.1028],'铜川': [109.0393,35.1947],'银川': [106.3586,38.1775],'镇江': [119.4763,31.9702],'吉林': [125.8154,44.2584],'湖南': [113.0823,28.2568],'长治': [112.8625,36.4746],'阳泉': [113.4778,38.0951],'青岛': [120.4651,36.3373],'韶关': [113.7964,24.7028]}},{name: '北京 Top10',type: 'map',mapType: 'china',data:[],markLine : {smooth:true,effect : {show: true,scaleSize: 1,period: 30,color: '#fff',shadowBlur: 10},itemStyle : {normal: {borderWidth:1,lineStyle: {type: 'solid',shadowBlur: 10}}},data : [{%for x in all_data%}[{name:'北京'}, {name:'`x`.`city`',value:`x`.`num`}],{%endfor%} ]},markPoint : {symbol:'emptyCircle',symbolSize : function (v){return 10 + v/10},effect : {show: true,shadowBlur : 0},itemStyle:{normal:{label:{show:false}},emphasis: {label:{position:'top'}}},data : [ {%for i in all_data%}{name:'`i`.`city`',value:`i`.`num`},{%endfor%}] }},]
};// 为echarts对象加载数据 myChart.setOption(option); });</script>
</body>后端的操作，其实也可以是用saltstack远程分析nginx脚本，性能不影响web服务器的话，直接远程入库就好。
