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

<テンプレート>
 <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 :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,
           },
          }
         },
        },
       ]
      }]
     }
    ]
   }
  }
 },
 コンポーネント:
  木、
 }
};
</スクリプト>