前言

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官网