IPython Notebook 引入 ECharts 做可视化

前言

Python 的开发生态圈有相当多的好用的数据分析挖掘工具。Pandas,Numpy,Scikit-Learn 等等。

在进行数据分析挖掘的方面,我们选用 IPython Notebook 对数据进行前期的探索和挖掘。以及内部的可视化交流。

也需要经常新的进行一些可视化来使得探索过程更加的顺利。面对海量的数据可视化,也依照目的使用不同的工具。

  • 对于后台开发 / 数据挖掘 / 爬虫工程师而言,内部沟通的过程中注重信息交流沟通的快捷和准确,而不需要考虑可视化的美观程度,所以使用 IPython Notebook 配上 Matplotlib 或者是 Seaborn 进行可视化。
  • 与其他非开发的技术人员交流沟通的时候,这个时候优美的图表就成为了重中之重。

可是 Seaborn Matplotlib 这些库画出来的图,如同那些其貌不扬的高手,包含大量信息,美中不足的就是不美。那可不可以使用更加漂亮的图来可视化呢?

有,ECharts案例地址戳这里

想拥有 IPython Notebook 的优点上,还能够最大化 IPython Notebook 的美观程度,这就是我们想在 IPython Notebook 中引入 ECharts 作为可视化的初衷。

如果你使用过 IPython Notebook,细心的你一定大致了解,核心困难点在于如何在 IPython Notebook 中引入 ECharts.

今天我们使用 IPython NoteBook 来演示一个简单的 ECharts 饼图案例。本文的数据来自大众点评闵行区部分美食店铺。

代码思路

IPython 中,我们知道,可以通过 IPython.display 导入 HTML.

1
2
3
4
from IPython.display import HTML
HTML("""
<div>这是一小块 HTML</div>
""")

执行就 IPython Notebook 中看到:

1
<div>这是一小块 HTML</div>

显示 HTML

但问题来了,我们知道,在通常的情况下,是不能动态引入 JS 脚本的。因此我们在开发 HTML 静态页面的时候,往往脚本都是在 Head 或者 Body 结束标签之前就写死了。如果要在 IPython 中增加 ECharts, 是不是需要修改一些配置文件,让 IPython Notebook 在 Header 部分引入 ECharts 脚本呢?

答案是不需要.

为何?因为 IPython Notebook 本身自带一个 Js 模块,叫做 RequireJS. 通过这个模块可以动态引入并执行 JS.

具体原理不详细介绍,但是这个模块为 IPython Notebook 动态引入其他 JS 框架和代码带来了无限的可能性。注意,再次强调,这个模块可以帮助我们可以动态引入并执行 JS.

于是通过下面的代码,我们就轻松的将 ECharts 引入到 IPython Notebook 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
)

看一看代码,首先,配置对应的脚本。引入 requirejs 的配置模块。

1
2
3
4
5
require.config({
paths:{
echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min',
}
});

接着使用如下代码进行引入和执行代码,具体的 Demo 可以参考文章末尾的代码:

1
2
3
4
5
6
7
require(['echarts'],function(ec){
var option = {
//... 图表配置
}
//... 获取图表 div
//... 为所获取的图表 DIV 设置
}

效果

于是,美观漂亮的可视化图就出来了。

ECharts 饼图

代码

附上 IPythonNotebook 以及 Excel 表用于大家分析。