前言

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

• 对应的 IPythonNotebook
• 对应的 Excel 表

参考文档

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