長方形のツリーマップを使用して ECharts でデータ階層を表示する方法-jsチュートリアル-php.cn

長方形のツリーマップを使用して ECharts でデータ階層を表示する方法

王林

リリース： 2023-12-18 17:48:13

オリジナル

1311 人が閲覧しました

長方形のツリーマップを使用して ECharts でデータ階層を表示する方法

長方形ツリー図を使用して ECharts でデータ階層構造を表示する方法

はじめに:
データ視覚化では、長方形ツリー図が非常に一般的です。データの階層構造を四角形で表示し、直感的にデータを理解・分析できるチャートタイプ。 ECharts は、さまざまな種類のチャートと柔軟な構成項目を提供する強力なデータ視覚化ライブラリであり、長方形ツリー図を簡単に表示できます。この記事では、長方形ツリー図を使用して ECharts のデータ階層構造を表示する方法を詳しく紹介し、具体的なコード例を示します。

1. 準備
開始する前に、ECharts がインストールされ、必要なリソースファイルが導入されていることを確認する必要があります。具体的な手順は次のとおりです。

ECharts のダウンロード: ECharts 公式 Web サイト (http://echarts.apache.org/zh/index.html) にアクセスして、ECharts の最新バージョンをダウンロードします。圧縮されたパッケージ。
圧縮パッケージを解凍します。ダウンロードした圧縮パッケージを解凍すると、echarts-x.x.x ディレクトリが得られます。
リソースファイルの導入: echarts-x.x.x ディレクトリにある echarts.min.js ファイルをプロジェクトディレクトリにコピーし、HTML ファイルにリソースファイルを導入します。

2. 長方形ツリーダイアグラムを作成する
ECharts で長方形ツリーダイアグラムを作成するプロセスは、主に次の手順に分かれています:

コンテナを作成します。 HTML ファイル内に div コンテナを追加して、生成された長方形ツリーマップをホストします。たとえば、タグ内に次のコードを追加できます:

div>

インスタンスの初期化: JavaScript ファイル内に ECharts インスタンスを作成し、指定されたコンテナーにバインドします。たとえば、<script> タグ内に次のコードを追加できます: </script>

var chart = echarts.init(document.getElementById('chart'));

var data = {

name: 'Root Node',
Children: [

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

ログイン後にコピー

]

};

var option = {

series: {