Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きましたが、それだけでも十分面倒でした。今日は、会社の組織図に似た組織図を表示するという機能要件に遭遇しました。リスクを冒さなければなりません! ！！

このような要件は、div + cssを使用して実現できますが、アニメーション効果がなく、私のcss3は非常に貧弱です。また、プロジェクトではすでに折れ線グラフ、円グラフ、棒グラフなどのグラフを使用しており、Baiduのechartsも引き続き使用しているため、この組織図の要件もBaiduのechartsを使用して実装されています。

以前は echarts を使用して折れ線グラフ、棒グラフ、円グラフを作成していました。その API には慣れていますが、組織構造などのツリーチャートを描くのは非常に困難です。これまで使用したことはありません。さらに、echarts によって設計されたツリーチャートの表示効果は、echarts のツリーチャートの表示効果とはかけ離れています。わが子よ、私はまた時間と労力のかかる研究をしなければなりません。設計図は次のとおりです。

図に示すように、ツリーノードには 2 つの異なる背景色と 2 つの異なるテキスト色がある場合があり、各ノードは角丸四角形として表示されます。クラスメートが、echarts には角を丸くする API があるので、直接設定すればいいのでは、と言っていました。私が言いたいのは、そのような API は提供されているが、通常のルーチンに従って実装することはできないということです。

図から、ほぼ実現不可能な効果もわかります。つまり、各ノードを接続する線の角は滑らかではなく直角であり、echarts は角を直角に設定する API を提供しておらず、曲線のみを提供しています (API の説明はツリーグラフエッジの曲率です)。これを使用した後でも、まだ実現できません。

オンラインで情報を確認したところ、echarts のソースコードを変更できるという人もいました。vue または react プロジェクトでは、echarts を package.json にインストールする必要があるため、この解決策はお勧めしません。複数の人が並行して開発している場合、他の人がインストールした echarts は、変更した echarts ではありません。これが問題です。

最後に、echarts で描画する効果は依然として非常に良好です。実現されていない唯一の点は、各ノードを接続する線の角が直角ではないことです。良い解決策があれば、教えていただければ幸いです。ありがとうございます!最終結果を表示します:

ここまで説明してきたので、コードを見てみましょう。このコードは Vue に基づいています。React で使用したい場合は、少し変更するだけです。

コンポーネントツリー.vue:

<テンプレート>
 <div :class="className" :style="{height:height,width:width}" />
</テンプレート>

<スクリプト>
「echarts」からechartsをインポートします。
require("echarts/theme/macarons");
"@/utils" から { debounce } をインポートします。

