前言
IPython Notebook 在某種程度上是很好使用的婉陷。在數(shù)據(jù)分析方面扳躬，我們常常使用 Pandas 和 NumPy, 用 Seaborn 和做可視化同眯。
可是 Seaborn 明顯看起來不夠漂亮嘛姚垃。
能不能選一個很好用的圖表庫呢歇父？
有函筋，ECharts案例地址戳這里
今天我們使用 IPython NoteBook 來演示一個簡單的 ECharts 案例沙合，餅圖。本文的數(shù)據(jù)來自大眾點評閔行區(qū)美食店鋪跌帐。
首先首懈，我們需要抓取 - 解析 - 入庫绊率，這個不是本文重點，就不介紹了究履。
其次滤否，我們需要對數(shù)據(jù)進行簡單分析。簡單分析足夠了最仑。所以藐俺，我們僅僅統(tǒng)計人均消費在如下范圍的店鋪比例。
- 0~50 元
- 50~100 元
- 100~150 元
- 150~200 元
- 200 元以上
正文
IPython 中泥彤，我們知道欲芹，可以通過 IPython.display 導(dǎo)入 HTML.
from IPython.display import HTML
HTML("""
<div>這是一小塊 HTML</div>
""")
執(zhí)行就 IPython 中看到：
<div>這是一小塊 HTML</div>
的瀏覽器顯示。
但問題來了全景，我們知道耀石，在通常的情況下，是不能動態(tài)引入 JS 腳本的爸黄。因此我們在開發(fā) HTML 靜態(tài)頁面的時候滞伟，往往腳本都是在 Head 或者 Body 結(jié)束標(biāo)簽之前就寫死了。如果要在 IPython 中增加 ECharts, 是不是需要修改一些配置文件炕贵，讓 IPython Notebook 在 Header 部分引入 ECharts 腳本呢梆奈？
答案是不需要.
為何？因為 IPython Notebook 本身自帶一個 Js 模塊称开，叫做 RequireJS.可以動態(tài)引入并執(zhí)行 JS.
具體原理我們不深究亩钟，但是這個模塊為 IPython 動態(tài)引入其他 JS 框架和代碼帶來了無限的可能性。注意鳖轰，這個模塊可以幫助我們可以動態(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ū)美食類人均消費餐館分布',
subtext: '數(shù)據(jù)來自大眾點評',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>蕴侣 : {c} (wfpzenm%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['人均消費不明','人均消費 0~50 元', '人均消費 50~100 元', '人均消費 100~150 元', '人均消費 150~200 元', '人均消費 200 元以上']
},
series: [
{
name: '店鋪比例',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
"""
chart_content_html = """
{value: %s, name: '人均消費不明'},
{value: %s, name: '人均消費 0~50 元'},
{value: %s, name: '人均消費 50~100 元'},
{value: %s, name: '人均消費 100~150 元'},
{value: %s, name: '人均消費 150~200 元'},
{value: %s, name: '人均消費 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
)
首先焰轻，配置對應(yīng)的腳本。
require.config({
paths:{
echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min',
}
});
接著使用如下代碼進行引入和執(zhí)行代碼：
require(['echarts'],function(ec){
var option = {
//... 圖表配置
}
//... 獲取圖表 div
//... 為所獲取的圖表 DIV 設(shè)置
}
效果
代碼
老規(guī)矩昆雀，技術(shù)文章放代碼辱志。爬蟲程序就不公開了。公開一個 IPythonNotebook 以及一個 Excel 表用于大家分析狞膘。
參考文檔
- Python Web 開發(fā)實戰(zhàn)
- RequireJS 的官網(wǎng)
- ECharts 官網(wǎng)
