前言
IPython Notebook 在某種程度上是很好使用的。在數(shù)據(jù)分析方面，我們常常使用 Pandas 和 NumPy, 用 Seaborn 和做可視化。
可是 Seaborn 明顯看起來(lái)不夠漂亮嘛。
能不能選一個(gè)很好用的圖表庫(kù)呢？
有，ECharts案例地址戳這里
今天我們使用 IPython NoteBook 來(lái)演示一個(gè)簡(jiǎn)單的 ECharts 案例，餅圖。本文的數(shù)據(jù)來(lái)自大眾點(diǎn)評(píng)閔行區(qū)美食店鋪。
首先，我們需要抓取 - 解析 - 入庫(kù)，這個(gè)不是本文重點(diǎn)，就不介紹了。
其次，我們需要對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單分析。簡(jiǎn)單分析足夠了。所以，我們僅僅統(tǒng)計(jì)人均消費(fèi)在如下范圍的店鋪比例。
- 0~50 元
- 50~100 元
- 100~150 元
- 150~200 元
- 200 元以上
正文
IPython 中，我們知道，可以通過(guò) IPython.display 導(dǎo)入 HTML.
from IPython.display import HTML
HTML("""
<div>這是一小塊 HTML</div>
""")
執(zhí)行就 IPython 中看到：
<div>這是一小塊 HTML</div>
的瀏覽器顯示。
但問(wèn)題來(lái)了，我們知道，在通常的情況下，是不能動(dòng)態(tài)引入 JS 腳本的。因此我們?cè)陂_發(fā) HTML 靜態(tài)頁(yè)面的時(shí)候，往往腳本都是在 Head 或者 Body 結(jié)束標(biāo)簽之前就寫死了。如果要在 IPython 中增加 ECharts, 是不是需要修改一些配置文件，讓 IPython Notebook 在 Header 部分引入 ECharts 腳本呢？
答案是不需要.
為何？因?yàn)?IPython Notebook 本身自帶一個(gè) Js 模塊，叫做 RequireJS.可以動(dòng)態(tài)引入并執(zhí)行 JS.
具體原理我們不深究，但是這個(gè)模塊為 IPython 動(dòng)態(tài)引入其他 JS 框架和代碼帶來(lái)了無(wú)限的可能性。注意，這個(gè)模塊可以幫助我們可以動(dòng)態(tài)引入并執(zhí)行 JS.
那么，我們就火速的看代碼吧。
chart_header_html = """
<div id="chart" style="width:800px; height:600px;"></div>
<script>
require.config({
paths:{
echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min',
}
});
require(['echarts'],function(ec){
var myChart = ec.init(document.getElementById('chart'));
var option = {
title: {
text: '閔行區(qū)美食類人均消費(fèi)餐館分布',
subtext: '數(shù)據(jù)來(lái)自大眾點(diǎn)評(píng)',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (xtxchnj%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['人均消費(fèi)不明','人均消費(fèi) 0~50 元', '人均消費(fèi) 50~100 元', '人均消費(fèi) 100~150 元', '人均消費(fèi) 150~200 元', '人均消費(fèi) 200 元以上']
},
series: [
{
name: '店鋪比例',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
"""
chart_content_html = """
{value: %s, name: '人均消費(fèi)不明'},
{value: %s, name: '人均消費(fèi) 0~50 元'},
{value: %s, name: '人均消費(fèi) 50~100 元'},
{value: %s, name: '人均消費(fèi) 100~150 元'},
{value: %s, name: '人均消費(fèi) 150~200 元'},
{value: %s, name: '人均消費(fèi) 200 元以上'}
""" % (consume_unknown_restaurant_count,consume_0_50_restaurant_count,consume_50_100_restaurant_count,consume_100_150_restaurant_count,consume_150_200_restaurant_count,consume_200_greater_restaurant_count)
chart_footer_html = """
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
});
</script>
"""
HTML(
chart_header_html + chart_content_html + chart_footer_html
)
首先，配置對(duì)應(yīng)的腳本。
require.config({
paths:{
echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min',
}
});
接著使用如下代碼進(jìn)行引入和執(zhí)行代碼：
require(['echarts'],function(ec){
var option = {
//... 圖表配置
}
//... 獲取圖表 div
//... 為所獲取的圖表 DIV 設(shè)置
}
效果
代碼
老規(guī)矩，技術(shù)文章放代碼。爬蟲程序就不公開了。公開一個(gè) IPythonNotebook 以及一個(gè) Excel 表用于大家分析。
參考文檔
- Python Web 開發(fā)實(shí)戰(zhàn)
- RequireJS 的官網(wǎng)
- ECharts 官網(wǎng)