エクスポートデフォルト{
 小道具: {
  クラス名: {
   タイプ: 文字列、
   デフォルト: "chart"
  },
  幅： {
   タイプ: 文字列、
   デフォルト: "100%"
  },
  身長：
   タイプ: 文字列、
   デフォルト: "500px"
  },
  チャートデータ: {
   タイプ: オブジェクト、
   必須: true
  }
 },
 データ（） {
  戻る {
   チャート: null、
  };
 },
 時計：
  チャートデータ: {
   深い：本当、
   ハンドラ(val) {
    this.setOptions(val);
   }
  }
 },
 マウント() {
  チャートを初期化します。
  //自己適応型である必要がありますか? - 手ぶれ補正機能を追加します this.__resizeHandler = debounce(() => {
   if (this.chart) {
    このチャートのサイズを変更します。
   }
  }, 100);
  window.addEventListener("サイズ変更", this.__resizeHandler);

  // サイドバーの変更を監視して適応型スケーリングを実現します const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
  sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler);
 },
 破棄する前に() {
  if (!this.chart) {
   戻る;
  }
  window.removeEventListener("サイズ変更", this.__resizeHandler);
  このチャートを破棄します。
  this.chart = null;

  const sidebarElm = document.getElementsByClassName("サイドバーコンテナー")[0];
  sidebarElm.removeEventListener("transitionend", this.sidebarResizeHandler);
 },
 メソッド: {
  初期化チャート() {
   this.chart = echarts.init(this.$el, "マカロン");
   this.setOptions(this.chartData);
  
   const ノード = this.chart._chartsViews[0]._data._graphicEls;
   allNode を 0 にします。
   for(let index = 0; index < nodes.length; index++) {
    定数ノード = ノード[インデックス];
    if (ノード === 未定義) {
     続く
    }
    すべてのNode++;
   }
   
   定数height = window.innerHeight;
   定数幅 = window.innerWidth - 1000;
   現在の高さを 85 に設定します。
   現在の幅は 220 です。
   const newHeight = Math.max(現在の高さ、高さ);
   const newWidth = Math.max(現在のWidth、幅);
   tree_ele を this.$el に格納します。
   // tree_ele.style.height = newHeight + 'px'; // 適応するように高さを設定します tree_ele.style.width = newWidth + 'px'; // 適応するように幅を設定します this.chart.resize();

   this.chart.on('click', this.chartData.clickCallback); //ノードクリックイベント},
  setOptions(データ) {
   this.chart.setOption({
    //データの表示、復元、ダウンロードのためのツールを提供する// toolbox: {
    // 表示: true、
    // 特徴 ： {
    // マーク: {show: true},
    // データビュー: {表示: true、読み取り専用: false},
    // 復元: {表示: true},
    // saveAsImage: {show: true} です
    // }
    // },
    シリーズ： [
     {
      名前:「統合クレジットビュー」
      タイプ: "ツリー"、
      orient: "TB", //垂直または水平 TB は垂直を表します LR は水平を表します top: '10%',
      initialTreeDepth: 10, //ツリーグラフの初期展開レベル（深さ）
      expandAndCollapse: false, //ノードをクリックしても子ノードを折りたたまない、デフォルト: true
      シンボルサイズ: [135, 65],
      アイテムスタイル: {
       色: '透明'、
       境界線の幅: 0,
      },
      線のスタイル:
       色: '#D5D5D5',
       幅: 1,
       曲線度: 1,
      },
      データ: [データ]
     }
    ]
   });
  },
  サイドバーResizeHandler(e) {
   if (e.propertyName === "幅") {
    this.__resizeHandler();
   }
  }
 }
};
</スクリプト>

tree.vue メソッドの使用:

<テンプレート>
  <tree :chartData="ツリーデータ" />
</テンプレート>

<スクリプト>
'./tree' からツリーをインポートします。

