ECharts-Tutorial

ECharts ist eine in JavaScript implementierte Open-Source-Visualisierungsbibliothek, die Diagramme für verschiedene Branchen abdeckt, um unterschiedliche Anforderungen zu erfüllen.

ECharts bietet eine reichhaltige Auswahl an Diagrammtypen und Interaktionsmöglichkeiten, mit denen Benutzer durch einfache Konfiguration eine Vielzahl von Diagrammen erstellen können, darunter unter anderem Linien-, Balken-, Streu-, Kreis-, Radar- und Kartendiagramme und mehr.

ECharts folgt der Open-Source-Lizenz Apache-2.0 und ist für die kommerzielle Nutzung kostenlos.

ECharts ist mit der überwiegenden Mehrheit der aktuellen Browser (IE8/9/10/11, Chrome, Firefox, Safari usw.) und verschiedenen Geräten kompatibel und ermöglicht eine flexible Anzeige jederzeit und überall.

Vorkenntnisse, die Sie vor dem Lesen dieses Tutorials benötigen:

Um dieses Tutorial zu lesen, benötigen Sie die folgenden Grundlagen:

Erstes ECharts-Beispiel

Beispiel

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Erstes ECharts-Beispiel</title> <!--echarts.js einbinden--> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!--Bereiten Sie ein DOM-Element mit Abmessungen (Breite und Höhe) für ECharts vor.--> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">// Basierend auf dem vorbereiteten DOM, die ECharts-Instanz initialisieren var myChart = echarts.init(document.getElementById('main')); // Konfigurationselemente und Daten für das Diagramm angeben var option = { title: { text: 'Erste ECharts-Instanz' }, tooltip: {}, legend: { data:['Verkäufe'] }, xAxis: { data: ["Hemd", "Wollpullover", "Chiffonbluse", "Hose", "Hohe Absätze", "Socken"] }, yAxis: {}, series: [{ name: 'Verkäufe', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // Die gerade angegebenen Konfigurationselemente und Daten verwenden, um das Diagramm anzuzeigen. myChart.setOption(option);</script> </body> </html>

Selbst ausprobieren »

Klicken Sie auf die Schaltfläche "Try it", um Online-Beispiele anzuzeigen

ECharts-Funktionen

ECharts enthält die folgenden Funktionen:

  • Vielfältige Visualisierungstypen: Bietet herkömmliche Linien-, Balken-, Streu- und Kreisdiagramme, K-Liniendiagramme, Boxplots für die Statistik, Karten, Heatmaps und Linien für die geografische Datenvisualisierung, Beziehungsgraphen, Treemaps und Sunburst-Diagramme für die relationale Datenvisualisierung, Parallelkoordinaten für die mehrdimensionale Datenvisualisierung sowie Funnel-Diagramme und Tachometer für BI und unterstützt das Mischen und Kombinieren zwischen Diagrammen.

  • Mehrere Datenformate können direkt ohne Konvertierung verwendet werden: Das integrierte dataset-Attribut (4.0+) unterstützt die direkte Übergabe von Datenquellen in verschiedenen Formaten, darunter zweidimensionale Tabellen, Schlüssel-Wert und mehr; außerdem wird die Eingabe von Daten im TypedArray-Format unterstützt.

  • Front-End-Darstellung von zig Millionen Datenpunkten: Durch inkrementelle Rendering-Technologie (4.0+) in Kombination mit verschiedenen sorgfältigen Optimierungen kann ECharts Datenmengen im Zehn-Millionen-Bereich anzeigen.

  • Optimierung für Mobilgeräte: Für die mobile Interaktion wurden detaillierte Optimierungen vorgenommen, z. B. Zoomen und Verschieben im Koordinatensystem auf kleinen Mobilbildschirmen mit den Fingern. Auf dem PC können Sie ebenfalls mit der Maus (mit dem Mausrad) zoomen und im Diagramm verschieben.

  • Mehrere Rendering-Lösungen, plattformübergreifende NutzungUnterstützt das Rendern von Diagrammen in Form von Canvas, SVG (4.0+) und VML.

  • Tiefe interaktive Datenexploration: Bietet sofort einsatzbereite interaktive Komponenten wie Legende, visuelles Mapping, Datenbereichs-Zoom, Tooltip, Daten-Brushing usw., die interaktive Operationen wie mehrdimensionales Filtern von Daten, Zoomen der Ansicht und Detailanzeige ermöglichen.

  • Unterstützung für mehrdimensionale Daten und umfangreiche visuelle Kodierungsmethoden.: Bei traditionellen Streudiagrammen und Ähnlichem können die übergebenen Daten ebenfalls mehrdimensional sein.

  • Dynamische Daten: Änderungen an den Daten bewirken Änderungen in der Diagrammdarstellung.

  • Prächtige Spezialeffekte: Bietet auffällige Effekte für die Visualisierung geografischer Daten wie Linien- und Punktdaten.

  • Durch GL eine leistungsstärkere und schillerndere dreidimensionale Visualisierung erzielen.: Erzielt dreidimensionale Visualisierungseffekte in VR- und Großbildschirm-Szenarien.

  • Barrierefreiheit (4.0+)Unterstützt die automatische Generierung intelligenter Beschreibungen basierend auf der Diagrammkonfiguration, sodass blinde Benutzer den Diagramminhalt mithilfe von Screenreadern verstehen können, wodurch Diagramme einem breiteren Publikum zugänglich werden!

Weitere Erweiterungen