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

[[385366]]

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

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

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

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

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

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

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

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

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='利潤率', 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)建了一個bar對象，然后對這個柱狀圖添加x軸y軸的數(shù)據(jù)項和相關配置，注意在這里我們指定了yaxis_index=0，明確了柱狀圖使用索引為0的y軸。接下來就是調(diào)用extend_axis函數(shù)，對bar擴展一個y軸，在擴展時我們不需要為y軸添加數(shù)據(jù)或是指定索引，因為這一步只是為了給接下來把折線圖融合進來預留一個位置而已。注意到在第19行設置軸標簽的代碼中有formatter這一參數(shù)，在坐標軸配置中指的是坐標軸刻度的單位，“{value}”就是原本的整型刻度，我們在后面加上一個“%”就變成了百分數(shù)。

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

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

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

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

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

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

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

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