前言
在上一篇南京鏈家爬蟲系列文章（三）——MongoDB篇中财剖，我們已經(jīng)數(shù)據(jù)保存為csv文件填抬，此篇我們可以基于csv文件中的數(shù)據(jù)進(jìn)行必要的圖標(biāo)展示的操作实檀，必備工具：pyecharts读规，詳細(xì)介紹請(qǐng)移步參加作者的主頁(yè)，安裝方式很簡(jiǎn)單杉允，pip一下就可以了：
image.png
柱狀圖
比較簡(jiǎn)單邑贴，詳見代碼：
import pandas as pd
from pyecharts import Bar,Line,Overlap
df_src=pd.read_csv('nanjing.csv')
row = df_src[df_src.community_unit_price=='暫無(wú)參考均價(jià)'].index.tolist()
df=df_src.drop(row) # 刪除無(wú)小區(qū)均價(jià)所在的行
data={}
data = df[['district','community','community_id','longtitude','latitude','community_unit_price']]
district = ['鼓樓', '溧水', '浦口', '江寧', '棲霞', '雨花臺(tái)', '玄武', '秦淮', '建鄴']
dis_ind=0 # 區(qū)域索引
# 二手房數(shù)量排名
temp=data['community'].value_counts()
num=50
attr=temp[0:num].index
val=temp[0:num].values
bar = Bar(district[dis_ind]+"二手房數(shù)量前%d排名" %num)
bar.add('bar', attr, val, is_label_show=True, is_datazoom_show=True, xaxis_rotate=30)
# line=Line()
# line.add('line',attr,val, is_label_show=True, is_datazoom_show=True)
# overlap=Overlap()
# overlap.add(bar)
# overlap.add(line)
# bar.show_config() # 打印輸出圖表的所有配置項(xiàng)
bar.render(district[dis_ind]+"二手房數(shù)量前%d排名.html" %num)
效果如下：
123.gif
地圖顯示篇
同樣通過(guò)pyecharts自帶的地圖功能，可以在地圖上顯示各小區(qū)均價(jià)叔磷，代碼如下：
import pandas as pd
from pyecharts import Geo
df_src=pd.read_csv('nanjing.csv')
row = df_src[df_src.community_unit_price=='暫無(wú)參考均價(jià)'].index.tolist()
df=df_src.drop(row) # 刪除無(wú)小區(qū)均價(jià)所在的行
data={}
data = df[['district','community','community_id','longtitude','latitude','community_unit_price']]
district = ['鼓樓', '溧水', '浦口', '江寧', '棲霞', '雨花臺(tái)', '玄武', '秦淮', '建鄴']
dis_ind=0 # 區(qū)域索引
index=data['district']==district[dis_ind] # 提取值為dis_ind的索引拢驾，
data =[
('紫竹林1號(hào)', 27173), ('月光廣場(chǎng)', 31193), ('臥龍湖小鎮(zhèn)', 10683), ('天潤(rùn)城第十四街區(qū)', 23713), ('東渡國(guó)際青年城', 28992)
]
geo_cities_coords = {'紫竹林1號(hào)': [118.780703,32.091311],'月光廣場(chǎng)':[118.7517653,32.06505319],
'臥龍湖小鎮(zhèn)':[119.0605851,31.72704304],'天潤(rùn)城第十四街區(qū)':[118.737714,32.16147],
'東渡國(guó)際青年城':[118.8454192,31.93771896]}
geo = Geo("南京", "二手房小區(qū)均價(jià)", title_color="#fff",
title_pos="center", width=1200,
height=600, background_color='#404a59')
attr, value = geo.cast(data)
geo.add("", attr, value, maptype='南京', type="effectScatter",
is_random=True, effect_scale=5, is_legend_show=False,
geo_cities_coords=geo_cities_coords)
geo.render('hello.html')
打開當(dāng)前路徑下的hello.html文件即可查看效果，只簡(jiǎn)單的去了五個(gè)小區(qū)改基，效果如下：
123.gif
熱力圖篇
準(zhǔn)備工作繁疤，在進(jìn)行熱力圖的制作之前需要先閱讀幾篇文章：
python調(diào)用百度地圖API實(shí)現(xiàn)經(jīng)緯度換算、熱力地圖全流程指南
【新年快樂(lè)，跨年文章】Python+百度API 畫出美美噠熱力地圖（代碼+數(shù)據(jù)）
通過(guò)這兩篇文章我們需要做幾件事
第一件事
申請(qǐng)百度開發(fā)者賬號(hào)稠腊，獲得ak略...
第二件事
確定地圖中心點(diǎn)躁染，http://api.map.baidu.com/lbsapi/creatmap/通過(guò)這個(gè)網(wǎng)址輸入地名即可
第三件事
生成經(jīng)緯度數(shù)據(jù)，count值可以為小區(qū)均價(jià)架忌，二手房首付吞彤，或者其他什么的...生成的經(jīng)緯度數(shù)據(jù)替換圖中的var points，按照格式替換即可
image.png
第四件事
修改熱力圖的半徑和count的最大值叹放，因?yàn)閿?shù)據(jù)太多饰恕，因此只選擇了幾個(gè)點(diǎn)進(jìn)行測(cè)試，通過(guò)觀察井仰，points的最大值在60000以下懂盐，因此半徑和最大值設(shè)置如下：
image.png
第五件事
點(diǎn)擊運(yùn)行按鈕即可
image.png
熱力圖生成代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>熱力圖功能示例</title>
<style type="text/css">
ul,li{list-style: none;margin:0;padding:0;float:left;}
html{height:100%}
body{height:100%;margin:0px;padding:0px;font-family:"微軟雅黑";}
#container{height:500px;width:100%;}
#r-result{width:100%;}
</style>
</head>
<body>
<div id="container"></div>
<div id="r-result">
<input type="button" onclick="openHeatmap();" value="顯示熱力圖"/><input type="button" onclick="closeHeatmap();" value="關(guān)閉熱力圖"/>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMap.Point(118.802422,32.064653);
map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.enableScrollWheelZoom(); // 允許滾輪縮放
var points =[
{"lat":32.091311,"lng":118.780703,"count":27173},
{"lat":32.0650531878,"lng":118.75176535,"count":31193},
{"lat":31.7270430391,"lng":119.060585074,"count":10683},
{"lat":32.16147,"lng":118.737714,"count":23713},
{"lat":31.9377189597,"lng":118.845419154,"count":28992},
{"lat":32.0975408803,"lng":118.920418487,"count":32055},
{"lat":31.9684060782,"lng":118.764814167,"count":35856},
{"lat":32.063616,"lng":118.796992,"count":56820},
{"lat":32.038831,"lng":118.797207,"count":39698},
{"lat":32.002376,"lng":118.745826,"count":55555}];
if(!isSupportCanvas()){
alert('熱力圖目前只支持有canvas支持的瀏覽器,您所使用的瀏覽器不能使用熱力圖功能~')
}
//詳細(xì)的參數(shù),可以查看heatmap.js的文檔 https://github.com/pa7/heatmap.js/blob/master/README.md
//參數(shù)說(shuō)明如下:
/* visible 熱力圖是否顯示,默認(rèn)為true
* opacity 熱力的透明度,1-100
* radius 勢(shì)力圖的每個(gè)點(diǎn)的半徑大小
* gradient {JSON} 熱力圖的漸變區(qū)間 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0~1.
value 為顏色值.
*/
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:60000});
//是否顯示熱力圖
function openHeatmap(){
heatmapOverlay.show();
}
function closeHeatmap(){
heatmapOverlay.hide();
}
closeHeatmap();
function setGradient(){
/*格式如下所示:
{
0:'rgb(102, 255, 0)',
.5:'rgb(255, 170, 0)',
1:'rgb(255, 0, 0)'
}*/
var gradient = {};
var colors = document.querySelectorAll("input[type='color']");
colors = [].slice.call(colors,0);
colors.forEach(function(ele){
gradient[ele.getAttribute("data-key")] = ele.value;
});
heatmapOverlay.setOptions({"gradient":gradient});
}
//判斷瀏覽區(qū)是否支持canvas
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>
復(fù)制如上代碼粘貼在http://lbsyun.baidu.com/jsdemo.htm#c1_15的源代碼編輯器中運(yùn)行即可
最后一件事
不知道是什么原因糕档，我只能看看有限的幾個(gè)點(diǎn)，可能我在百度地圖那里沒(méi)進(jìn)行實(shí)名認(rèn)證吧拌喉，能運(yùn)行的權(quán)限有限速那，點(diǎn)數(shù)一多就沒(méi)結(jié)果...
另，如果有任何問(wèn)題尿背，歡迎郵件交流：myprojtest@163.com端仰。
爬蟲系列文章：
南京鏈家爬蟲系列文章（一）——工具篇
南京鏈家爬蟲系列文章（二）——scrapy篇
南京鏈家爬蟲系列文章（三）——MongoDB數(shù)據(jù)讀取
南京鏈家爬蟲系列文章（四）——圖表篇
