pyecharts x轴字体大小调整_PyEcharts实战指南

PyEcharts

Author：王圣元

From：王的机器

244da2313e8e29d0adf4bdc8c8f5fc4d.png

本文含 5835 字，33图表截屏建议阅读 30 分钟0引言

有读者说〖PyEcharts〗一贴里的图美如画，但是版本是 pyecharts v0.5，用现在 v1.0 来运行会出错，建议我再写篇 pyecharts v1.0 的。我最不喜欢让读者失望，这不我就来了。

用 v1.0 来运行 v0.5 的代码是肯定会报错的，v0.5 和 v1 间不兼容，v1 是一个全新的版本。首先来回顾 v0.5 的方法总结。

PyEcharts v0.5 方法总结

对 pyecharts 中的所有原件，都是先创建 (可以带些必要属性，比如标题和尺寸)，再用 add 方法添加额外属性。其通用化流程为

    object = Object( 必要属性 )

    object.add( 额外属性 )

在画图之前，你应该对那些原件可以干嘛有个大概印象，比如 Kline 是画 K 线图，Heatmap 是画热力图，WordCloud 是图词云图等等。对于那些装饰原件所需的必要属性和额外属性，上官网一查便知，跟着例子看理解更快。

画多个坐标系用 Grid 对象；叠加多个原件用 Overlap 对象；随着时间轴展示不同时点的数据关系用 Timeline 对象，等等。

首先用 pip 安装 pyecharts

pip install pyecharts

引入 pyecharts 并打印出它的版本

import pyecharts as pyeprint('pyecharts: %s' % pye.__version__)
pyecharts: 1

本文首先对比 pyecharts v0.5 和 v1.0 的区别，之后举三个从简单到复杂的例子来学习 v1.0 的用法。

1v0.5 Vs v1.0引入基本元件

在 v0.5 中，引入 Line (线)、Kline (K 线)、Bar (柱状图)、Pie (饼状图)、Grid (多坐标系)、Overlap (叠加对象)、Timeline (时间轴轮播图)、TreeMap (树状图) 和 WordCloud (词云图) 的代码如下：

from pyechartsimport Line, Kline, Pie,        Grid, Overlap, Timeline,        TreeMap, WordCloud

在 v1.0 中，引入它们(除了 Overlap)的代码如下：

from pyecharts.charts import Line, Kline, Pie,        Grid, Timeline,        TreeMap, WordCloud

在 v1.0 中，我们从 pyecharts.charts 中引入元件，而不是从 pyecharts 引入。此外，v1.0 已经没有用于组合元件的 Overlap 了，它有一种更简单的组合方法。对于两个元件，K 线 kline 和线 line，v0.5 和 v1.0 的代码如下：

v0.5：需要先创建一个 Overlap 对象，再把 kline 和 line 一个个添加进去。

    overlap = Overlap()

    overlap.add(kline)

    overlap.add(line)

v1.0：每个元件都有 overlap() 函数，可以另外元件，比如先创建 kline 再添加 line.

    kline.overlap(line)

一切皆配置

在 pyecharts v1.0 中，一切皆配置(options)。配置项有两种：全局配置项和系列配置项。

全局配置项有以下 16 小项：

32dffbf88e731d007526a3b945458afd.png

系列配置项有以下 14 小项：

5b414b7bc02b9a9bd5e5be2cf4a063ee.png

配置项越细就能画出更多细节。在后面几节我们会重点说明，尤其是全局配置项，它可通过 set_global_options 方法来设置。

引入 pyecharts 里的 options 代码如下：

from pyecharts import options as opts

1K 线图数据

首先用 YahooFinancials API 来下载外汇的三年半历史数据，安装该 API 用一行代码：

pip install yahoofinancials

数据的描述如下

  • 起始日：2016-01-01

  • 终止日：2019-05-13

  • 四个外汇：欧元美元、美元日元、美元人民币，英镑美元

其中货币用的不是市场常见格式，比如「欧元美元」用 EURUSD=X，而不是 EURUSD，而「美元日元」用 JPY=X 而不是 USDJPY

下面代码就是从 API 获取数据：

725729ed9f913ccb013e94c791eb2490.png

该 API 返回结果 FX_daily 是「字典」格式，样子非常丑陋，感受一下。

e6fa92916e8f441ee6418b472d376ce8.png

