ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。 これを実装するには、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 フォルダ共有サーバー構成の詳細な説明
テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...
<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...
MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...
前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
序文MySQL に関する私の理解に基づくと、パフォーマンスの最適化作業やマスター スレーブ レプリケ...
1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...
目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...
vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...
p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...
序文ActiveMQ は、Apache が開発した最も人気があり強力なオープン ソース メッセージ ...
MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...
ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...
最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...