エクスポートデフォルト{
 データ（） {
  戻る {
   ツリーデータ: {
    ラベル: {
     背景色: '#F4F4F4',
     境界半径: [0, 0, 5, 5],
     フォーマッタ: [
      '{第一|包括的信用限度額}',
      '{second|(CR20190912000013)\n承認金額: 100\n通貨: RMB}',
     ].join('\n'),
     リッチ：
      初め： {
       背景色: '#078E34',
       色: '#fff',
       配置: '中央'、
       幅: 135,
       高さ: 30,
       境界半径: [5, 5, 0, 0],
      },
      2番目： {
       色: '#888',
       配置: '中央'、
       行の高さ: 17,
      },
     }
    },
    子供たち： [
     {
      ラベル: {
       フォーマッタ: [
        '{first|チャンネルクォータ}',
       ].join('\n'),
       リッチ：
        初め： {
         背景色: '#3AC082',
         色: '#fff',
         配置: '中央'、
         幅: 135,
         高さ: 65,
         境界半径: 5,
        },
       }
      },
      子供たち： [{
       ラベル: {
        フォーマッタ: [
         '{first|因数分解額}',
        ].join('\n'),
        リッチ：
         初め： {
          背景色: '#3AC082',
          色: '#fff',
          配置: '中央'、
          幅: 135,
          高さ: 65,
          境界半径: 5,
         },
        }
       },
       子供たち： [{
        ラベル: {
         背景色: '#F4F4F4',
         境界半径: [0, 0, 5, 5],
         フォーマッタ: [
          '{first|逆因数分解}',
          '{second|(CR20190912000013)\n承認金額: 100\n通貨: RMB}',
         ].join('\n'),
         リッチ：
          初め： {
           背景色: '#078E34',
           色: '#fff',
           配置: '中央'、
           幅: 135,
           高さ: 30,
           境界半径: [5, 5, 0, 0],
          },
          2番目： {
           色: '#888',
           配置: '中央'、
           行の高さ: 17,
          },
         }
        },
       }]
      }]
     },
     {
      ラベル: {
       フォーマッタ: [
        '{first|保証/(Le)グループ/その他の金額}',
       ].join('\n'),
       リッチ：
        初め： {
         背景色: '#3AC082',
         色: '#fff',
         配置: '中央'、
         幅: 135,
         高さ: 65,
         境界半径: 5,
        },
       }
      },
      子供たち： [{
       ラベル: {
        フォーマッタ: [
         '{first|因数分解額}',
        ].join('\n'),
        リッチ：
         初め： {
          背景色: '#3AC082',
          色: '#fff',
          配置: '中央'、
          幅: 135,
          高さ: 65,
          境界半径: 5,
         },
        }
       },
       子供たち： [{
        ラベル: {
         背景色: '#F4F4F4',
         境界半径: [0, 0, 5, 5],
         フォーマッタ: [
          '{first|順方向因数分解}',
          '{second|(CR20190912000013)\n承認金額: 100\n通貨: RMB}',
         ].join('\n'),
         リッチ：
          初め： {
           背景色: '#B8D87E',
           色: '#fff',
           配置: '中央'、
           幅: 135,
           高さ: 30,
           境界半径: [5, 5, 0, 0],
          },
          2番目： {
           色: '#888',
           配置: '中央'、
           行の高さ: 17,
          },
         }
        },
       }]
      },
      {
       ラベル: {
        フォーマッタ: [
         '{最初の|リース金額}',
        ].join('\n'),
        リッチ：
         初め： {
          背景色: '#3AC082',
          色: '#fff',
          配置: '中央'、
          幅: 135,
          高さ: 65,
          境界半径: 5,
         },
        }
       },
       子供たち： [
        {
         ラベル: {
          背景色: '#F4F4F4',
          境界半径: [0, 0, 5, 5],
          フォーマッタ: [
           '{first|レンタカー}',
           '{second|(CR20190912000013)\n承認金額: 100\n通貨: RMB}',
          ].join('\n'),
          リッチ：
           初め： {
            背景色: '#FF6C6A',
            色: '#fff',
            配置: '中央'、
            幅: 135,
            高さ: 30,
            境界半径: [5, 5, 0, 0],
           },
           2番目： {
            色: '#888',
            配置: '中央'、
            行の高さ: 17,
           },
          }
         },
        },
       ]
      }]
     }
    ]
   }
  }
 },
 コンポーネント:
  木、
 }
};
</スクリプト>

コードはそれほど多くないように見えますが、実装するには、echarts APIとオンライン情報を確認する必要があります。また、レンダリング中のノードのテキストが折り返されたり、テキストの色が異なったり、一部のノードには2つの背景色があったり、各ノードに表示されるスタイルとテキストが固定されていないため、インターフェイスによって返されるデータを必要なデータに変換するという面倒な問題に直面する可能性があります。ツリーノードに渡されるtreeDataの形式と同様に、これは非常に面倒です。各ノードのスタイルが同じであれば、公式サイトのツリー図の例のように、はるかに簡単になります：https：//www.echartsjs.com/examples/zh/editor.html？c = tree-vertical

echarts バージョン v4.7.0 から、設定項目シリーズに edgeShape:'polyline' という API が追加され、ツリーチャートの各ノードを接続する線の角が直角になることを実現できるようになりました。

上記は、echarts を使用して組織図を描画する vue の詳細です。vue による組織図の描画の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: