Basierend auf der HTML5-Canvas-Diagrammbibliothek: ECharts

ECharts, als Open Source von Baidus kommerziellem Frontend-Datavisualisierungs-Team veröffentlicht, basiert auf HTML5 Canvas. Es ist eine reine JavaScript-Diagrammbibliothek, die intuitive, lebendige, interaktive und anpassbare Datenvisualisierungsdiagramme bietet. Innovative Funktionen wie Drag-and-Drop-Neuberechnung, Datenansicht und Wertebereichs-Roaming verbessern das Nutzererlebnis erheblich und befähigen Benutzer, Daten zu erschließen und zu integrieren.——Im Zeitalter von Big Data ist es Zeit, Datendiagramme neu zu definieren

Architektur

ECharts (Enterprise Charts - Diagrammbibliothek für kommerzielle Produkte)

Bietet eine Diagrammbibliothek für gängige kommerzielle Produkte; auf Basis vonZRenderwerden grundlegende Komponenten wie Koordinatensysteme, Legenden, Tooltips und Toolboxen erstellt, und darauf aufbauend gibt es Liniendiagramme (Flächendiagramme), Balkendiagramme (Streifendiagramme), Streudiagramme (Blasendiagramme), Kreisdiagramme (Ringdiagramme), K-Linien-Diagramme, Karten, Chord-Diagramme und kraftgerichtete Layout-Diagramme. Es unterstützt außerdem Stapelung in jeder Dimension und die gemischte Anzeige mehrerer Diagrammtypen.

Gemischte Diagramme sind ausdrucksstärker und interessanter. Die von ECharts bereitgestellten Diagramme (9 Kategorien, insgesamt 14 Typen) unterstützen beliebige Mischungen:

Liniendiagramme (Flächendiagramme), Balkendiagramme (Streifendiagramme), Streudiagramme (Blasendiagramme), K-Linien-Diagramme, Kreisdiagramme (Ringdiagramme), Radar-Diagramme, Karten, Chord-Diagramme und kraftgerichtete Layout-Diagramme.

Ein Standarddiagramm im gemischten Modus:

Enthält einzigartige Module für Legende, Toolbox, Datenbereichs-Zoom und Wertebereichs-Roaming sowie ein kartesisches Koordinatensystem (das eine oder mehrere Kategorieachsen und eine oder mehrere Wertachsen enthalten kann, insgesamt bis zu vier Achsen: oben, unten, links, rechts)

Drag-and-Drop-Neuberechnung

Die Drag-and-Drop-Neuberechnung (patentiert) bietet ein Nutzererlebnis, wie es in statistischen Diagrammen noch nie zuvor möglich war, ermöglicht es Benutzern, statistische Daten effektiv zu extrahieren und zu integrieren, sogar Daten zwischen mehreren Diagrammen auszutauschen, und befähigt Benutzer, Daten zu erschließen und zu integrieren.

Datenansicht

Wenn die Daten, die Sie präsentieren, für die Nutzer wichtig genug sind, werden sie sich nicht damit zufriedengeben, nur visuelle Diagramme anzusehen. Müssen Sie ihre Bedürfnisse nach Herunterladen, Speichern, Teilen, Verarbeiten und Integrieren vorhandener Daten einzeln bedienen?

Vielleicht müssen Sie nur einen kommagetrennten Datentext bereitstellen, und schon verstehen sie es – das ist die Datenansicht von ECharts! Natürlich können Sie die Ausgabemethode der Datenansicht überschreiben, um Daten auf Ihre ganz eigene Weise zu präsentieren.

Wenn Ihre Nutzer fortgeschritten genug sind, können Sie sogar die Bearbeitungsfunktion der Datenansicht aktivieren. Im Vergleich zur Neuberechnung per Drag-and-drop ist dies eine Massenänderung von Daten!

Echarts 数据视图

Dynamischer Typwechsel

Viele Diagrammtypen haben ähnliche Ausdrucksmöglichkeiten, aber aufgrund von Unterschieden bei Daten, Darstellungsanforderungen und persönlichen Vorlieben können die endgültigen Diagramme sehr unterschiedlich aussehen. Zum Beispiel ist die Wahl zwischen Liniendiagrammen und Balkendiagrammen oder die Entscheidung, ob Seriendaten gestapelt oder flach dargestellt werden sollen, immer ein Kopfzerbrechen.

ECharts bietet dynamisches Umschalten des Typs, sodass Nutzer frei zu dem Diagrammtyp und Stapelstatus wechseln können, den sie benötigen.

Legendenumschaltung

Die gleichzeitige Anzeige mehrerer Serien bietet reichhaltige Inhalte, aber wie lassen Sie Nutzer zu der bestimmten Serie wechseln, die sie interessiert?

ECharts bietet eine bequeme und schnelle mehrdimensionale Legendenumschaltung, mit der Sie jederzeit zu der Datenreihe wechseln können, die Sie interessiert.

Datenbereichsauswahl

Daten können unendlich sein, aber der Anzeigebereich ist immer begrenzt. Die Komponente zur Datenbereichsauswahl bietet die Möglichkeit, durch große Datenmengen zu navigieren, sodass Nutzer den Datenbereich auswählen und anzeigen können, der sie interessiert.

In Kombination mit dynamischen Markierungslinien und Markern für Mittelwert (Extremwert) demonstriert es leistungsstarke Datenanalysefähigkeiten.

Verknüpfung mehrerer Diagramme

Das Anzeigen mehrerer Datenreihen im selben kartesischen Koordinatensystem kann manchmal für Verwirrung sorgen, aber sie weisen starke Korrelationen auf und können nicht getrennt werden?

ECharts bietet die Funktion zur Verknüpfung mehrerer Diagramme (connect), die weit mehr leistet, als nur Hover-Details anzuzeigen. Verbundene Diagramme teilen sich Komponenten-Ereignisse und fügen Bilder beim Speichern automatisch zusammen.

Wertebereich-Roaming

Koordinatenbasierte Diagramme (wie Karten und Streudiagramme) können die Datenverteilung visuell darstellen, indem Farbänderungen Wertgrößen repräsentieren.

Aber wie konzentriert man sich auf die Werte, die einen interessieren? Wir haben eine Funktion namens Wertebereich-Roaming entwickelt, mit der Sie Werte einfach filtern können.

Glow-Effekte

Wir wissen, dass wir häufig Funktionen benötigen, die ins Auge fallen.

ECharts unterstützt Glow-Effekte für Marker und Markierungslinien. Besonders bei der Verwendung auf Karten lassen sich damit leicht Visualisierungseffekte für Baidu-Migrationsdaten erzielen.

Großmaßstäbliches Streudiagramm

Wie zeigt man Millionen diskreter Datenpunkte an, um ihre Verteilung und Clusterbildung zu finden? Es scheint, als gäbe es keine andere Wahl, als professionelle Statistikwerkzeuge (wie MATLAB) zu verwenden?

Nein, ECharts hat ein pixelbasiertes großmaßstäbliches Streudiagramm erfunden (patentiert). Eine 900 x 400 große Streufläche kann 360.000 Datensätze ohne Wiederholung anzeigen. Für normale Anwendungen reichen moderne Browser aus, um mühelos Millionen von Streudatenpunkten anzuzeigen!

Dynamisches Hinzufügen von Daten

Wenn Sie sich in Echtzeit ändernde Daten anzeigen müssen, ist diese dynamische Schnittstelle sehr hilfreich für Sie.

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

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

Echarts 动态数据添加

Unterstützung für Markierungslinien

Trendlinie? Durchschnittslinie? Zukünftige Trends? Korrekturwerte? Nutzer mit Bedarf kennen den Zweck natürlich~

Die Bereitstellung von Unterstützung für Markierungslinien ist eine wesentliche Funktion in K-Linien-Charts! Ja, K-Linien-Charts sind in Entwicklung~

Mehrdimensionales Stapeln

Unterstützt das Stapeln mehrserieller, mehrdimensionaler Daten. In Kombination mit automatisch skalierenden grafischen Entitäten und kartesischen Koordinatensystemen können aussagekräftigere statistische Diagramme dargestellt werden~

Unterregionen-Kartenmodus

Kartentypen unterstützen Welt, China und 34 Provinzen, regierungsunmittelbare Städte und autonome Regionen landesweit. Es unterstützt außerdem den Unterregionenmodus, der den Hauptkartentyp um enthaltene Unterregionenkarten erweitert und so einfach vereinfachte Karten von 176 Ländern und Regionen weltweit sowie über 600 Provinzen und Städten landesweit ausgibt.

GeoJSON-Kartenerweiterung

Die integrierten Karten basieren auf Kartendaten, die aus standardmäßigen GeoJSON-Geodaten erzeugt und mit einem effizienten Komprimierungsalgorithmus komprimiert werden (etwa 30 % der Größe von Standard-GeoJSON). Wenn die integrierten Kartentypen oder Daten nicht Ihren Projektanforderungen entsprechen, können Sie einfach dynamisch registrieren, um die neuen Typen zu erstellen, die Sie benötigen.

Markierungen & Markierungslinien

Das Hinzufügen zusätzlicher Markierungen ist eine gängige Funktion, z. B. das Markieren bestimmter Positionen auf Karten, das Markieren von Extrempunkten in Liniendiagrammen oder das Markieren von Trendlinien in Balkendiagrammen. Alle ECharts-Diagrammtypen unterstützen Markierungen und Markierungslinien und reagieren von Natur aus auf Interaktionen von Komponenten wie Legenden-Umschaltern und Wertebereichs-Roaming.

Personalisierte Anpassung

500+ konfigurierbare Optionen in Kombination mit einem mehrstufigen Steuerungsdesign erfüllen hochgradig individuelle Personalisierungsbedürfnisse.

Ereignisinteraktion

Kann Benutzerinteraktionen und Datenänderungsereignisse erfassen, um eine Verknüpfung zwischen Diagrammen und der Außenwelt zu erreichen.