pyecharts x轴全显示_这应该是最通俗易懂的PyEcharts的操作指南！

r囧r小猫 2023-01-03 01:54 298阅读 0赞

![6a9686b5c6321404a24560d323c0d99c.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.3.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 小项：

![4d86199f55ae8daf61f11f31a98e5956.png][]

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

![70fe2901fc97025d2fe0d406185e0c9e.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 获取数据：

![5192970555c282c5959e31be2306fd10.png][]

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

![335bdc295a684f861ca8d1c2de0dde23.png][]

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

![1f4a5eac2d0941c0c29f6d6881c99ed3.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))

![f0f66a6d0b60bf41ef68c6df6b8debc3.png][]

PyEcharts v0.5

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

![86767621da38e2906c5db6c9daf691f1.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 中。

![17b36ea084004a8c3ea5d4af87570a8a.gif][]

PyEcharts 1.0

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

![0ed9fe06144445cb4393cb309e875c4a.png][]

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

![eeeb28f243b41d3b80906ba1c699ebd8.png][]

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

*  用 add\_xaxis() 来修饰 x 轴(第 3 行)传入**日期列表 **
 *  用 add\_yaxis() 来修饰 y 轴(第 4 行)传入**价格列表**
 *  用 set\_global\_opts() 来设置全局配置(第 5-16 行)，主要配置包括：

*   *  y 轴可缩放，且颜色交错(第 6-12 行)
     *  x 轴可缩放(第 13 行)
     *  设置标题(第 14 行)
     *  数据局域缩放(第 15 行)

![0306b6156483dc8af172898ab38325ce.png][]

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

*  用 add\_xaxis() 来修饰 x 轴(第 21 行)传入**日期列表**** **
 *  用 add\_yaxis() 来修饰 y 轴(第 22-29 行)传入**最高价列表**
 *  用 add\_yaxis() 来修饰 y 轴(第 30-37 行)传入**最低价列表**
 *  用 set\_global\_opts() 来设置全局配置，主要设置数据局域缩放(第 38 行)

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

![d210ef269aec0c287b3427b38ee290aa.png][]

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

![17b36ea084004a8c3ea5d4af87570a8a.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())

![739cd37269a148b395978a936ea6a462.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))

![cb8155ea8bcb396ba4a05afb7ec6faf0.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))

![bf11a40842b8369e7a2ba1c6145f2792.png][]

PyEcharts v0.5

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

代码如下：

