Heim > Artikel > Web-Frontend > ECharts-Trichterdiagramm: So zeigen Sie Datentrichteränderungen an

ECharts-Trichterdiagramm: So zeigen Sie Datentrichteränderungen an

WBOYOriginal: 2023-12-18 14:13:42859Durchsuche

ECarts-Trichterdiagramm: Für die Anzeige von Datentrichteränderungen sind bestimmte Codebeispiele erforderlich.

Einführung: Das Trichterdiagramm ist eine häufig verwendete Datenvisualisierungsmethode, die zur Anzeige von Prozessänderungen oder zur Phasenanalyse von Daten verwendet werden kann. ECharts ist eine Open-Source-JavaScript-Datenvisualisierungsbibliothek, mit der eine Vielzahl interaktiver Diagramme erstellt werden können. In diesem Artikel wird erläutert, wie Sie ECharts verwenden, um Trichteränderungen in Daten anzuzeigen, und es werden spezifische Codebeispiele bereitgestellt.
Ein Trichterdiagramm ist ein spezieller Diagrammtyp, der zur Darstellung der Trichterform von Daten verwendet wird. Typischerweise stellt die untere Breite eines Trichterdiagramms Startdaten dar, die obere Breite stellt Enddaten dar und die Breite jeder Stufe dazwischen stellt Zwischendaten dar. Trichterdiagramme können die Prozessänderungen von Daten genau darstellen und ermöglichen es dem Publikum, das Wachstum oder den Rückgang von Daten intuitiv zu verstehen.
Das Erstellen eines Trichterdiagramms mit ECharts kann im Allgemeinen in die folgenden Schritte unterteilt werden:

3.1 Daten vorbereiten

Zuerst müssen Sie die Daten vorbereiten, die angezeigt werden müssen. Die Daten jeder Stufe sollten zwei Attribute enthalten, nämlich den Namen der Stufe und den Wert der Stufe. Beispielsweise können wir die folgenden Daten haben:

var data = [
    { name: '访问', value: 100 },
    { name: '浏览', value: 80 },
    { name: '点击', value: 60 },
    { name: '转化', value: 40 },
    { name: '下单', value: 20 },
    { name: '支付', value: 10 }
];

3.2 Erstellen Sie eine Diagramminstanz

Als nächstes müssen Sie eine ECharts-Diagramminstanz erstellen. Ein einfaches Beispiel für ein Trichterdiagramm kann mit dem folgenden Code erstellt werden:

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

Hier ist 'chart' die ID eines HTML-Elements, das zur Aufnahme von ECharts-Diagrammen verwendet wird.

'chart'是一个HTML元素的id，用于容纳ECharts图表。

3.3 配置漏斗图
ECharts提供了丰富的配置选项，可以用来自定义漏斗图的样式。以下是一个基本的漏斗图配置示例：

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20
                }
            },
            data: data
        }
    ]
};

在上述配置中，我们可以设置tooltip的内容和格式，设置漏斗图的位置和大小，设置数据的排序方式和标签显示方式等。

3.4 渲染图表
最后，将配置应用到图表实例中，并使用setOption3.3 Konfigurieren des Trichterdiagramms

ECharts bietet eine Fülle von Konfigurationsoptionen, mit denen sich der Stil des Trichterdiagramms anpassen lässt. Das Folgende ist ein einfaches Beispiel für die Konfiguration eines Trichterdiagramms:

myChart.setOption(option);

In der obigen Konfiguration können wir den Inhalt und das Format des Tooltips festlegen, die Position und Größe des Trichterdiagramms festlegen, die Sortiermethode der Daten und die Anzeigemethode festlegen Etiketten usw.

Wenden Sie abschließend die Konfiguration auf die Diagramminstanz an und verwenden Sie zum Rendern die Methode setOption:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var data = [
            { name: '访问', value: 100 },
            { name: '浏览', value: 80 },
            { name: '点击', value: 60 },
            { name: '转化', value: 40 },
            { name: '下单', value: 20 },
            { name: '支付', value: 10 }
        ];
        
        var myChart = echarts.init(document.getElementById('chart'));
        
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20
                        }
                    },
                    data: data
                }
            ]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

Das Folgende ist ein vollständiger Code zum Erstellen eines Trichterdiagramms mit ECharts-Beispiel:

Mit dem obigen Code können Sie ein Trichterdiagramm im Browser anzeigen und die Daten über die interaktiven Funktionen von ECharts weiter analysieren und erkunden. 🎜🎜🎜Zusammenfassung🎜Dieser Artikel stellt die grundlegenden Konzepte und Verwendungsschritte des ECharts-Trichterdiagramms vor und bietet spezifische Codebeispiele. Ich hoffe, dieser Artikel kann den Lesern helfen und ihnen ein tieferes Verständnis dafür vermitteln, wie man ECharts verwendet, um Trichteränderungen in Daten anzuzeigen. Natürlich verfügt ECharts über viele weitere leistungsstarke Funktionen, die der Leser weiter erlernen und erkunden kann. 🎜🎜

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

JavaScript 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：So verwenden Sie das Polarkoordinatensystem zur Anzeige von Daten in EChartsNächster Artikel：So verwenden Sie das Polarkoordinatensystem zur Anzeige von Daten in ECharts

In Verbindung stehende Artikel

Mehr sehen