61-design/echarts-beautifier-v2

ECharts Beautifier v2

Erstellen Sie interaktive, berichtsfertige ECharts-HTML-Diagramme aus Daten. Optimiert für Datenanalysten: Zuerst das Analyseziel verstehen, dann die Daten profilieren, das Diagramm auswählen, den visuellen Stil wählen und ein eigenständiges HTML-Artefakt mit narrativem Kontext ausliefern.

Machen Sie dies nicht zu einem ECharts-Coding-Tutorial. Der Benutzer sollte keine Optionen, JavaScript oder CSS schreiben müssen.

Workflow

Schritt 0: Analyse-Briefing

Leiten Sie das Ziel des Benutzers ab, bevor Sie ein Diagramm auswählen:

• Trend: Veränderung über Zeit, Saisonalität, Spitzen, Rückgang, Wachstum.
• Vergleich: Rangfolge, Gruppenunterschied, Zielerreichung, Vorher/Nachher.
• Zusammensetzung: Anteil, Beitrag, Struktur, Verschiebung.
• Verteilung: Streuung, Konzentration, Ausreißer, lange Ausläufer.
• Conversion: Trichter, Abbrecher, Stufeneffizienz.
• Fluss: Quelle-Ziel-Bewegung, Pfad, Migration, Attribution.
• Positionierung: Zwei-Metrik-Abwägung, Quadranten, Blasenvergleich.
• Ausnahme: Anomalie, Schwellenwertüberschreitung, ungewöhnliches Segment.
• Zusammenfassung: Führungs- oder operative Erzählung über mehrere Ansichten hinweg.

Wenn die Absicht klar ist, passen Sie sich automatisch an. Wenn mehrere Absichten zu materiell unterschiedlichen Schlussfolgerungen führen würden, stellen Sie eine präzise Klärungsfrage.

Schritt 1: Dateneingabe und Zuverlässigkeit

Bevorzugen Sie strukturierte Daten in dieser Reihenfolge: Excel/CSV/JSON, kopierter Tabellentext, klarer Tabellen-Screenshot, klarer Diagramm-Screenshot, unscharfes oder unbeschriftetes Bild.

Extrahieren Sie bei Bildern zuerst strukturierte Zeilen und Spalten. Wenn die Extraktion teilweise oder annähernd ist, kennzeichnen Sie das Ergebnis als geschätzt/unvollständig und fragen Sie nach Originaldaten, wenn Präzision wichtig ist. Lesen Sie references/image-data-input.md, wenn die Eingabe ein Bild oder Screenshot ist.

Schritt 2: Datenprofil

Identifizieren Sie: Zeitkörnung, Maße, Dimensionen, Zähler/Nenner, Einheiten, Stichprobengröße, fehlende Werte, Ausreißer, doppelte Zeilen, Summen, ob Prozentwerte bereits berechnet wurden und ob Rangfolge- oder Anteilsberechnungen gültig sind.

Schritt 3: Diagrammauswahl

Wählen Sie Diagramme zuerst nach Analyseintention und dann nach Datenstruktur aus. Lesen Sie references/chart-selection-matrix.md für die Routing-Matrix, wenn die Diagrammauswahl nicht offensichtlich ist.

Dokumentieren Sie die Diagrammauswahl immer im Output mit einer kurzen Begründung, zum Beispiel: „Ein horizontales Ranking-Balkendiagramm wurde ausgewählt, weil die Aufgabe viele Kategorien mit langen Beschriftungen vergleicht.“

Schritt 4: Stilauswahl

Wählen Sie einen Berichtsstil basierend auf Zielgruppe und Verwendung:

• Geschäftsbericht: Polierter Executive-Report.
• Ops-Review: Dichte operative Überwachung.
• Exploration: Analysten-Arbeitsbereich mit Filtern und Vergleichen.
• Dunkler Bildschirm: Wallboard- oder Einsatzzentralen-Anzeige.
• Eingebettet: Kompaktes HTML für Dokumentationen, Wikis oder einfaches Teilen.

Lesen Sie references/style-recipes.md, bevor Sie ein thematisiertes HTML-Artefakt erstellen.

Schritt 5: HTML-Lieferobjekt

Generieren Sie eine eigenständige HTML-Seite mit ECharts. Fügen Sie hinzu:

• Titel, Untertitel und Analyse-Briefing.
• Wichtigste Erkenntnisse oder beste aktuelle Interpretation.
• Datenquelle und Hinweis zur Zuverlässigkeit.
• Grund für die Diagrammauswahl.
• Interaktiver Tooltip, Legende/Filter wo sinnvoll, responsives Layout und mobiles Verhalten.
• Notwendige Annotationen für Spitzen, Täler, Schwellenwerte, Baselines, Abbrüche oder Quadrantenbeschriftungen.

Vermeiden Sie dekorative Komplexität, die die Lesegeschwindigkeit beeinträchtigt. Machen Sie das Diagramm zuerst nützlich, bevor Sie es verschönern.

Validierungs-Checkliste

Vor der Auslieferung:

• Das ausgewählte Diagramm entspricht dem genannten Analyseziel.
• Maße, Nenner, Einheiten und Zeitkörnung sind sichtbar oder dokumentiert.
• Das HTML rendert ohne Konsolenfehler und skaliert auf Mobilgeräten.
• Tooltips legen genügend Details für die Analystenprüfung offen.
• Die Erzählung macht keine übermäßigen Behauptungen über die Datenzuverlässigkeit hinaus.
• Alle generierten Dateien sind klar benannt und werden beim Erstellen von Benutzerlieferobjekten in einem neuen Ausgabeordner abgelegt.

Beispiele

Verwenden Sie die Dateien in examples/ als kompakte Routing-Beispiele:

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json