關於 echarts 柱狀圖堆疊形態及 label 內容自定義,鼠標懸浮增長百分比信息的實現

先上效果圖:

通常咱們看到的柱狀圖,形態是這樣的:

那相比於原始形態的柱狀圖,大體有如下變化:
1.柱狀發生堆疊
2.柱狀信息內容及鼠標懸浮框內容,增長了百分比的信息

這樣修改的話可讓信息比對更加明顯,視覺效果也更優

首先先來定義咱們的數據源,每一個人數據確定不一樣,這裏能夠參考個人數據格式,對代碼進行必定的修改,以便複用

{
        stack: { 名稱: ["高", "較高", "通常", "差"] },
        columns: ["名稱", "高", "較高", "通常", "差"],
        ifpercent: true,
        rows: [
          { 名稱: "出勤率", 高: 276, 較高: 162, 通常: 28, 差: 1 },
          { 名稱: "做業完成狀況", 高: 6, 較高: 21, 通常: 172, 差: 268 },
          { 名稱: "學習精力投入", 高: 220, 較高: 188, 通常: 59, 差: 0 },
          { 名稱: "課外活動參與", 高: 218, 較高: 186, 通常: 62, 差: 1 }
        ]
      }

查閱官方文檔咱們能夠發現,只要在chartSettings屬性中設置 stack 字段,便可實現堆疊

因此我這裏在數據源中自定義了一個 stack 字段以傳入,stack 對象的定義格式爲:
stack:{xxx:["x","y","z"......]}
數組中的幾個屬性即爲你要選擇堆疊的指標名稱

設置完了 stack 咱們能夠得到如下效果:

接下來咱們修改柱狀圖上顯示的文字內容
我先按照個人數據格式,算出每一組的總分

this.chartData.rows.map((item, index) => {
        total = 0;
        this.chartData.columns.map((colitem, colindex) => {
          if (colindex != 0) {
            total += item[colitem];
          }
        });
        item.total = total;
      });

這裏由於每一個人數據格式不一樣,你們能夠參照個人方法進行必定的修改
而後修改 chartsettings 屬性中的 label 屬性

var that = this;
      this.chartSettings.label.normal.formatter = function(value, index) {
        var componentIndex = value.componentIndex;
        var totalcount = that.chartData.rows[componentIndex].total;
        return (
          ((value.data / totalcount).toFixed(4) * 100).toString().slice(0, 5) +
          "%"
        );
      };

咱們把 formatter 方法中的 value 屬性打印下來分析一下

componentIndex:表示每一個堆疊後的柱狀組的下標,對應圖上內容便可以分紅四個組

data:該指標的維度值

根據可知信息,便可拼接成比例形式的字符串內容,這裏咱們把數值保留兩位小數

接下來咱們再對鼠標懸浮內容進行自定義
咱們對 options 對象進行修改

options.tooltip = {
        trigger: "axis",
        axisPointer: {
          // 座標軸指示器，座標軸觸發有效
          type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow'
        },
        //數據格式
        formatter: function(params) {
          let dataFunction = function(params) {
            var componentIndex = params.componentIndex;
            var totalcount = that.chartData.rows[componentIndex].total;
            return (
              ((params.value / totalcount).toFixed(4) * 100)
                .toString()
                .slice(0, 5) + "%"
            );
          };
          String.prototype.splice = function(start, newStr) {
            return this.slice(0, start) + newStr + this.slice(start);
          };
         
          var str = "";

          params.map((item, index) => {
            str = that.chartData.ifpercent
              ? str.splice(
                  0,
                  item.marker +
                    item.seriesName +
                    " : " +
                    item.value +
                    " (" +
                    dataFunction(item) +
                    ") " +
                    "<br/>"
                )
              : str.splice(
                  0,
                  item.marker + item.seriesName + " : " + item.value
                );
          });
          str = str.splice(0, params[0].name + "<br/>");
          return str;
        }
      };

代碼看不懂不要緊,咱們能夠先來分析 params 參數的內容

params 一共有四個對象,分別對應的就是堆疊後的四個系列柱狀
marker表示的是前面的小圓點
seriesName表示的是柱子的名字
value表示的是柱子的值

起初我採用的是按順序拼接字符串

str+= item.marker +item.seriesName + " : " + item.value + " (" + dataFunction(item) + ") " +"<br/>"

但發現顯示的順序與柱狀上下的堆疊順序想法
因而重寫了 splice 方法,使之能夠向本身想插入的位置插入相應的字符串

String.prototype.splice = function(start, newStr) {
            return this.slice(0, start) + newStr + this.slice(start);
          };

這樣一來咱們的功能就所有實現了