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

[[385366]]

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

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

首先，我們知道折線圖和柱狀圖都是直接坐標系下的圖表，都是由x軸和y軸組成，圖表中可以添加多個數據項，但是數據中難免會遇到量綱不一致的數據，即便是量綱一樣，有時候也會因為分組間的數據量級差異過大，導致數據量小的在圖中完全看不清楚。這種情況大家應該很容易就會想到excel的副坐標軸了，那么pyecharts中如何實現副坐標軸呢?

在pyecharts的直角坐標系下，我們可以為x軸和y軸添加索引，這個索引的意思其實就是分配每條坐標軸一個id，在插入數據項的時候指定所屬的坐標軸索引，就可以把數據項和坐標軸綁定到一起了。可是在大家的直觀印象里，直角坐標系不就只有兩條軸嗎?那坐標軸索引有啥意義呢?

沒錯，直角坐標系里是只有兩條坐標軸，但是這兩條軸只是廣義上的，指代的只是坐標軸方向而已，一個水平一個垂直。我們可以在這兩個方向上去擴展自定義新的坐標軸，也就是對應excel中常用的副坐標軸。

pyecharts擴展坐標軸的操作很簡單，以柱狀圖擴展坐標軸為例，就一個extand_axis函數，此函數中有三個可選參數，如果是要擴展y軸，那么只需要在參數yaxis中設置y軸相關配置項就可以了，當你需要額外增加x軸的時候，除了xaxis參數外還需要在xaxis_data中添加擴展x軸的數據。

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

這個時候很明顯不適合把銷售額的絕對值和利潤的百分比數據都使用柱狀圖來表示，通常我們是用柱狀圖表示絕對值、折線圖表示百分比，并且使用相同的橫坐標軸，就像這樣：

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

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='利潤率', 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') 

如上述代碼所示，我們首先是創建了一個bar對象，然后對這個柱狀圖添加x軸y軸的數據項和相關配置，注意在這里我們指定了yaxis_index=0，明確了柱狀圖使用索引為0的y軸。接下來就是調用extend_axis函數，對bar擴展一個y軸，在擴展時我們不需要為y軸添加數據或是指定索引，因為這一步只是為了給接下來把折線圖融合進來預留一個位置而已。注意到在第19行設置軸標簽的代碼中有formatter這一參數，在坐標軸配置中指的是坐標軸刻度的單位，“{value}”就是原本的整型刻度，我們在后面加上一個“%”就變成了百分數。

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

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

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

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

(4)散點圖(氣泡)圖 : {a}(系列名稱)，{b}(數據名稱)，{c}(數值數組)

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

(6)餅圖、儀表盤、漏斗圖: {a}(系列名稱)，{b}(數據項名稱)，{c}(數值), w9sph6x(百分比)

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