pyecharts中折線(xiàn)圖和柱狀圖如何組合到一起

本篇內(nèi)容主要講解“pyecharts中折線(xiàn)圖和柱狀圖如何組合到一起”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“pyecharts中折線(xiàn)圖和柱狀圖如何組合到一起”吧!

首先，我們知道折線(xiàn)圖和柱狀圖都是直接坐標(biāo)系下的圖表，都是由x軸和y軸組成，圖表中可以添加多個(gè)數(shù)據(jù)項(xiàng)，但是數(shù)據(jù)中難免會(huì)遇到量綱不一致的數(shù)據(jù)，即便是量綱一樣，有時(shí)候也會(huì)因?yàn)榉纸M間的數(shù)據(jù)量級(jí)差異過(guò)大，導(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)軸索引有啥意義呢?

沒(méi)錯(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)軸也并沒(méi)有多少實(shí)際意義，因?yàn)橹鶢顖D本身是為了更直觀的比較每個(gè)柱子的高度，而采用兩個(gè)量綱不一致的y軸并不能直接比較，而且很容易混淆不同數(shù)據(jù)系列，反倒是降低了柱狀圖的可讀性。在實(shí)際工作當(dāng)中，我們更多時(shí)候遇到的是這樣的數(shù)據(jù)：

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

pyecharts中是分別創(chuàng)建好柱狀圖和折線(xiàn)圖，并為兩者指定不同的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='銷(xiāo)售額', 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軸。接下來(lái)就是調(diào)用extend_axis函數(shù)，對(duì)bar擴(kuò)展一個(gè)y軸，在擴(kuò)展時(shí)我們不需要為y軸添加數(shù)據(jù)或是指定索引，因?yàn)檫@一步只是為了給接下來(lái)把折線(xiàn)圖融合進(jìn)來(lái)預(yù)留一個(gè)位置而已。注意到在第19行設(shè)置軸標(biāo)簽的代碼中有formatter這一參數(shù)，在坐標(biāo)軸配置中指的是坐標(biāo)軸刻度的單位，“{value}”就是原本的整型刻度，我們?cè)诤竺婕由弦粋€(gè)“%”就變成了百分?jǐn)?shù)。

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

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

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

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

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

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

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

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

到此，相信大家對(duì)“pyecharts中折線(xiàn)圖和柱狀圖如何組合到一起”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！