溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

發(fā)布時間：2020-09-15 23:50:40 來源：腳本之家 閱讀：461 作者：無錫肖奈 欄目：web開發(fā)

我們先來看實(shí)現(xiàn)效果

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

以這張圖來舉例

通過重新封裝可以實(shí)現(xiàn)雙向條形圖的顯示

既可以橫向比較同一天的收入支出情況

也可以豎向比較不同日期的收入/支出情況

我們先來準(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ù),否則無法顯示到左邊一欄

設(shè)置完數(shù)據(jù)我們可以先看一眼效果:

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

初步實(shí)現(xiàn)條形圖一左一右的效果

那如何實(shí)現(xiàn)同一維度的兩個指標(biāo)在同一行顯示?

我們在配置屬性中加上這么一個屬性
"stack"

this.chartSettings = {
   stack: {
    xxx: [`收入`, `支出`]
   }
  };

查看官方文檔,我們來理解一下這個屬性

series[i]-bar.stack string
數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值可以堆疊放置。

也就是說,設(shè)置了這個屬性,我們可以讓兩個條形圖合并為一個

如果不考慮正負(fù)問題,堆疊即可實(shí)現(xiàn)下面這個效果

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

感興趣的可以去官方看一下在線運(yùn)行的演示效果
https://www.echartsjs.com/examples/zh/editor.html?c=bar-negative

設(shè)置完這個屬性我們來看一下效果

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

可以看到同一日期的收入支出情況已經(jīng)在一行顯示了

最后我們來解決坐標(biāo)軸及圖形標(biāo)簽值顯示為負(fù)數(shù)的問題

我們可以在 chartsetting 屬性中修改 label 的 formatter 屬性

自定義標(biāo)簽的文字
根據(jù)我們的需求,通過 Math.abs()的方法,以絕對值的形式顯示

 this.chartSettings = {
   label: {
    normal: {
     show: true,
     formatter: params => {
      return `${params.seriesName}:${Math.abs(params.value)}`;
     }
    }
   }
  };

坐標(biāo)軸數(shù)值修改也是一個道理

 afterConfig(options) {
   options.xAxis[0].axisLabel = {
    formatter: function(value) {
     return Math.abs(value);
    } //顯示的數(shù)值都取絕對值
   };
   return options;
  },

這樣就可以實(shí)現(xiàn)我們的最終效果了

vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手