上一篇文章中我們介紹了柱狀圖的創(chuàng)建和配置，在第一篇文章中也附上了有關(guān)于折線圖的代碼示例。那么當(dāng)你接到一個(gè)需求，要把兩組量綱不一樣的數(shù)據(jù)放到一起的時(shí)候，折線圖、柱狀圖，你選哪一個(gè)呢?

[[385366]]

小學(xué)生才做選擇，分析師我們都要!而且是一起要!

今天我們就來看一下pyecharts中折線圖和柱狀圖怎樣組合到一起。

首先，我們知道折線圖和柱狀圖都是直接坐標(biāo)系下的圖表，都是由x軸和y軸組成，圖表中可以添加多個(gè)數(shù)據(jù)項(xiàng)，但是數(shù)據(jù)中難免會(huì)遇到量綱不一致的數(shù)據(jù)，即便是量綱一樣，有時(shí)候也會(huì)因?yàn)榉纸M間的數(shù)據(jù)量級(jí)差異過大，導(dǎo)致數(shù)據(jù)量小的在圖中完全看不清楚。這種情況大家應(yīng)該很容易就會(huì)想到excel的副坐標(biāo)軸了，那么pyecharts中如何實(shí)現(xiàn)副坐標(biāo)軸呢?

在pyecharts的直角坐標(biāo)系下，我們可以為x軸和y軸添加索引，這個(gè)索引的意思其實(shí)就是分配每條坐標(biāo)軸一個(gè)id，在插入數(shù)據(jù)項(xiàng)的時(shí)候指定所屬的坐標(biāo)軸索引，就可以把數(shù)據(jù)項(xiàng)和坐標(biāo)軸綁定到一起了?？墒窃诖蠹业闹庇^印象里，直角坐標(biāo)系不就只有兩條軸嗎?那坐標(biāo)軸索引有啥意義呢?

沒錯(cuò)，直角坐標(biāo)系里是只有兩條坐標(biāo)軸，但是這兩條軸只是廣義上的，指代的只是坐標(biāo)軸方向而已，一個(gè)水平一個(gè)垂直。我們可以在這兩個(gè)方向上去擴(kuò)展自定義新的坐標(biāo)軸，也就是對(duì)應(yīng)excel中常用的副坐標(biāo)軸。

pyecharts擴(kuò)展坐標(biāo)軸的操作很簡(jiǎn)單，以柱狀圖擴(kuò)展坐標(biāo)軸為例，就一個(gè)extand_axis函數(shù)，此函數(shù)中有三個(gè)可選參數(shù)，如果是要擴(kuò)展y軸，那么只需要在參數(shù)yaxis中設(shè)置y軸相關(guān)配置項(xiàng)就可以了，當(dāng)你需要額外增加x軸的時(shí)候，除了xaxis參數(shù)外還需要在xaxis_data中添加擴(kuò)展x軸的數(shù)據(jù)。

但是只有這一步操作只能夠在柱狀圖的基礎(chǔ)上添加一個(gè)副坐標(biāo)軸而已，單純的在柱狀圖上增加一個(gè)副坐標(biāo)軸也并沒有多少實(shí)際意義，因?yàn)橹鶢顖D本身是為了更直觀的比較每個(gè)柱子的高度，而采用兩個(gè)量綱不一致的y軸并不能直接比較，而且很容易混淆不同數(shù)據(jù)系列，反倒是降低了柱狀圖的可讀性。在實(shí)際工作當(dāng)中，我們更多時(shí)候遇到的是這樣的數(shù)據(jù)：

這個(gè)時(shí)候很明顯不適合把銷售額的絕對(duì)值和利潤(rùn)的百分比數(shù)據(jù)都使用柱狀圖來表示，通常我們是用柱狀圖表示絕對(duì)值、折線圖表示百分比，并且使用相同的橫坐標(biāo)軸，就像這樣：

pyecharts中是分別創(chuàng)建好柱狀圖和折線圖，并為兩者指定不同的y軸和相同的x軸，然后使用overlap函數(shù)將兩者圖層疊加到一起：

