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

广告位

    前言:有关柱状图绘制的代码&参数解析在第二部分,只需要画图的童鞋可以直捣黄…

 

 

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

文章目录

1.关于Echarts及pyecharts

1.1 简介

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

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

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等。放几张不同风格感受一下。
把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)
设置方法如下:

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")) 

对比效果:把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)
如果你还有更多想法,插入背景图也可以。(我随便做的,确实挺丑)

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 

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

2.1.2 标题配置项

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

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

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

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轴命名                          ) ) 

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

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")) # 数据标签位置修改至右侧 

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

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)",             } 

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

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")  

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

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") ) 

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

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") ) 

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

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.

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.(附一张测试成功图)
把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)

3.1.2 配置ChromeDriver

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

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

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

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") 

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

4.如何和PPT梦幻联动

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

这些具体的步骤,前人之述备矣,默默放个链接供大家参考:。

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

把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)
虽然直接在弹窗中选择忽略就可以解决问题,但会大大影响展示的连贯性。可以在生成的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"/>> 

把数据做得更好看1——Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)
3 展示比例

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

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

 

月明星稀

关于作者: 月明星稀

为您推荐