数据样子虽丑，但还满齐全，画 K 线需要的开盘价 (open)、最高价 (high)、最低价 (low)、收盘价 (close) 都有。将上面的「原始数据」转换成 DataFrame，代码如下：

ad370e60fd8cf27cd6f6c2d20501f44e.png

第 3 行完全是为了 YahooFinancial 里面的输入格式准备的。如果 Asset 是加密货币，直接用其股票代码；如果 Asset 是汇率，一般参数写成 EURUSD 或 USDJPY

  • 如果是 EURUSD，转换成 EURUSD=X

  • 如果是 USDJPY，转换成 JPY=X

第 6 行定义好开盘价、收盘价、最低价和最高价的标签。

第 7 行获取出一个「字典」格式的数据。

第 8, 9 行用列表解析式 (list comprehension) 将日期和价格获取出来。

第 11 到 13 行定义一个 DataFrame

  • 值为第 9 行得到的 price 列表

  • 行标签为第 8 行得到的 index 列表

  • 列标签为第 6 行定义好的 columns 列表

处理过后的数据格式美如画，看看 USDCNY。

curr = 'USDCNY'data = data_converter( FX_daily, curr, 'FX' )data.head(3).append(data.tail(3))

559f095e6839e5af358a5e783771365d.png

PyEcharts v0.5

PyEcharts 0.5 里画 K 线用到 Kline对象，除此之外我们添加最高价和最低价两条线 Line 对象，再用 Overlap 对象来「叠加」它们。

c61acf9ce2b04e2343f412af3c4e8c21.png

第 1-2 行获取日期和汇率。

第 4 行创建 K 线对象 Kline，设置好标题 "xxx Chart" 和位置 center。第 5-6 行在 Kline 上添加属性

  • 图例：'K-Line'，

  • x 坐标轴数据：日期

  • y 坐标轴数据：一定要按 [开盘值, 收盘值, 最低值, 最高值] 的顺序，之前处理数据特意按这个顺序设定 DataFrame 的列标签的

  • x 坐标轴可拉伸：True

  • 图例位置：右边

  • 图例排序：竖直

  • 图例文字大小：10

第 8 行创建折线对象 Line。第 9-13 行在 Line 上添加两条折线，一条是最高价，一条是最低价。

第 14 行创建叠加对象 Overlap。第 15-16 行在 Overlap 上分别添加之前的 Kline 和 Line，这样就把所有对象整合在一起了。

第 17 行如果被运行，该动态图被生成到 USDCNY Chart.html 网页文件里；如果没被运行，该动态图将显示在 Jupyter Notebook 中。

58b5ee357730d461897b2c7e656921a6.gif

PyEcharts 1.0

PyEcharts 1.0 里画 K 线用到 Kline 对象，除此之外我们添加最高价和最低价两条线 Line 对象，然后直接把两条线添加到 K 线上去。

a00ad021310f86cdd5114bee9f8ed928.png

需要把日期转成 'Y/m/d' 格式，在转成列表形式。在 v1.0 中，所有数据都需要转成列表形式。 

dd7979b988c8c1120d711c9ae59d5117.png

第 2 行用 Kline() 构造函数生成 K 线对象，然后

  • 用 add_xaxis() 来修饰 x 轴(第 3 行)传入日期列表 

  • 用 add_yaxis() 来修饰 y 轴(第 4 行)传入价格列表

  • 用 set_global_opts() 来设置全局配置(第 5-16 行)，主要配置包括：

    • y 轴可缩放，且颜色交错(第 6-12 行)

    • x 轴可缩放(第 13 行)

    • 设置标题(第 14 行)

    • 数据局域缩放(第 15 行)

c37c3194be72bdeb2b20a2c5f3b9b1d2.png

第 20 行用 Line() 构造函数生成线对象，然后

  • 用 add_xaxis() 来修饰 x 轴(第 21 行)传入日期列表 

  • 用 add_yaxis() 来修饰 y 轴(第 22-29 行)传入最高价列表

  • 用 add_yaxis() 来修饰 y 轴(第 30-37 行)传入最低价列表

  • 用 set_global_opts() 来设置全局配置，主要设置数据局域缩放(第 38 行)

在修饰 y 轴时，我们还设置了线的宽度和透明度、已经不打印出 y 轴对应的图示。

be72358b31465fb34359c5e426e88984.png

最后将 K 线和两条线组合在一起，在 notebook 里展现 (render_notebook)。

