把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动（Python数据可视化）

前言：有关柱状图绘制的代码&参数解析在第二部分，只需要画图的童鞋可以直捣黄龙；如果你是想一起系统学习Echarts的童鞋，其他部分也是很吼的啊！

1.关于Echarts及pyecharts

1.1 简介

Echarts对于自身的定义是一个功能强大的交互式图形和可视化浏览器库(ECharts, a powerful, interactive charting and visualization library for browser)，是不错的前端数据可视化工具。
Echarts官网

而 pyecharts则将Echarts和适合做数据处理的python联系起来，提供了三十余种常用图表（如果不咕咕，我尽量都学下去）。
关于pyecharts

1.2 版本及安装

我使用的pyecharts是v1版本（支持Python3.6+），安装方式不管是pip安装还是源码安装都在这个链接中有介绍。（甚至你可以在编译器的虚拟环境下手动导入）

2.Python下Echarts的柱状图（Bar）绘制

在正文之前，先贴一段可以跑出图的代码，不至于看了半天还是两手空空。

from pyecharts.charts import Bar
bar = (
    Bar()
    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])   # 添加横轴
    .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])  # 添加纵轴
)  # 支持链式调用
bar.render()

下面的工作就是在基础上不断丰富，在功能和外观上不断变成我们想要的样子。

2.1 配置项

pyecharts中的配置项包括全局配置项和系列配置项，这些配置项有初始默认值，直观上影响着图表的外观和功能。熟练了解配置项才能画出心仪的图表。（挖个坑，如果有时间再写一篇配置项相关的文 ）
先罗列一些常用的配置项及它们对应的功能：

配置项	功能
InitOpts：初始化配置项	画布大小、主题、背景色等
TitleOpts：标题配置项	主标题、副标题字体位置等
AxisOpts：坐标轴配置项	坐标轴类型、名称、刻度等
LabelOpts：标签配置项	标签位置、文字属性等
ItemStyleOpts：图元样式配置项	图元颜色、纹理、透明度等

还有一些更进阶的配置项，暂时就先不介绍，进阶操作可以等一等进阶攻略。下面介绍一些绘制柱状图，也是其他类型图表，经常要自定义元素的配置项定义方法：

2.1.1 初始化配置项

在定义配置项之前，先把万物opts:

from pyecharts import options as opts

首先是画布大小的定义，默认值为900px*500px，可以按照以下代码调整：

bar = Bar(init_opts=opts.InitOpts(width="3000px", height="1500px"))  # 3000px*1500px

其次pyecharts 内置提供了 10+ 种不同的风格，另外也提供了便捷的定制主题的方法。默认风格为WHITE，除此之外有LIGHT,DARK,ROMANTIC等。放几张不同风格感受一下。

设置方法如下：

from pyecharts.globals import ThemeType  # 导入ThemeType
bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))  # LIGHT可以替换成喜欢的风格

当然有时候由于预设PNG格式的图表无背景，在预览时的白底下载后变成黑底，这时候可以通过设置背景颜色来调整。

bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.WONDERLAND, bg_color="white"))

对比效果：
如果你还有更多想法，插入背景图也可以。（我随便做的，确实挺丑）

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.globals import ThemeType
from pyecharts.commons.utils import JsCode

bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.WESTEROS,
                                    bg_color={
    
    "type": "transparent", "image": JsCode("img")},  #默认重复堆叠，可以设置"repeat":"no-repeat"取消
                                    width="1000px", height="500px"))
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
)
bar.add_js_funcs(
    """
    var img = new Image(); img.src = 'https://t7.baidu.com/it/u=3121829245,1362696912&fm=193&f=GIF';
    """
)  # 图片路径
bar.render

2.1.2 标题配置项

主副标题命名及标题间间距：

bar.set_global_opts(title_opts=opts.TitleOpts(title="这里是主标题", subtitle="这里是副标题", item_gap=10))

2.1.3 坐标轴配置项

坐标轴的类型包括value（数值轴），category（类目轴），time（时间轴），log（对数轴），利用不同类型的坐标轴可以做出复合图表。而对于基础的柱状图，一些常用的坐标轴配置可以参照如下代码：

bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.PURPLE_PASSION, width="2000px", height="1000px"))
        .add_xaxis(["价格九磅十五便士的衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .reversal_axis()  # 进行一个轴的旋转
        .set_global_opts(title_opts=opts.TitleOpts(title="这里是主标题", subtitle="这里是副标题", item_gap=10),
                         yaxis_opts=opts.AxisOpts(name="销售数量", name_gap=40, axislabel_opts=opts.LabelOpts(rotate=-15)),  # y轴命名,设置坐标轴名称与坐标轴间距，并且旋转防止名称过长
                         xaxis_opts=opts.AxisOpts(name="商品名称"),  # x轴命名
                         )
)

2.1.4 标签配置项

标签包括数据的标签和坐标轴的标签，设置的方式大同小异。而事实上标签配置项内置的formatter是个很复杂的东西，可以赋予标签计算，文字组合等多功能。例如在柱状图中刻度是自动生成的，但可以通过formatter给数值刻度加上单位。

bar=
( Bar()
  .set_global_opts(yaxis_opts=opts.AxisOpts(name="销售数量", axislabel_opts=opts.LabelOpts(formatter="{value}件"))   # 坐标轴标签修改
  .set_series_opts(label_opts=opts.LabelOpts(position="right")) # 数据标签位置修改至右侧

2.1.5 图元样式配置项

对于柱状图，图元就是柱，可以定义柱的属性。比如下面这个渐变圆柱。

 itemstyle_opts={
    
    
            "normal": {
    
    
                "color": JsCode(
                    """new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 244, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(0, 77, 167, 1)'
            }], false)"""
                ),
                "barBorderRadius": [30, 30, 30, 30],
                "shadowColor": "rgb(0, 160, 221)",
            }

2.2 几种柱状图代码范例

2.2.1 Stack Bar（堆叠柱状图）

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts.globals import ThemeType

bottom = [
    {
    
    "value": 12, "percent": 12 / (12 + 3)},
    {
    
    "value": 23, "percent": 23 / (23 + 21)},
    {
    
    "value": 33, "percent": 33 / (33 + 5)},
]
up = [
    {
    
    "value": 3, "percent": 3 / (12 + 3)},
    {
    
    "value": 21, "percent": 21 / (23 + 21)},
    {
    
    "value": 5, "percent": 5 / (33 + 5)},
]  # 分别定义堆叠底层和上层的数据
c = (
    Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
    .add_xaxis([1, 2, 3])
    .add_yaxis("product1", bottom, stack="stack1", category_gap="50%")
    .add_yaxis("product2", up, stack="stack1", category_gap="50%")
    .set_series_opts(
      label_opts=opts.LabelOpts(position="right",
                                formatter=JsCode("function(x){return Number(x.data.percent * 100).toFixed() + '%';}"),)
    )
)
c.render("StackBar.html")

2.2.2 Waterfall Plot（瀑布图）

from pyecharts.charts import Bar
from pyecharts import options as opts

x_data = [f"12月{str(i)}日" for i in range(1, 6)]
y_total = [0, 900, 1245, 1530, 1376]
y_in = [900, 345, 393, "-", "-"]
y_out = ["-", "-", "-", 108, 154] # 堆叠由三部分构成
bar = (
    Bar()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(series_name="", y_axis=y_total, stack="总量", itemstyle_opts=opts.ItemStyleOpts(color="rgba(0,0,0,0)"),) # 将总量设为无色实现堆叠
    .add_yaxis(series_name="收入", y_axis=y_in, stack="总量")
    .add_yaxis(series_name="支出", y_axis=y_out, stack="总量") 
    .set_global_opts(yaxis_opts=opts.AxisOpts(type_="value"))
    .render("waterfall_plot.html")
)

2.2.3 Histogram（直方图）

from pyecharts import options as opts
from pyecharts.charts import Bar

c = (
    Bar()
    .add_xaxis([60, 70, 80, 90, 100])
    .add_yaxis("应用统计学", [20, 40, 70, 50, 10], category_gap=0, color="purple")
    .set_global_opts(title_opts=opts.TitleOpts(title="直方图"),
                     yaxis_opts=opts.AxisOpts(name="人数"),
                     xaxis_opts=opts.AxisOpts(name="分数"))
    .render("histogram.html")
)

3.Selenium&Chrome的渲染

当然除了在本地目录生成html的输出，pyecharts也提供了渲染图片的功能。我用的是make_snapshot功能下的snapshot-selenium。 selenium配合Chrome完成图片的渲染生成。
如果你觉得HTML下另存为图片或者截屏已经可以满足需求，那这一部分就可以跳过了。

3.1 Selenium及WebDriver

Selenium是一个用于Web应用程序测试的工具，可以实现测试自动化，可以按照理解按键精灵的方式理解。Selenium的使用需要搭配不同浏览器的webdriver，简单介绍一下Selenium的安装以及和Chrome的ChromeDriver配置。

3.1.1 Selenium的安装及测试

pyecharts官方文档中给出了shell下pip的方法。

pip install snapshot-selenium

Windows也可以采用

pip install -U selenium

不过我还是研究了一下手动安装的方法，提供给对命令窗口没有辣么熟悉的童鞋。

1.下载最新版本的Selenium

2.在下载的jar包里写一个bat文本：
java -jar selenium-server-standalone-3.141.59.jar
（3.141.59为最新的版本号，根据自己版本更改）

3.运行bat，如果成功会提示Selenium server is up and running on port 4444.（附一张测试成功图）

3.1.2 配置ChromeDriver

下载ChromeDriver

上面提供的链接需要翻墙，根据自己的Chrome版本选择ChromeDriver的版本。（可以在Chrome的帮助-关于里面看到版本）。

下载解压后，手动创建一个存放浏览器驱动的目录，如： D:\ChromeDriver , 把下载的浏览器驱动exe文件复制过去。然后就是配置环境变量（此电脑-高级系统设置-环境变量-path）,把驱动目录添加进去，就完成了。

理论上，这样已经配置完成了。如果运行还出现’chromedriver’ executable needs to be in PATH的报错，就把这个驱动分别复制到Chrome和Python的根目录下，然后再在环境变量中添加Chrome的路径（Google\Chrome\Application）。

3.2 代码测试

附上一段测试代码，如果可以顺利运行，那么一张名为开心面具的PNG就会生成在文件夹里。

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.render import make_snapshot

from snapshot_selenium import snapshot

def bar_chart() -> Bar: 
    c = (
        Bar()
        .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
        .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))
        .set_global_opts(title_opts=opts.TitleOpts(title="测试Selenium&Chrome渲染图片"))
    )
    return c

make_snapshot(snapshot, bar_chart().render(), "开心面具.png")

4.如何和PPT梦幻联动

截至目前，画图的部分基本结束了。但是本着一条龙的精神，好看的图当然要在汇报中展示出来。Echarts的一大特色是前端交互，单纯一张静态图片其实损失了大量信息。所以接下来要完成的就是将代码生成的HTML嵌入PPT，让PPT也能完成交互演示。步骤主要包括：注册表修改、插入Web Browser并编程、 宏安全及Active X设置。

这些具体的步骤，前人之述备矣，默默放个链接供大家参考：点我看如何和PPT梦幻联动。

当然，这里结合我自己的操作说两个比较难解决的地方：
1 安全警告

虽然直接在弹窗中选择忽略就可以解决问题，但会大大影响展示的连贯性。可以在生成的HTML中的和< html>中间添加如下代码：

<!-- saved from url=(0031)http://echarts.apache.org/zh/index.html/ -->

这一行代码可以隐藏安全提示条，具体机制涉及到IE的Local Machine Zone。

2 导入的网页还是静态，并不能交互

将HTML中< head>部分中的meta修改：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>>

3 展示比例

pyecharts默认生成的HTML是在左上角的，可以通过更改render配置文件等一些操作使得图表可以自适应大小，提供一个链接。当然如果觉得太复杂，就根据你的屏幕分辨率去调整图表的大小（具体方法见第二章），使得图表大小能与设置的演示区域匹配。

以上就是pyecharts第一次分享的内容，第一次写博不太熟练，内容也偏多。下一次学习的内容应该是有关柱状图的动态展示，希望我不要咕咕咕。