ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。 これを実装するには、series->type を tree に設定します。 Echarts のツリー チャートは、直交または放射状にすることができます。 直交ツリー: 放射状ツリー: これを実装するには、シリーズ -> レイアウト設定を変更します。正の方向の場合は直交、放射方向の場合は放射状です。 右から左などカスタマイズできます: これを実装するには、series->orient 設定を変更して、LR、RL、TB、BT をサポートします。RL は右から左を意味します。 カスタマイズ可能なアイコン: 「円」、「四角形」、「丸い四角形」、「三角形」、「ひし形」、「ピン」、「矢印」、「なし」をサポート 実装方法: 変更: シリーズ->シンボル設定 アイコンは四角いツリー図です。 直線または曲線をカスタマイズできます。 実装方法: 曲線とポリラインをサポートするために series->edgeShape 設定を変更します 直線グラフ: 初期ツリーの深さ: デフォルトの展開深度は 2 です。2 層を超えるノードは、親ノードをクリックして表示または非表示にすることができます。 -1 または null または undefined に設定すると、すべてのノードが展開されます。 アイテムスタイル: ツリー チャート項目のスタイルを変更します。 色やサイズなどを変更できます。 ラベル: グラフ項目内のテキストの処理。 フォーマッタを使用すると、グラフのテキストに豊富な効果を追加できます。 線のスタイル: チャートの中心線の処理。 lineStyle スタイルを変更した場合の効果: 強調: フォーカス。フォーカスを設定した後、マウスを項目の上に置くと、他の無関係な項目は一時的に非表示になります。 「なし」は他のグラフィックをフェードアウトしません。この設定はデフォルトで使用されます。 「self」は現在強調表示されているデータのグラフのみにフォーカスします(フェードしません)。 「series」は、現在強調表示されているデータを含むシリーズのすべてのグラフにフォーカスします。 「ancestor」はすべての祖先ノードに焦点を当てます 「子孫」はすべての子孫ノードに焦点を当てます 強調: 焦点: '祖先'、 ぼかし範囲: '座標系' } ツリー図のデータ構造: name: グラフ項目のデフォルト名。 children: このアイテムの子ノード もちろん、値、数値などのデータ内の任意の属性を定義し、ラベル内のフォーマッタを使用して、より豊かな表示効果を実現することもできます。 最後に、完全なコードは次のとおりです。 インデックス.html <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>Echarts の例 - 凡例</title> <script src="../../echarts.js"></script> </head> <本文> <div id="コンテナ" スタイル="幅: 500px;高さ: 500px;"> </div> <script src="./index.js"></script> </本文> </html> インデックス var chart = echarts.init(document.getElementById("コンテナ")); varデータ = { 名前: 'Throwable'、 子供たち: [{ 名前: 'エラー'、 子供たち: [{ 名前: 'VirtualMachineError', 子供たち: [{ 名前: 'StackOverflowError' }, { 名前: 'OutOfMemoryError' }] }, { 名前: 'AWTError' }] }, { 名前: '例外' }] } var データ2 = { 名前: 「ドラゴンボールキャラクター」 子供たち: [{ 名前: 「孫悟空」 }, { 名前: 'ブルマ' }, { 名前: '朱武能' }, { 名前: 'ヤムチャ' }, { 名前: 「タートル・ハーミット」 }, { 名前: 'シャオリン' }, { 名前: 'ピッコロ' }, { 名前: 「鶴仙人」 }, { 名前: 「天津米」 }, { 名前: 「餃子」 }] } チャート.setOption({ タイトル: テキスト: 「Java 例外構造図」 }, シリーズ: [{ レイアウト: '直交'、 データ: [データ], 右: '60%'、 タイプ: 'ツリー'、 edgeShape: 'polyline', // 曲線とポリライン シンボル: 'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', 初期ツリー深度: 2, アイテムスタイル: { 色: 'シアン' }, 線のスタイル: 色: 「赤」 }, /** * * * 'none' は他のグラフィックをフェードアウトしません。この設定はデフォルトで使用されます。 「self」は現在強調表示されているデータのグラフのみにフォーカスします(フェードしません)。 「series」は、現在強調表示されているデータを含むシリーズのすべてのグラフにフォーカスします。 'ancestor' はすべての祖先ノードに焦点を当てます 'descendant' はすべての子孫ノードに焦点を当てます */ 強調: 焦点: '祖先'、 ぼかし範囲: '座標系' }, }, { レイアウト: '放射状'、 左: '60%'、 データ: [データ2], タイプ: 'ツリー'、 シンボル: 'rect', シンボルサイズ: 15 }] }) 要約する Echarts サンプル チュートリアルでのツリー チャートの実装に関するこの記事はこれで終わりです。Echarts でのツリー チャートの実装に関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS での samba フォルダ共有サーバー構成の詳細な説明
html <div class="スピナー"></div&g...
目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...
MySql データベース システムをインストールして構成します。 1. ダウンロード http://...
パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...
HTML5 で contentEditable 属性が導入されて以来、div は textarea ...
mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...
この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...
環境の紹介: Ubuntu Server 16.04.2+MySQL 5.7.17 コミュニティ サ...
JavaScript には、for、for in、for of、forEach ループなど、多くのル...
削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...
今日、VMware を使用してマシンに新しい仮想マシンをインストールしていたところ、次のように「この...
目次配列をフラット化する方法1.flat() の使用2. 正規表現を使用する3.reduce()+c...
目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...