![76f2958bc1a06f08c3623d39db5e98ae.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 中。

![193125a9b76fd9a21a89d88ded2a224b.gif][]

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

PyEcharts v1.0

直接上代码。

![4ecc0e1a56904fe310365673a1d3e3c5.png][]

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

![4929d6f91590866750eb84c4c054c31c.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 可以任意缩放三幅图的数据。

![8c34f3dab7b1457c9d0c4e9ac9dc1b6f.png][]

![3b0fe308cd5d84202d939de8eecab396.png][]

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

![8cdb8e2157da79c8d5424eb17416baa2.png][]

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

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

最后(第 82 行)在 notebook 里展现 grid\_chart。

![193125a9b76fd9a21a89d88ded2a224b.gif][]

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

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

![cc71fa14c0f1f1a7c3f5771a2d60fdb5.png][]

![db17c3db6eede989657985a726bb55ce.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 线，这里面的内容最丰富。

![751659f8519fb22eef6e0dd8cf782bb1.png][]

![db7fb397b211092d44258f36bf98ee3a.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。

![72b99d83b02e536da206eea8c99becf3.png][]

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

![e1e16de37982ed07ddaee4ab4eee78e1.png][]

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

![407c9b39db31431b294e87ae55ff8615.png][]

看效果吧。

![92803cfdcc769a4b7ff50afcfed64e17.gif][]

4总结

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

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

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

[6a9686b5c6321404a24560d323c0d99c.png]: /images/20221119/a70ddde220804d0c8fca539ec16d0be9.png
[4d86199f55ae8daf61f11f31a98e5956.png]: /images/20221119/6e54b2dadf2a4f7598df22e7ce26e4c3.png
[70fe2901fc97025d2fe0d406185e0c9e.png]: /images/20221119/1120d8091aa748baa5dfdd9896257490.png
[5192970555c282c5959e31be2306fd10.png]: /images/20221119/86c6baf2da7d4624a267ee62a1480da3.png
[335bdc295a684f861ca8d1c2de0dde23.png]: /images/20221119/4328b399055f4aa3a6c6386f794b25d1.png
[1f4a5eac2d0941c0c29f6d6881c99ed3.png]: /images/20221119/73b7d1b9d33943f8ad048a8c2b1cbb1c.png
[f0f66a6d0b60bf41ef68c6df6b8debc3.png]: /images/20221119/c4e789d0448c401c9c5334866420b52d.png
[86767621da38e2906c5db6c9daf691f1.png]: /images/20221119/eacc23d9060c4bc1b6fd05a898d70553.png
[17b36ea084004a8c3ea5d4af87570a8a.gif]: /images/20221119/c3e83655d2ea4d77803d4a2cdd6ca59f.png
[0ed9fe06144445cb4393cb309e875c4a.png]: /images/20221119/1d71fbde24d54496bc7964b6de1e8187.png
[eeeb28f243b41d3b80906ba1c699ebd8.png]: /images/20221119/2c68483b22f44882aff655e3ff144f75.png
[0306b6156483dc8af172898ab38325ce.png]: /images/20221119/f58dc0738e3d443a83ea7b4081d4ea5e.png
[d210ef269aec0c287b3427b38ee290aa.png]: /images/20221119/d028e9d88dc14a42b20e2cf1d974f288.png
[739cd37269a148b395978a936ea6a462.png]: /images/20221119/11a0ef88db70416fae3c21a3c3635cae.png
[cb8155ea8bcb396ba4a05afb7ec6faf0.png]: /images/20221119/ddb65334387d49b6b62898ea15c8cd5e.png
[bf11a40842b8369e7a2ba1c6145f2792.png]: /images/20221119/d972ceea169844c79a36f55e751179af.png
[76f2958bc1a06f08c3623d39db5e98ae.png]: /images/20221119/dd35ff93469e49af9f2335caeb424bd0.png
[193125a9b76fd9a21a89d88ded2a224b.gif]: /images/20221119/62648d96ea404516b403a2fa1dddc708.png
[4ecc0e1a56904fe310365673a1d3e3c5.png]: /images/20221119/0be02977132941eeb5f6b22dab7488c1.png
[4929d6f91590866750eb84c4c054c31c.png]: /images/20221119/23f68db264f6449db9e9c15839629c92.png
[8c34f3dab7b1457c9d0c4e9ac9dc1b6f.png]: /images/20221119/9f95d222e9684a018822e3c687a8fc1c.png
[3b0fe308cd5d84202d939de8eecab396.png]: /images/20221119/c5b2298fa03d45f9bfa5bcfc5c2f740e.png
[8cdb8e2157da79c8d5424eb17416baa2.png]: /images/20221119/6a4e9f9d1fb94417a5b6ef501b0a0b35.png
[cc71fa14c0f1f1a7c3f5771a2d60fdb5.png]: /images/20221119/f83581166e0645a38009855db49c33c0.png
[db17c3db6eede989657985a726bb55ce.png]: /images/20221119/9dd3b1d4cee14a899daf88408a17ee9e.png
[751659f8519fb22eef6e0dd8cf782bb1.png]: /images/20221119/a40e799f6dfc4a509fff1676c34d4618.png
[db7fb397b211092d44258f36bf98ee3a.png]: /images/20221119/9527562600df45dc8da056cdb047bab4.png
[72b99d83b02e536da206eea8c99becf3.png]: /images/20221119/91cae190d08d449e9f3f32489ff0560a.png
[e1e16de37982ed07ddaee4ab4eee78e1.png]: /images/20221119/c8dddb8dafb0466995c28acf11770543.png
[407c9b39db31431b294e87ae55ff8615.png]: /images/20221119/64b39b52151f405bad78cae0898efd1d.png
[92803cfdcc769a4b7ff50afcfed64e17.gif]: /images/20221119/4a2158636d294d9ebcf29d4a940dd19b.png