vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
我們先來(lái)看實(shí)現(xiàn)效果
以這張圖來(lái)舉例
通過(guò)重新封裝可以實(shí)現(xiàn)雙向條形圖的顯示
既可以橫向比較同一天的收入支出情況
也可以豎向比較不同日期的收入/支出情況
我們先來(lái)準(zhǔn)備數(shù)據(jù)源:
{
columns: ["日期", "收入", "支出"],
rows: [
{
日期: "8/7",
收入: -233,
支出: 120
},
{
日期: "8/5",
收入: -322,
支出:450
},
{
日期: "7/4",
收入: -432,
支出: 430
},
{
日期: "10/4",
收入: -233,
支出: 210
}
]
};
注意這里一定要把其中一項(xiàng)的值設(shè)置為負(fù)數(shù),否則無(wú)法顯示到左邊一欄
設(shè)置完數(shù)據(jù)我們可以先看一眼效果:
初步實(shí)現(xiàn)條形圖一左一右的效果
那如何實(shí)現(xiàn)同一維度的兩個(gè)指標(biāo)在同一行顯示?
我們?cè)谂渲脤傩灾屑由线@么一個(gè)屬性
"stack"
this.chartSettings = {
stack: {
xxx: [`收入`, `支出`]
}
};
查看官方文檔,我們來(lái)理解一下這個(gè)屬性
series[i]-bar.stack string
數(shù)據(jù)堆疊，同個(gè)類(lèi)目軸上系列配置相同的stack值可以堆疊放置。
也就是說(shuō),設(shè)置了這個(gè)屬性,我們可以讓兩個(gè)條形圖合并為一個(gè)
如果不考慮正負(fù)問(wèn)題,堆疊即可實(shí)現(xiàn)下面這個(gè)效果
感興趣的可以去官方看一下在線(xiàn)運(yùn)行的演示效果
https://www.echartsjs.com/examples/zh/editor.html?c=bar-negative
設(shè)置完這個(gè)屬性我們來(lái)看一下效果
可以看到同一日期的收入支出情況已經(jīng)在一行顯示了
最后我們來(lái)解決坐標(biāo)軸及圖形標(biāo)簽值顯示為負(fù)數(shù)的問(wèn)題
我們可以在 chartsetting 屬性中修改 label 的 formatter 屬性
自定義標(biāo)簽的文字
根據(jù)我們的需求,通過(guò) Math.abs()的方法,以絕對(duì)值的形式顯示
this.chartSettings = {
label: {
normal: {
show: true,
formatter: params => {
return `${params.seriesName}:${Math.abs(params.value)}`;
}
}
}
};
坐標(biāo)軸數(shù)值修改也是一個(gè)道理
afterConfig(options) {
options.xAxis[0].axisLabel = {
formatter: function(value) {
return Math.abs(value);
} //顯示的數(shù)值都取絕對(duì)值
};
return options;
},
這樣就可以實(shí)現(xiàn)我們的最終效果了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過(guò)程記錄
有很多時(shí)候你在構(gòu)建應(yīng)用時(shí)需要訪(fǎng)問(wèn)一個(gè)API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶(hù)端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關(guān)于Vue2利用Axios發(fā)起請(qǐng)求的詳細(xì)過(guò)程,需要的朋友可以參考下2021-12-12
使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤(pán)】屏保效果附源碼
前段時(shí)間看抖音，有人用時(shí)間輪盤(pán)作為動(dòng)態(tài)的桌面壁紙，一時(shí)間成為全網(wǎng)最火的電腦屏保，后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤(pán)】，有點(diǎn)像五行八卦，感覺(jué)很好玩，于是突發(fā)奇想，自己寫(xiě)一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,需要的朋友可以參考下2019-04-04
本文主要介紹，通過(guò)使用基于 vue技術(shù)棧的前端開(kāi)發(fā)技術(shù)，在瀏覽器端調(diào)起攝像頭，并進(jìn)行掃碼識(shí)別功能，對(duì)識(shí)別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理，對(duì)vue瀏覽器掃碼功能的實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2021-10-10
vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue實(shí)現(xiàn)自定義日期組件功能的實(shí)例代碼
這篇文章主要介紹了vue自定義日期組件的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
解決vue 格式化銀行卡(信用卡)每4位一個(gè)符號(hào)隔斷的問(wèn)題
這篇文章主要介紹了vue 格式化銀行卡（信用卡）每4位一個(gè)符號(hào)隔斷的問(wèn)題，本文給大家分享了解決方法,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)打包添加二級(jí)目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫(xiě)的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue通過(guò)provide & inject兩個(gè)關(guān)鍵字完成父組件向子孫組件直接傳值，很像子類(lèi)能夠使用父類(lèi)的屬性一樣方便。provide & inject一般用于多層之間的傳值，兩層之間還是使用props進(jìn)行2021-10-10