快捷導(dǎo)航

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

更新時(shí)間：2019年12月09日 11:58:06 作者：無(wú)錫肖奈

這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們先來(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)我們的最終效果了