58b5ee357730d461897b2c7e656921a6.gif

在 v1.0 中，通用代码长得以下这个样子

    obj = (

        Object(…)

        .add_xaxis(…)

        .add_yaxis(…)

        .set_global_options(…)

    )

其中 Object 可以是任何常见元件，比如 Kline，Line 和 Bar 等等。三点省略号 … 就代表各种配置了，具体是什么那就要读文档了。

2股价 K 线图 + 折线图数据

本小节使用 5 个股票数据，描述如下：

  • 5 只股票：AAPL, JD, BABA, FB, GS

  • 1 年时期：从 2018-02-26 到 2019-02-26

再加上同时期的标准普尔 500 指数 (SPX)，和恐慌指数 (VIX)。数据如下：

stock_data = pd.read_csv( '1Y Stock Data.csv',                            parse_dates=[0],                           dayfirst=True )stock_data.head().append(stock_data.tail())

16d170d65605655b073d0c21e5282f0a.png

data = pd.read_csv( 'S&P500.csv',                      index_col=0,                     parse_dates=True,                     dayfirst=True )spx = data[['Adj Close']].loc['2018-02-26':'2019-02-26']spx.head(3).append(spx.tail(3))

873578a4f04477a763ae89dce0ec85fa.png

data = pd.read_csv( 'VIX.csv',                      index_col=0,                     parse_dates=True,                     dayfirst=True )vix = data[['Adj Close']].loc['2018-02-26':'2019-02-26']vix.head(3).append(vix.tail(3))

08567d2bbab53b9c91e9a29e53c579ff.png

PyEcharts v0.5

我们想把苹果股票的 K 线图，和 SPX 和 VIX 折线图放在一起看。如果再用 Overlap 来叠加它们会显得图很乱，这时可以借用 pyecharts 里的 Grid 对象，它是将上面三个图放在三个坐标系中。

代码如下：

6190b229b67a3f3f1f5bf758e87ba361.png

第 1-5 行用 code 获取股票数据，并获取日期和价格。为了画 K 线，价格数组的列必须按 pyecharts 里 API 要求的顺序 – [开盘价, 收盘价, 最低价, 最高价]。

第 6 -7 行创建 Kline 对象 (标题放左边)，并添加 x 轴数据、y 轴数据和“允许横轴拉伸”。

第 10 -12 行创建 Line 对象 (标题为 SPX，位置离顶 55%) 并起名为 line1，再添加若干属性，比如 y 轴范围、标识最小值、允许横轴拉伸。最关键的是 datazoom_xaxis_index=[2,1,0]，就说伸缩功能控制三个轴，AAPL 一个，SPX 一个，VIX 一个。这样拉伸 x 轴三幅子图可以同时动，非常酷！

第 15 -18 行创建 Line 对象 (标题为 VIX，位置离顶 75%) 并起名为 line2，再添加若干属性。

第 20 行创建 Grid 对象，宽 1000，高 600 (这些数值是不断尝试看效果设置的)。

第 20-23 行将三幅图加在 Grid 中，关键点是如何设置里面的 grid_top 和 grid_bottom 里的百分数而使得图看起来好看，这个没有标准的，不停地尝试到你最终满意为止。本例中 AAPL 占了 5% 到 50% 的位置，SPX 占了 55% 到 70% 的位置，VIX 占了 75% 到 90% 的位置 (还有 10% 位置留给了拉缩轴)。

第 24 行如果被运行，该动态图被生成到 APPL&VIX.html 网页文件里；如果没被运行，该动态图将显示在 Jupyter Notebook 中。

24e75ecc77ea1dc42d0ff02431ef6e14.gif

从图上可以看到在 2018 年底 SPX 和 VIX 同时到达最低点和最高点，对应的苹果 K 线看，在那一点前后苹果股价有一个大跌和大涨。

PyEcharts v1.0

直接上代码。

fde88f21e624e2898156d94dccd789ba.png

日期和 OLHC 价格所有数据都需要转成列表形式。

ac0782a4abe440bdf33277639d83a69f.png

用 Kline() 构造函数生成 K 线对象上节已经讲过，需要注意的是第 21 行中的 xaxis_index=[0,1,2]，这个设置太关键了。本图含三个子图

  1. 苹果股票的 K 线图(index 0)

  2. 标普 500 的折线图 (index 1)

  3. 恐慌指数的折线图 (index 2) 

