IPython Notebook引入ECharts做可视化
前言
IPython Notebook 在某种程度上是很好使用的。在数据分析方面，我们常常使用 Pandas 和 NumPy, 用 Seaborn 和做可视化。
可是 Seaborn 明显看起来不够漂亮嘛。
能不能选一个很好用的图表库呢？
有，ECharts案例地址戳这里
今天我们使用 IPython NoteBook 来演示一个简单的 ECharts 案例，饼图。本文的数据来自大众点评闵行区美食店铺。
首先，我们需要抓取 - 解析 - 入库，这个不是本文重点，就不介绍了。
其次，我们需要对数据进行简单分析。简单分析足够了。所以，我们仅仅统计人均消费在如下范围的店铺比例。
- 0~50 元
- 50~100 元
- 100~150 元
- 150~200 元
- 200 元以上
正文
IPython 中，我们知道，可以通过 IPython.display 导入 HTML.
from IPython.display import HTML
HTML("""
<div>这是一小块 HTML</div>
""")
执行就 IPython 中看到：
<div>这是一小块 HTML</div>
的浏览器显示。
显示 HTML
但问题来了，我们知道，在通常的情况下，是不能动态引入 JS 脚本的。因此我们在开发 HTML 静态页面的时候，往往脚本都是在 Head 或者 Body 结束标签之前就写死了。如果要在 IPython 中增加 ECharts, 是不是需要修改一些配置文件，让 IPython Notebook 在 Header 部分引入 ECharts 脚本呢？
答案是不需要.
为何？因为 IPython Notebook 本身自带一个 Js 模块，叫做 RequireJS.可以动态引入并执行 JS.
具体原理我们不深究，但是这个模块为 IPython 动态引入其他 JS 框架和代码带来了无限的可能性。注意，这个模块可以帮助我们可以动态引入并执行 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: '闵行区美食类人均消费餐馆分布',
subtext: '数据来自大众点评',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
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
)
首先，配置对应的脚本。
require.config({
paths:{
echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min',
}
});
接着使用如下代码进行引入和执行代码：
require(['echarts'],function(ec){
var option = {
//... 图表配置
}
//... 获取图表 div
//... 为所获取的图表 DIV 设置
}
效果
ECharts 饼图
代码
老规矩，技术文章放代码。爬虫程序就不公开了。公开一个 IPythonNotebook 以及一个 Excel 表用于大家分析。
参考文档
- Python Web 开发实战
- RequireJS 的官网
- ECharts 官网
