# IPython Notebook 引入 ECharts 做可视化

# 0x01 前言

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 饼图案例。本文的数据来自大众点评闵行区部分美食店铺。

# 0x01 代码思路

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

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

执行就 IPython Notebook 中看到:

<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 中。

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 的配置模块。

require.config({
  paths: {
    echarts: "//cdn.bootcss.com/echarts/3.2.3/echarts.min",
  },
})

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

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

# 0x03 效果

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

ECharts 饼图

# 0x04 代码

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