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("""
这是一小块 HTML
""")

执行就 IPython 中看到：

这是一小块 HTML

的浏览器显示。

显示 HTML

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

答案是不需要.

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

具体原理我们不深究，但是这个模块为 IPython 动态引入其他 JS 框架和代码带来了无限的可能性。注意，这个模块可以帮助我们可以动态引入并执行 JS.

那么，我们就火速的看代码吧。

chart_header_html = """


"""
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 表用于大家分析。

• 对应的 IPythonNotebook
• 对应的 Excel 表

参考文档

• Python Web 开发实战
• RequireJS 的官网
• ECharts 官网