So verwenden Sie ein Rosendiagramm, um den Datenanteil in ECharts anzuzeigen

So verwenden Sie ein Rosendiagramm, um Datenanteile in ECharts anzuzeigen

Zusammenfassung: Das Rosendiagramm ist ein visuelles Datenanalysetool, das zur Anzeige von Datenanteilen verwendet werden kann. In diesem Artikel wird die Verwendung der ECharts-Bibliothek zum Zeichnen eines Rosendiagramms auf einer Webseite vorgestellt und spezifische Codebeispiele bereitgestellt.

Einführung: Bei der Datenanalyse und -visualisierung ist das Rosendiagramm ein häufig verwendeter Diagrammtyp. Seine Besonderheit besteht darin, dass der Mittelpunkt des Kreises der Ursprung ist und der Anteil der Daten in verschiedenen Sektorwinkeln angezeigt wird. Mithilfe des Rosendiagramms können wir die Anteile verschiedener Datenkategorien visuell vergleichen. ECharts ist eine leistungsstarke Datenvisualisierungsbibliothek, die mehrere Diagrammtypen, einschließlich Rosendiagramme, unterstützt.

Dieser Artikel ist in die folgenden Teile unterteilt:

1. Einführung in die ECharts-Bibliothek
2. Daten vorbereiten
3. Einen Container erstellen
4. Diagrammoptionen festlegen
5. Zeichnen eines Rosendiagramms
6. Einführung in die ECharts-Bibliothek
   Zuallererst: Wir müssen es zur Webseite „Einführung in die ECharts-Bibliothek“ hinzufügen. Es kann direkt über CDN oder nach dem Herunterladen der Quelldateien von ECharts importiert werden.

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

2. Daten vorbereiten
   Bevor wir das Rosendiagramm zeichnen, müssen wir die anzuzeigenden Daten vorbereiten. Hier ist beispielsweise ein einfaches Datenbeispiel, das die Verkäufe eines Produkts in verschiedenen Regionen zeigt.

var data = [
  {name: '地区1', value: 50},
  {name: '地区2', value: 30},
  {name: '地区3', value: 80},
  {name: '地区4', value: 60},
  {name: '地区5', value: 40}
];

Unter diesen steht der Name für den Namen der Region und der Wert für das Verkaufsvolumen in der Region.

3. Container erstellen
   Auf der Webseite müssen wir einen Container erstellen, der das Diagramm enthält. Sie können ein div-Element als Container verwenden und die Breite und Höhe festlegen.

<div id="chart" style="width: 800px; height: 600px;"></div>

4. Diagrammoptionen festlegen
   Bevor Sie das Diagramm zeichnen, müssen Sie einige Diagrammoptionen festlegen, z. B. Titel, Legende, Farbe usw. Das Folgende ist ein Beispiel für eine Diagrammoption:

var option = {
  title: {
    text: '产品销售占比',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['地区1', '地区2', '地区3', '地区4', '地区5']
  },
  color: ['#2378e1', '#60a1bc', '#87d9ef', '#de742f', '#7dbb94']
};

Unter diesen steht „Titel“ für den Titel des Diagramms, „Legende“ für die Legende, „Daten“ für den Namen der Legende und „Farbe“ für die Farbe des Sektors.

5. Zeichnen eines Rosendiagramms
   Abschließend verwenden wir die Methode echarts.init der ECharts-Bibliothek, übergeben die ID des Containers, erstellen eine Diagramminstanz und verwenden die Methode setOption, um die Optionen und Daten des Diagramms festzulegen.

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

Durch die oben genannten Schritte können wir ein Rosendiagramm auf der Webseite zeichnen.

Zusammenfassung: In diesem Artikel wird die Verwendung der ECharts-Bibliothek zum Zeichnen eines Rosendiagramms auf einer Webseite vorgestellt und spezifische Codebeispiele bereitgestellt. Durch das Rosendiagramm können wir den Anteil der Daten visuell darstellen und uns bei der Datenanalyse und Entscheidungsfindung unterstützen. Ich hoffe, dass dieser Artikel den Lesern helfen kann, Rosendiagramme zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Rosendiagramm, um den Datenanteil in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!