Heim >Web-Frontend >js-Tutorial >So verwenden Sie ein Trichter-Rosendiagramm, um den Datenanteil und die Konvertierungsrate in ECharts anzuzeigen

So verwenden Sie ein Trichter-Rosendiagramm, um den Datenanteil und die Konvertierungsrate in ECharts anzuzeigen

王林Original: 2023-12-18 08:10:101407Durchsuche

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:

type gibt den Diagrammtyp als „pie“ an, bei dem es sich um ein Kreisdiagramm handelt.
radius legt den inneren und äußeren Radius des Kreisdiagramms fest, hier dargestellt durch ein Array. ['40%', '55%'] bedeutet, dass der Innenradius 40 % und der Außenradius 55 % beträgt.
center legt die Mittelpunktposition des Kreisdiagramms fest, das hier durch ein Array dargestellt wird. ['50%', '50%'] bedeutet in der Mitte der Leinwand.
roseType setzt den Kreisdiagrammtyp auf „Radius“, was ein Trichter-Rosendiagramm darstellt.
data legt die Datenquelle des Kreisdiagramms fest. Die oben vorbereiteten Daten werden hier verwendet.

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!

echarts html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：ECharts Sankey Rose Chart: So zeigen Sie Datenfluss und -anteil anNächster Artikel：ECharts Sankey Rose Chart: So zeigen Sie Datenfluss und -anteil an

In Verbindung stehende Artikel

Mehr sehen