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

ツリー チャートの実装方法に関する 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue に Echarts チャートを追加するための基本的なチュートリアル
  • Echarts チャートのエクスポート Excel の例
  • WeChatアプレットでEchartsチャートコンポーネントを使用する方法の詳細な説明
  • echarts学習ノートにおけるチャート適応の問題の詳細な説明
  • Vue.js+Echarts 開発チャートのズームインとズームアウト機能の例
  • Vue で echarts チャートを使用する詳細な方法
  • Vue で複数の同一の echarts チャートのループ レンダリングを実装する

<<:  CentOS での samba フォルダ共有サーバー構成の詳細な説明

>>:  Linuxのwhichコマンドの具体的な使い方

推薦する

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

HTML で自動ページジャンプを実現する 5 つの方法

前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

Ubuntu の MySQL のパラメータ ファイル my.cnf の詳細な分析

序文MySQL に関する私の理解に基づくと、パフォーマンスの最適化作業やマスター スレーブ レプリケ...

MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

VMware vSphere 6.5 インストール チュートリアル (画像とテキスト)

vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...

Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...

ActiveMQ メッセージ サービスを構築するための Docker 学習方法の手順

序文ActiveMQ は、Apache が開発した最も人気があり強力なオープン ソース メッセージ ...

mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

MySQL 8.0.12のダウンロードとインストールのチュートリアルは参考までに、具体的な内容は次の...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

Docker イメージのエクスポート、インポート、コピーの例の分析

最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...