So verwenden Sie eine rechteckige Baumkarte, um die Datenhierarchie in ECharts anzuzeigen

So verwenden Sie eine rechteckige Baumkarte, um die hierarchische Datenstruktur in ECharts anzuzeigen.

Einführung:
In der Datenvisualisierung ist die rechteckige Baumkarte ein sehr häufiger Diagrammtyp, der die hierarchische Struktur von Daten in Form eines Rechtecks ​​​​darstellt Daten intuitiv zu verstehen und zu analysieren. ECharts ist eine leistungsstarke Datenvisualisierungsbibliothek, die eine Vielzahl von Diagrammtypen und flexiblen Konfigurationselementen bereitstellt und die Anzeige rechteckiger Baumdiagramme vereinfacht. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe eines rechteckigen Baumdiagramms die Datenhierarchiestruktur in ECharts anzeigen können, und es werden spezifische Codebeispiele bereitgestellt.

1. Vorbereitung
Bevor Sie beginnen, müssen Sie sicherstellen, dass ECharts installiert und die erforderlichen Ressourcendateien eingegeben wurden. Die spezifischen Schritte sind wie folgt:

1. ECharts herunterladen: Gehen Sie zur offiziellen ECharts-Website (http://echarts.apache.org/zh/index.html), um die neueste Version des komprimierten ECharts-Pakets herunterzuladen.
2. Entpacken Sie das komprimierte Paket: Entpacken Sie das heruntergeladene komprimierte Paket und Sie erhalten ein echarts-x.x.x-Verzeichnis.
3. Ressourcendateien einführen: Kopieren Sie die Datei echarts.min.js im Verzeichnis echarts-x.x.x in das Projektverzeichnis und führen Sie die Ressourcendatei in die HTML-Datei ein. 2. Erstellen einer rechteckigen Baumkarte Karte . Sie können beispielsweise den folgenden Code innerhalb des -Tags hinzufügen:

Initialisierung Instanz: Erstellen Sie eine ECharts-Instanz in der JavaScript-Datei und binden Sie sie an den angegebenen Container. Sie können beispielsweise den folgenden Code innerhalb des <script>-Tags hinzufügen: <li></script>

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

Daten konfigurieren: Bereiten Sie die anzuzeigenden Daten vor und Konfigurieren Sie es nach Bedarf. Organisieren Sie sich. Ein Datenobjekt kann beispielsweise wie folgt definiert werden:

var data = {

name: 'root node',

children: [

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

3. ]
};

Konfigurationsoptionen: Verschiedene Optionen für rechteckige Baumdiagramme festlegen , einschließlich Layout, Stil, Interaktion usw. Informationen zu bestimmten Konfigurationselementen finden Sie in der offiziellen ECharts-Dokumentation (http://echarts.apache.org/zh/option.html). Das Layout kann beispielsweise wie folgt festgelegt werden:

var option = {
series: {

type: 'treemap',
data: [data]

}
4. };

Rendern des Diagramms: Wenden Sie das Konfigurationselement auf das Diagramm an, indem Sie die setOption-Methode des aufrufen ECharts-Instanz und rendern Sie eine rechteckige Baumkarte. Sie können beispielsweise den folgenden Code hinzufügen:

chart.setOption(option);

3. Beispielcode

Das Folgende ist ein vollständiger Beispielcode für die Anzeige eines einfachen rechteckigen Baumdiagramms in ECharts:

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

var data = {
name: 'Root node',
untergeordnete Elemente: [

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

]
};

var option = {
Serie: {

type: 'treemap',
data: [data]

}

};

chart.setOption(option);

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine rechteckige Baumkarte, um die Datenhierarchie in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!