上面设置是 index为 1 和 2 的两幅图的数据局部伸缩跟着 index 0 那幅图，这样就实现了用一根 x 轴的 slider 可以任意缩放三幅图的数据。

07b7318c42178ad26ed947a34ed04900.png

e4abfc974ba90c1d3299ad4f78a4ad78.png

用 Line() 构造函数生成线对象上节已经讲过，需要注意的是第 34 和 54 行，用 MarkPointOpts 选项标识出 SPX 的最小值和 VIX 的最大值。

e510742fd0d4e0a623abedad2111afef.png

第 57 行用 Grid() 构造函数来生成网格对象 grid_chart，用来组合上面的三幅图。

接下来一个个加上 AAPL K 线(第 69-72 行)、 SPX 折线(第 73-76 行)和 VIX 折线(第 77-80 行)，注意里面 GridOpts 选项里的位置参数。

最后(第 82 行)在 notebook 里展现 grid_chart。

24e75ecc77ea1dc42d0ff02431ef6e14.gif

3股价 K 线图 + 交易量柱状图数据

本小节使用标准普尔 500 指数 (SPX) 在 2018-02-26 到 2019-02-26 的数据。

fbd37c0900571abb40d1e98f1278f069.png

fe569da16b5c478bebe1c2e9ff0a2500.png

PyEcharts v1.0

首先整理一下数据，比如将它们转换成列表形式，等等。

date = pd.to_datetime(data.index).strftime('%Y/%m/%d').tolist()price = data[['Open','Close','Low','High']].values.tolist()close = data['Close']volume = data['Volume'].values.tolist()

先用 Kline() 构建 K 线，这里面的内容最丰富。

91bb87da1ef21cc12c853a6942361cfd.png

98ceaf0e83b3d6dcda30c679c22a3024.png

重点：

第 7 行 – 添加用 Hex 字符串表示的红和绿两种颜色，对应着 K线涨和跌的颜色。

第 22-37 行 – 添加两个「数据区域缩放」功能，一个看的到(用鼠标拉缩图最下面的 slider)，一个看不到(用鼠标直接在图中拉缩)，并且设置 xaxis_index =[0,1]，表示用 K 线图(index 0)来控制柱状图(index 1)。

第 39-46 行 – 将两幅图的提示框合并在一起(第 41 行这个设置太牛逼)。

第 57-67 行 – 坐标轴指示器配置和区域选择组件配置使得数据和轴可以一起联动。

再用 Line() 构建两条移动平均线，没什么可说的，用 pandas 里面的 rolling() 函数计算了 MA5 和 MA20。

3260d2359906aebc6d0d0a16f053fd25.png

再用 Bar() 构建交易量柱状图，注意第 112-115 行代码，这些设置为了不显示柱状图的 x 轴上的信息。

8ea3f8177874536d2823ee9ecade621e.png

最后将 K 线图、两条移动均线图和交易量柱状图组合。

4d6287738219d9d8ee02520b38a1db35.png

看效果吧。

0602d8f52ed0c46ca19190570719209e.gif

4总结

太累了不想总结了，对 pyecharts v1.0 记着一点就行了：

一切皆配置(options)，细节都在里面。

其他的都可以查文档，或者在函数中按“shift + tab”来查看有那些参数。

往期精彩：

深度学习100问-14：图像语义分割有哪些经典的上采样方法？

深度学习100问-13：深度学习如何制作个人数据集？

深度学习100问-12：深度学习有哪些经典数据集？

深度学习100问-11：什么是学习率衰减？

深度学习100问-10：如何部署一个轻量级的深度学习项目？

深度学习100问-9：为什么EfficientNet号称是最好的分类网络？

深度学习100问-8：什么是Batch Normalization？

深度学习100问-7：dropout有哪些细节问题？

深度学习100问-6：有哪些经典的卷积类型？

深度学习100问-5：如何阅读一份深度学习项目代码？

深度学习100问-4：深度学习应遵循怎样的论文研读路线？

深度学习100问-3：深度学习应掌握哪些Linux开发技术？

深度学习100问-2：深度学习应掌握哪些Git开发技术？

深度学习100问-1：深度学习环境配置有哪些坑？

一个算法工程师的成长之路

0ce0a3640e8beee10ffb9bd2a4a02716.png

209a50e15a68e94162c708623918d41b.png

长按二维码.关注机器学习实验室

51daae07a37cb2a5931b231c44fe5b17.png

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注