So verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts-js-Tutorial-php.cn

So verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts

王林

Freigeben： 2023-12-18 08:52:06

Original

1671 Leute haben es durchsucht

So verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts

ECharts (Baidus Open-Source-JavaScript-Diagrammbibliothek) ist ein leistungsstarkes und benutzerfreundliches Datenvisualisierungstool. Es bietet eine Vielzahl von Diagrammtypen, darunter Liniendiagramme, Balkendiagramme, Kreisdiagramme und mehr. Das Kalenderdiagramm ist ein sehr markanter und praktischer Diagrammtyp in ECharts, der zur Darstellung zeitbezogener Daten verwendet werden kann. In diesem Artikel wird die Verwendung von Kalenderdiagrammen in ECharts vorgestellt und spezifische Codebeispiele bereitgestellt.

Zuerst müssen Sie die ECharts-Bibliothek importieren und einen Container erstellen, um das Diagramm anzuzeigen. Hier ist ein einfaches Beispiel für eine HTML-Datei:

<!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: 100%; height: 600px;"></div>
    <script>
        // 在这里编写JavaScript代码
    </script>
</body>
</html>

Nach dem Login kopieren

Als nächstes müssen Sie die Daten für die Anzeige im Kalenderdiagramm vorbereiten. Die Daten sollten Zeitstempel und entsprechende Werte enthalten. Das Folgende ist ein Beispieldatensatz:

var data = [
    {time: "2022-01-01", value: 10},
    {time: "2022-01-02", value: 20},
    {time: "2022-01-03", value: 15},
    // 其他数据...
];

Nach dem Login kopieren

Dann müssen Sie im JavaScript-Codeteil die folgenden Schritte ausführen, um das Kalenderdiagramm zu zeichnen:

Erstellen Sie eine ECharts-Instanz und geben Sie den Diagrammcontainer an:

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

Nach dem Login kopieren

Konfigurieren Sie die grundlegenden Parameter des Kalenderdiagramms (z. B. Titel, Achse usw.):

var option = {
    title: {
        text: '时间数据的日历图示例',
        left: 'center'
    },
    tooltip: {},
    calendar: {
        left: 'center',
        top: 'middle',
        orient: 'horizontal',
        cellSize: [30, 30],
        range: ['2022-01-01', '2022-12-31']
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }]
};

Nach dem Login kopieren

Im obigen Beispiel haben wir den Titel des Kalenderdiagramms auf „Kalenderdiagramm-Beispiel für Zeitdaten“ festgelegt und das Kalenderdiagramm platziert in der Mittelstellung. Setzen Sie cellSize auf [30, 30], um die Größe jedes Datumsrasters zu steuern. Verwenden Sie range, um den Zeitbereich des Diagramms festzulegen.

Konfigurationselemente auf das Diagramm anwenden:

chart.setOption(option);

Nach dem Login kopieren

Zum Schluss müssen Sie nur noch die HTML-Datei öffnen und schon können Sie das gezeichnete Kalenderdiagramm sehen!

Zusammenfassend lässt sich sagen, dass es sehr einfach ist, das Kalenderdiagramm von ECharts zur Anzeige von Zeitdaten zu verwenden. Sie müssen lediglich Ihre Daten vorbereiten und die oben genannten Schritte ausführen, um das Diagramm zu konfigurieren und zu rendern. Selbstverständlich können Sie den Darstellungseffekt und Stil des Diagramms auch Ihren eigenen Bedürfnissen entsprechend anpassen.

Hinweis: Das obige Beispiel dient nur zur Demonstration und stellt keinen vollständigen Datensatz und keinen vollständigen Code bereit. Nehmen Sie in der tatsächlichen Anwendung bitte entsprechende Änderungen entsprechend Ihren eigenen Anforderungen vor.

Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie Kalenderdiagramme verwenden, um Zeitdaten in ECharts anzuzeigen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Kalenderdiagramme zur Anzeige von Zeitdaten in ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!