ツリー チャートの実装方法に関する 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コマンドの具体的な使い方

推薦する

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

MySQL 半同期レプリケーションの原理構成と導入の詳細な説明

環境の紹介: Ubuntu Server 16.04.2+MySQL 5.7.17 コミュニティ サ...

JavaScript ステートメントの一般的な for ループの詳細な説明

JavaScript には、for、for in、for of、forEach ループなど、多くのル...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

jsは配列の平坦化を実装します

目次配列をフラット化する方法1.flat() の使用2. 正規表現を使用する3.reduce()+c...

MySQL 分離列とプレフィックスインデックスの使用の概要

目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...

将来的に人気のあるウェブサイトのナビゲーションの方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...