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

更新時間：2019年12月09日 11:58:06 作者：無錫肖奈

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

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

以這張圖來舉例

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

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

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

我們先來準備數(shù)據(jù)源:

{
   columns: ["日期", "收入", "支出"],
   rows: [
    {
     日期: "8/7",
     收入: -233,
     支出: 120
    },
    {
     日期: "8/5",
     收入: -322,
     支出:450
    },
    {
     日期: "7/4",
     收入: -432,
     支出: 430
    },
    {
     日期: "10/4",
     收入: -233,
     支出: 210
    }
   ]
  };

注意這里一定要把其中一項的值設置為負數(shù),否則無法顯示到左邊一欄

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

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

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

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

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

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

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

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

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

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

設置完這個屬性我們來看一下效果

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

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

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

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

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

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

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

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