from pyecharts import options, charts 
from pyecharts.commons.utils import JsCode 
month = ['{}月'.format(x) for x in list(range(1, 13))] 
amountA = [89, 90, 98, 107, 85, 81, 70, 89, 88, 96, 81, 64] 
amountB = [92, 85, 74, 120, 56, 70, 58, 92, 65, 51, 89, 76] 
rateA = ['24%', '22%', '21%', '19%', '24%', '18%', '21%', '16%', '22%', '22%', '17%', '15%'] 
rateB = ['19%', '19%', '24%', '23%', '19%', '17%', '15%', '20%', '23%', '22%', '18%', '23%'] 
bar = ( 
charts.Bar(init_opts=options.InitOpts(width='1000px', height='400px')). 
set_global_opts(yaxis_opts=options.AxisOpts(name='銷售額', position='left', max_=150)). 
add_xaxis(month). 
add_yaxis(series_name='A商品', y_axis=amountA, yaxis_index=0, color='#FFA54F', bar_width=20, 
itemstyle_opts=options.ItemStyleOpts(border_color='#BEBEBE', border_width=2, border_type='dotted')). 
add_yaxis(series_name='B商品', y_axis=amountB, yaxis_index=0, color='#FF4500', bar_width=20, 
itemstyle_opts=options.ItemStyleOpts(border_color='#BEBEBE', border_width=2, border_type='dotted')). 
extend_axis(yaxis=options.AxisOpts(name='利潤(rùn)率', position='right', type_='value', 
axislabel_opts=options.LabelOpts(formatter='{value}%'))) 
) 
line = ( 
charts.Line(init_opts=options.InitOpts(width='1000px', height='400px')). 
add_xaxis(month). 
add_yaxis(series_name='A商品', y_axis=[int(x.replace('%', '')) for x in rateA], yaxis_index=1, 
label_opts=options.LabelOpts(is_show=True, 
formatter=JsCode("function (params) {return params.value[1] + '%'}"))). 
add_yaxis(series_name='B商品', y_axis=[int(x.replace('%', '')) for x in rateB], yaxis_index=1, 
label_opts=options.LabelOpts(is_show=True, 
formatter=JsCode("function (params) {return params.value[1] + '%'}"))) 
) 
bar.overlap(line) 
bar.render('bar.html') 

如上述代碼所示，我們首先是創(chuàng)建了一個(gè)bar對(duì)象，然后對(duì)這個(gè)柱狀圖添加x軸y軸的數(shù)據(jù)項(xiàng)和相關(guān)配置，注意在這里我們指定了yaxis_index=0，明確了柱狀圖使用索引為0的y軸。接下來就是調(diào)用extend_axis函數(shù)，對(duì)bar擴(kuò)展一個(gè)y軸，在擴(kuò)展時(shí)我們不需要為y軸添加數(shù)據(jù)或是指定索引，因?yàn)檫@一步只是為了給接下來把折線圖融合進(jìn)來預(yù)留一個(gè)位置而已。注意到在第19行設(shè)置軸標(biāo)簽的代碼中有formatter這一參數(shù)，在坐標(biāo)軸配置中指的是坐標(biāo)軸刻度的單位，“{value}”就是原本的整型刻度，我們?cè)诤竺婕由弦粋€(gè)“%”就變成了百分?jǐn)?shù)。

繼續(xù)創(chuàng)建折線圖line，為line輸入x、y軸數(shù)據(jù)，這里需要注意的是我們y軸是百分比數(shù)據(jù)，對(duì)于echarts來說不可讀，所以我們要把他后面的“%”去掉并轉(zhuǎn)換成整型數(shù)字，然后在label_opts參數(shù)中設(shè)置數(shù)據(jù)項(xiàng)標(biāo)簽的顯示格式，注意這里的formatter和上一個(gè)設(shè)置y軸標(biāo)簽的formatter傳入的值并不一樣，我們把它區(qū)分開來講：

(1)軸標(biāo)簽設(shè)置中，可以直接使用“{value}%”的形式來格式化標(biāo)簽，“{value}”指的就是軸標(biāo)簽刻度值，后接需要格式化輸出的字符串就可以了

(2)在設(shè)置柱狀圖的數(shù)據(jù)標(biāo)簽時(shí)，可以通過“{c}%”來將數(shù)值格式化為百分?jǐn)?shù)，或是將百分號(hào)改為其他表示單位的符號(hào)，同樣的還可以用“{a}”、“”分別指代系列名稱(A商品或B商品)、類目值(1月、2月等)。

(3)折線圖原本與柱狀圖完全一致的，但由于pyecharts開發(fā)者將折線圖的數(shù)據(jù)系列寫成了由類目和數(shù)值組成的而為數(shù)組，使得echarts對(duì)“{c}”識(shí)別出錯(cuò)，導(dǎo)致無法只針對(duì)數(shù)值項(xiàng)格式化，故而此處暫由JsCode代替。希望開發(fā)者們可以早日修復(fù)這一問題，大家也可以關(guān)注我們的文章，后續(xù)會(huì)將手動(dòng)修改pyecharts的源文件的方法整理出來，供大家參考。

(4)散點(diǎn)圖(氣泡)圖 : {a}(系列名稱)，(數(shù)據(jù)名稱)，{c}(數(shù)值數(shù)組)

(5)地圖 : {a}(系列名稱)，(區(qū)域名稱)，{c}(合并數(shù)值)

(6)餅圖、儀表盤、漏斗圖: {a}(系列名稱)，(數(shù)據(jù)項(xiàng)名稱)，{c}(數(shù)值), k6zqhab033oa(百分比)

在柱狀圖、折線圖都設(shè)置完畢后，我們就可以overlap將兩者圖層疊加起來了。這里需要注意的就是overlap的兩者前后關(guān)系了，規(guī)則是：在誰的基礎(chǔ)上擴(kuò)展了坐標(biāo)軸，就使用誰來調(diào)用overlap，圖層疊加后仍然使用它來render生成html文件。