ECharts-Trichterdiagramm: So zeigen Sie die Datenkonvertierungsrate an

ECarts Trichterdiagramm: Zur Anzeige der Datenkonvertierungsrate sind spezifische Codebeispiele erforderlich

Einführung:
Im Bereich der Datenvisualisierung ist das Trichterdiagramm ein sehr häufig verwendeter Diagrammtyp, der den Transformationsprozess visuell darstellen kann Transformation der Datenrate. Als leistungsstarkes Datenvisualisierungstool bietet ECharts auch eine Funktion zum Zeichnen von Trichterdiagrammen. In diesem Artikel werden spezifische Codebeispiele kombiniert, um die Zeichenmethode des ECharts-Trichterdiagramms und die Anzeige der Konvertierungsrate von Daten im Detail vorzustellen.

1. Die Grundstruktur des Trichterdiagramms
   Das Trichterdiagramm stellt von oben nach unten verschiedene Stufen dar, und jede Stufe entspricht einer bestimmten Datenmenge. Diese Stufen schrumpfen allmählich und bilden die Form eines Trichters. In ECharts können Trichterdiagramme über das Typattribut in Reihe angegeben werden.
2. Zeichnen Sie ein einfaches Trichterdiagramm.
   Zuerst müssen wir die ECharts-Bibliotheksdatei einführen und eine Diagramminstanz initialisieren. Das Folgende ist ein Codebeispiel zum Zeichnen eines einfachen Trichterdiagramms:

<!--引入ECharts的库文件-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

<!--在HTML中创建一个DOM容器，用于存放图表-->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>

<script>
  //实例化一个图表实例
  let myChart = echarts.init(document.getElementById('funnelChart'));

  //配置图表的基本信息
  let option = {
      title: {
          text: '漏斗图示例',
      },
      series: [{
          type: 'funnel',
          data: [
              {value: 60, name: '浏览量'},
              {value: 40, name: '点击量'},
              {value: 20, name: '购买量'},
              {value: 10, name: '转化率'}
          ]
      }]
  };

  //使用配置项显示图表
  myChart.setOption(option);
</script>

3. Datenkonvertierungsrate anzeigen
   Um die Datenkonvertierungsrate anzuzeigen, können wir jeder Stufe des Trichterdiagramms eine Beschriftung hinzufügen und die Beschriftung anpassen über das Formatter-Attribut Inhalt anzeigen. Das Folgende ist ein Codebeispiel, das die Datenkonvertierungsrate zeigt:

let option = {
    title: {
        text: '漏斗图示例',
    },
    series: [{
        type: 'funnel',
        data: [
            {value: 60, name: '浏览量'},
            {value: 40, name: '点击量'},
            {value: 20, name: '购买量'},
            {value: 10, name: '转化率'}
        ],
        label: {
            formatter: '{b}：{c}%'
        }
    }]
};

Indem wir das Formatierungsattribut von label auf „{b}:{c}%“ setzen, können wir den Namen (Name) und den numerischen Wert (Wert) von konvertieren Die Daten sowie das Prozentzeichen (%) werden gemeinsam in der Beschriftung jeder Stufe angezeigt. Beispiel: „Kaufbetrag: 20 %“.

Zusammenfassung:
In ECharts können wir durch einfache Konfiguration ein Trichterdiagramm zeichnen und die Konvertierungsrate der Daten anzeigen. Durch Festlegen des Formatierungsattributs des Etikettenetiketts können wir den Anzeigeinhalt des Etiketts anpassen. Ich hoffe, dass die Leser durch die Einführung dieses Artikels die grundlegende Zeichenmethode des ECharts-Trichterdiagramms verstehen und sie flexibel in praktischen Anwendungen verwenden können.

Das obige ist der detaillierte Inhalt vonECharts-Trichterdiagramm: So zeigen Sie die Datenkonvertierungsrate an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!