您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用ECharts畫(huà)柱狀圖”,在日常操作中,相信很多人在怎么用ECharts畫(huà)柱狀圖問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”怎么用ECharts畫(huà)柱狀圖”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
01 簡(jiǎn)單的柱狀圖
在ECharts中制作柱狀圖也十分簡(jiǎn)單,通過(guò)將series中的type設(shè)置為bar即可,代碼如下:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [100, 150, 120, 90, 50, 130, 110], type: 'bar' }] };
可視化結(jié)果如圖4-8所示。
▲圖4-8 簡(jiǎn)單的柱狀圖
我們同樣可以在代碼中添加label以顯示具體數(shù)值,例如在每個(gè)柱子上顯示對(duì)應(yīng)數(shù)值,代碼如下:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [100, 150, 120, 90, 50, 130, 110], type: 'bar', label: { show: true, position: 'top' }, }] };
可視化結(jié)果如圖4-9所示。
▲圖4-9 簡(jiǎn)單的柱狀圖加入label
02 聚合柱狀圖
除了簡(jiǎn)單的柱狀圖,在實(shí)際場(chǎng)景中也會(huì)經(jīng)常用到聚合柱狀圖,以更直觀地比較各維度信息。例如,在原來(lái)的代碼中加入legend,再加入一批數(shù)據(jù),并將x軸的星期改為不同商場(chǎng),代碼如下:
option = { title: { text: '產(chǎn)品一周銷量情況' }, xAxis: { type: 'category', data: ['A商場(chǎng)', 'B商場(chǎng)', 'C商場(chǎng)', 'D商場(chǎng)', 'E商場(chǎng)', 'F商場(chǎng)', 'G商場(chǎng)'] }, yAxis: { type: 'value' }, legend: { data: ['A產(chǎn)品', 'B產(chǎn)品'] }, series: [{ name: 'A產(chǎn)品', data: [100, 150, 120, 90, 50, 130, 110], type: 'bar', label: { show: true, position: 'top' } }, { name: 'B產(chǎn)品', data: [120, 130, 110, 70, 60, 110, 140], type: 'bar', label: { show: true, position: 'top' } }] };
可視化結(jié)果如圖4-10所示。
結(jié)合圖4-10,我們可以非常直觀地比較不同商場(chǎng)的不同產(chǎn)品的銷售情況。
▲圖4-10 聚合柱狀圖
有時(shí)也會(huì)用到水平聚合柱狀圖,具體要如何實(shí)現(xiàn)呢?交換xAxis和yAxis中的內(nèi)容,同時(shí)將數(shù)字label中的position由top改為right即可,代碼如下:
option = { title: { text: '產(chǎn)品一周銷量情況' }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['A商場(chǎng)', 'B商場(chǎng)', 'C商場(chǎng)', 'D商場(chǎng)', 'E商場(chǎng)', 'F商場(chǎng)', 'G商場(chǎng)'] }, legend: { data: ['A產(chǎn)品', 'B產(chǎn)品'] }, series: [{ name: 'A產(chǎn)品', data: [100, 150, 120, 90, 50, 130, 110], type: 'bar', label: { show: true, position: 'right' } }, { name: 'B產(chǎn)品', data: [120, 130, 110, 70, 60, 110, 140], type: 'bar', label: { show: true, position: 'right' } }] };
可視化結(jié)果如圖4-11所示。
▲圖4-11 水平聚合柱狀圖
03 堆疊柱狀圖
除上述幾種柱狀圖,堆疊柱狀圖也是非常常用的。下面我們來(lái)制作一個(gè)不同產(chǎn)品在不同商場(chǎng)銷量的堆疊柱狀圖,代碼如下:
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['A商場(chǎng)', 'B商場(chǎng)', 'C商場(chǎng)', 'D商場(chǎng)', 'E商場(chǎng)'] }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['A產(chǎn)品', 'B產(chǎn)品', 'C產(chǎn)品', 'D產(chǎn)品', 'E產(chǎn)品', 'F產(chǎn)品', 'G產(chǎn)品'] }, series: [ { name: 'A商場(chǎng)', type: 'bar', stack: '總量', label: { show: true, position: 'inside' }, data: [320, 302, 301, 334, 390, 330, 320] }, { name: 'B商場(chǎng)', type: 'bar', stack: '總量', label: { show: true, position: 'inside' }, data: [320, 332, 301, 334, 490, 330, 310] }, { name: 'C商場(chǎng)', type: 'bar', stack: '總量', label: { show: true, position: 'inside' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'D商場(chǎng)', type: 'bar', stack: '總量', label: { show: true, position: 'inside' }, data: [150, 212, 201, 154, 190, 330, 410] }, { name: 'E商場(chǎng)', type: 'bar', stack: '總量', label: { show: true, position: 'inside' }, data: [420, 532, 501, 234, 290, 330, 320] } ] };
可視化結(jié)果如圖4-12所示。
▲圖4-12 堆疊柱狀圖
在上述代碼中,tooltip中的type為shadow,所以當(dāng)鼠標(biāo)懸停在柱子上時(shí),會(huì)顯示陰影效果。這里的堆疊效果主要是通過(guò)stack參數(shù)決定的,當(dāng)我們刪除A商場(chǎng)的stack參數(shù),并將B商場(chǎng)和C商場(chǎng)的stack參數(shù)改為“總量1”之后,其可視化結(jié)果如圖4-13所示。所以可以這樣理解:stack參數(shù)相同的柱子會(huì)堆疊在一起,如果沒(méi)有這個(gè)參數(shù),則該部分不堆疊。
▲圖4-13 堆疊柱狀圖調(diào)整堆疊效果
到此,關(guān)于“怎么用ECharts畫(huà)柱狀圖”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。