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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了平城免費建站歡迎大家使用！

以這張圖來舉例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后我們來解決坐標(biāo)軸及圖形標(biāo)簽值顯示為負數(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;
  },

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼
網(wǎng)站地址：http://m.rwnh.cn/article0/jdgcio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站營銷、、Google、移動網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)