Heim > Artikel > Web-Frontend > So verwenden Sie ein Trichter-Rosendiagramm, um den Datenanteil und die Konvertierungsrate in ECharts anzuzeigen
So verwenden Sie das Trichter-Rosendiagramm, um den Datenanteil und die Conversion-Rate in ECharts anzuzeigen
Übersicht:
Das Trichter-Rosendiagramm ist ein häufig verwendetes Datenvisualisierungsdiagramm, das den Datenanteil und die Conversion-Rate klar anzeigen kann. In ECharts können wir durch einfache Datenverarbeitung und -konfiguration problemlos den Anzeigeeffekt eines Trichter-Rosendiagramms erzielen. In diesem Artikel wird die Verwendung des Trichter-Rosendiagramms in ECharts zur Anzeige des Datenanteils und der Konvertierungsrate vorgestellt und entsprechende Codebeispiele bereitgestellt.
Schritt 1: Daten vorbereiten
Zuerst müssen wir die anzuzeigenden Daten vorbereiten. Angenommen, wir haben die folgenden Daten:
var data = [ { value: 100, name: '阶段1' }, { value: 80, name: '阶段2' }, { value: 60, name: '阶段3' }, { value: 40, name: '阶段4' }, { value: 20, name: '阶段5' } ];
wobei Wert die Datenmenge in jeder Stufe darstellt und Name den Namen jeder Stufe darstellt.
Schritt 2: Konfigurieren Sie das Diagramm
Als nächstes müssen wir den Stil und die Eigenschaften des Trichter-Rosendiagramms konfigurieren. Das Folgende ist ein einfaches Konfigurationsbeispiel:
var option = { series: [ { name: '漏斗玫瑰图', type: 'pie', radius: ['40%', '55%'], center: ['50%', '50%'], roseType: 'radius', label: { show: false }, emphasis: { label: { show: true } }, data: data } ] };
Zu den wichtigsten Punkten in der Konfiguration gehören:
Schritt 3: Zeichnen Sie das Diagramm
Zuletzt müssen wir das Diagramm über die ECharts-Instanz zeichnen. Auf der HTML-Seite erstellen wir ein Skript-Tag mit dem folgenden Code:
var myChart = echarts.init(document.getElementById('chart')); myChart.setOption(option);
Im obigen Code verwenden wir die Methode document.getElementById('chart'), um das Container-Div abzurufen, das zum Anzeigen des Diagramms auf der HTML-Seite verwendet wird Übergeben Sie die Methode echarts.init(), um eine ECharts-Instanz zu erstellen. Anschließend rufen wir die Methode setOption() auf, um Konfigurationselemente für die Instanz festzulegen.
Zusammenfassend können wir durch die oben genannten drei Schritte das Trichter-Rosendiagramm verwenden, um den Datenanteil und die Conversion-Rate in ECharts anzuzeigen. Der vollständige Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>漏斗玫瑰图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> var data = [ { value: 100, name: '阶段1' }, { value: 80, name: '阶段2' }, { value: 60, name: '阶段3' }, { value: 40, name: '阶段4' }, { value: 20, name: '阶段5' } ]; var option = { series: [ { name: '漏斗玫瑰图', type: 'pie', radius: ['40%', '55%'], center: ['50%', '50%'], roseType: 'radius', label: { show: false }, emphasis: { label: { show: true } }, data: data } ] }; var myChart = echarts.init(document.getElementById('chart')); myChart.setOption(option); </script> </body> </html>
Führen Sie über den obigen Code die HTML-Seite im Browser aus, und Sie können ein Diagramm namens „Funnel Rose Chart“ sehen, das den Datenanteil und die Conversion-Rate zeigt.
Fazit:
In diesem Artikel erfahren Sie, wie Sie mit dem Trichter-Rosendiagramm den Datenanteil und die Conversion-Rate in ECharts anzeigen. Durch einfache Datenverarbeitung und -konfiguration können wir problemlos den Anzeigeeffekt eines Trichter-Rosendiagramms erzielen. Ich hoffe, dass die Leser durch diesen Artikel die grundlegenden Fähigkeiten zur Verwendung von ECharts verstehen und sie in tatsächlichen Datenvisualisierungsprojekten anwenden und erweitern können.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Trichter-Rosendiagramm, um den Datenanteil und die Konvertierungsrate in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!