ツリーチャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。

これを実装するには、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 を応援していただければ幸いです。

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