ECharts-Mehrachsendiagramm: So zeigen Sie mehrdimensionale Daten an-js-Tutorial-php.cn

ECharts-Mehrachsendiagramm: So zeigen Sie mehrdimensionale Daten an

WBOY

Freigeben： 2023-12-18 18:39:54

Original

1891 Leute haben es durchsucht

ECharts-Mehrachsendiagramm: So zeigen Sie mehrdimensionale Daten an

Mehrachsiges Diagramm von ECharts: Für die Anzeige mehrdimensionaler Daten sind spezifische Codebeispiele erforderlich

Einführung:
Mit dem Aufkommen des Big-Data-Zeitalters müssen wir komplexe mehrdimensionale Daten besser anzeigen. Als leistungsstarke Visualisierungsbibliothek bietet ECharts eine Vielzahl von Diagrammtypen, unter denen mehrachsige Diagramme eines der wichtigen Werkzeuge zur Darstellung mehrdimensionaler Daten sind. In diesem Artikel wird erläutert, was ein mehrachsiges Diagramm ist und wie ECharts zum Anzeigen mehrdimensionaler Daten verwendet wird. Außerdem werden entsprechende Codebeispiele bereitgestellt.

1. Was ist ein mehrachsiges Diagramm? Ein mehrachsiges Diagramm ist ein Diagramm, das mehrere Datenreihen mit unterschiedlichen Dateneinheiten und Größen auf demselben Diagramm anzeigen kann. Durch die Verwendung mehrerer Achsen, eine für jede Datenreihe, können wir Daten über verschiedene Dimensionen hinweg intuitiver vergleichen.

2. ECharts-Konfigurationselemente für mehrachsige Diagramme

Um ein mehrachsiges Diagramm zu erstellen, müssen wir mehrere Eigenschaften im Optionsobjekt von ECharts festlegen. Im Folgenden sind die wichtigsten Konfigurationselemente aufgeführt, die festgelegt werden müssen:

legend-Attribut: Wird zum Konfigurieren der Legende verwendet, d. h. der Farbidentifizierung im Diagramm, die zur Unterscheidung verschiedener Datenreihen verwendet wird.
xAxis- und yAxis-Eigenschaften: werden zum Konfigurieren mehrerer Achsen verwendet. xAxis konfiguriert die x-Achse und yAxis konfiguriert die y-Achse. Mehrere Achsen können in Array-Form konfiguriert werden.
series-Attribut: Wird zum Konfigurieren von Datenreihen verwendet. Jede Datenreihe entspricht einer Achse und kann unterschiedliche Datentypen und Diagrammdarstellungsmethoden haben.

3. Codebeispiel

Im Folgenden zeigen wir anhand eines konkreten Codebeispiels, wie Sie mit ECharts ein mehrachsiges Diagramm zur Anzeige mehrdimensionaler Daten erstellen. Beginnen wir mit einem Merchandising-Beispiel.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-axis Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>

Nach dem Login kopieren

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

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['电视销量', '冰箱销量', '洗衣机销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销量'
        },
        {
            type: 'value',
            name: '销售额'
        }
    ],
    series: [
        {
            name: '电视销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        },
        {
            name: '冰箱销量',
            type: 'bar',
            data: [80, 100, 120, 150, 110]
        },
        {
            name: '洗衣机销量',
            type: 'line',
            yAxisIndex: 1,
            data: [1000, 1500, 2000, 1800, 1600]
        }
    ]
};

chart.setOption(option);

Nach dem Login kopieren

Im obigen Code richten wir drei Datenreihen ein: TV-Verkäufe, Kühlschrankverkäufe und Verkauf von Waschmaschinen. Darunter werden die Verkäufe von Fernsehgeräten und Kühlschränken mithilfe von Balkendiagrammen und die Verkäufe von Waschmaschinen mithilfe von Liniendiagrammen dargestellt. Verkaufsvolumen und Umsätze werden über unterschiedliche y-Achsen dargestellt.

4. Zusammenfassung

ECarts bietet die Funktion von mehrachsigen Diagrammen, mit denen mehrdimensionale Daten problemlos angezeigt werden können. Durch die Einstellung geeigneter Konfigurationselemente können wir schöne und intuitive mehrachsige Diagramme erstellen. Mithilfe des Beispielcodes in diesem Artikel können Sie schnell mit ECharts beginnen, um mehrachsige Diagramme zu zeichnen und diese auf Ihre eigenen Projekte anzuwenden.

Referenzlink:

[Offizielles ECharts-Dokument](https://echarts.apache.org/zh/index.html)

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