# Wie man interaktive ECharts in NoteRich einbinden kann Daten sind nur so wertvoll, wie Ihre Fähigkeit, sie zu verstehen. Im Bereich der Personalen Wissensverwaltung ist die Umwandlung von Rohdaten und strukturierten Informationen in visuelle Erkenntnisse entscheidend. **NoteRich** schließt die Lücke zwischen Text und Daten, indem es die **Apache ECharts** direkt unterstützt. Dadurch können Sie vollinteraktive Diagramme, die für die Veröffentlichung geeignet sind, direkt in Ihre Notizen einbinden. Im Gegensatz zu cloudbasierten Tools, die Ihre Daten an externe Servern senden, um sie zu rendern, verarbeitet und rendert **NoteRich** ECharts vollständig auf Ihrem lokalen Gerät. Dadurch bleiben Ihre proprietären Daten zu 100 % privat und es wird eine nahtlose, interaktive Visualisierung ermöglicht. --- ## Warum ECharts in NoteRich? Apache ECharts ist eine Open-Source-Visualisierungsbibliothek, die für ihre Flexibilität, Tiefe und Plattformübergreifende Kompatibilität bekannt ist. Durch die direkte Integration von ECharts bietet **NoteRich** mehrere Vorteile: - **Null-Code-Rendering**: Schreiben Sie die Standard-JSON-Konfiguration in einen Markdown-Codeblock, und **NoteRich** rendert ihn sofort in ein interaktives Diagramm. - **100% Lokaler und Privater Betrieb**: Der Rendering-Engine wird lokal im Browser ausgeführt. Ihre Daten verlassen Ihr Gerät nie. - **Reichhaltige Interaktivität**: Genießen Sie integrierte Zoomfunktionen, Pannelelemente, Tooltips und die Möglichkeit, Legenden umzuschalten, ohne eine einzige Zeile JavaScript schreiben zu müssen. - **AI-betriebene Generierung**: Lassen Sie die lokale AI von **NoteRich** Ihre Tabellen oder natürliche Sprachanweisungen analysieren, um automatisch die ECharts-JSON-Datei zu generieren. --- ## Die Grundlagen: Einführung Ihres ersten Diagramms Die Einführung eines Diagramms in **NoteRich** ist genauso einfach wie das Schreiben eines Markdown-Codeblocks. Sie müssen nur `echarts` als Sprachidentifikator angeben und ein gültiges ECharts`-`option`-JSON-Objekt bereitstellen. ```echarts { "title": { "text": "Lokaler-First-Not-Growth", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` Wenn Sie in den Preview-Modus wechseln oder die Notiz lesen, übernimmt der Rendering-Engine von **NoteRich** die Arbeit mit dem `echarts`-Block, initialisiert die ECharts-Instanz und bindet sie an das DOM – mit automatischer Anpassung der Größe. --- ## Tiefere Einblicke: Fortgeschrittene Diagrammkonfigurationen Wenn Sie die Grundlagen beherrschen, können Sie die volle Kraft von ECharts nutzen, um komplexe, dreidimensionale Visualisierungen zu erstellen. ### 1. Mehrfach-Serien und gemischte Diagramme Sie können verschiedene Diagrammtypen einfach kombinieren, z. B. einen Linienstichter auf einem Balkendiagramm. Dies erreichen Sie, indem Sie mehrere Objekte im `series`-Array definieren und duale Y-Axen verwenden. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Erstellte Notizen", "Kumulative Gesamtumfang"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Täglich", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Gesamt", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Erstellte Notizen", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Gesamt", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. Scheiben- und Donut-Diagramme für die Kombination Die Visualisierung von Proportionen ist mit ECharts```pie`-Serie einfach. Sie können den Radius anpassen, um beeindruckende Donut-Diagramme zu erstellen, die dem minimalistischen Stil von **NoteRich** entsprechen. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Speichernutzung", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Text-Notizen", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Anhänge", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Datenbanken", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI-betriebene Visualisierung: Von Text zu Diagramm Manuelles Schreiben von JSON-Daten ist zwar effektiv, aber **NoteRich** geht noch einen Schritt weiter mit seinem **lokalen AI-Visualisierungsmotor**. Sie müssen nicht immer die Konfiguration selbst erstellen. ### Sprache in Diagramme Sie können einfach beschreiben, welches Diagramm Sie wünschen, in alltäglicher Sprache. Die lokale LLM-Engine von **NoteRich** wird dann die ECharts-JSON-Datei für Sie generieren. *Beispiel für Anweisung: „Erstelle ein Radardiagramm, das die Merkmale von NoteRich, Notion und Obsidian in Bezug auf Privatsphäre, Geschwindigkeit, Offline-Unterstützung und Erweiterbarkeit vergleicht.“* ### Automatische Erkennung aus Tabellen Wenn Sie in Ihrer Notiz eine Markdown-Tabelle haben, kann die AI von **NoteRich** die strukturierten Daten analysieren und die entsprechende ECharts-Konfiguration automatisch vorschlagen oder generieren. Dieser nahtlose Übergang von Rohdaten zu visuellen Erkenntnissen erfolgt vollständig auf Ihrem Gerät, wodurch Ihre analytischen Daten stets privat bleiben. --- ## Leistung und Lazy-Loading Eine häufige Bedenken bei der Einbindung mehrerer interaktiver Diagramme in ein Dokument ist die Leistung. **NoteRich** löst dieses Problem mit einer hochoptimierten **Lazy-Loading-Architektur**. 1. **Intersection Observer**: Diagramme werden erst dann rendiert, wenn sie in den Bildschirmbereich gelangen. Dies reduziert die Anfangsladezeit langer Dokumente erheblich. 2. **Leichte Skelett-Benutzeroberfläche**: Während ein Diagramm geladen oder initialisiert wird, wird eine leichte Skelett-Umgebung angezeigt, um Layout-Änderungen zu verhindern und eine flüssige Lesebene zu gewährleisten. 3. **Reaktives Anpassen der Größe**: **NoteRich** bindet automatisch einen `ResizeObserver` an jede ECharts-Instanz, sodass die Diagramme sich ohne manuelle Intervention an die Anpassung der Fenstergröße oder Seitengestaltung anpassen können. --- ## Best Practices für ECharts in NoteRich Um den maximalen Nutzen von ECharts in **NoteRich** zu erzielen, beachten Sie folgende Tipps: - **Valide JSON**: Stellen Sie sicher, dass Ihre Konfiguration valide JSON ist. **NoteRich** zeigt im Editor eine Fehlermeldung an, wenn die Syntax falsch ist, um App-Ausfälle zu verhindern. - **Passen Sie das Thema an**: Die Benutzeroberfläche von **NoteRich** ist minimalistisch und monochromatisch. Verwenden Sie Farben wie `#000` (Hauptfarbe), `#666` (sekundäre Textfarbe) und `#eaeaea` (Rahmenfarbe/Hintergrundfarbe) in Ihrer Diagrammkonfiguration, um visuelle Harmonie zu gewährleisten. - **Verwenden Sie `grid` für die Abstände**: Definieren Sie immer die `grid`-Eigenschaft, damit Ihre Diagrammachsen und Beschriftungen genügend Raum haben und nicht von den Rändern des Containers eingeklemmt werden. - **Nutzen Sie die lokale AI**: Für komplexe Diagramme lassen Sie die AI die schwierige Arbeit erledigen. Sie können die generierte JSON-Datei jederzeit manuell anpassen, um Feinstellungen zu erzielen. --- ## Schlussfolgerung Die direkte Integration von interaktiver Datenvisualisierung in Ihr Notizführungsprozess eliminiert die Notwendigkeit, zwischen externen Tools wie Excel oder Tableau hin- und herzuschalten. Mit der native Unterstützung von **ECharts** ermöglicht **NoteRich** Ihnen, Ihre lokale Wissensbasis in ein dynamisches, visuelles und hochwertiges Dashboard zu verwandeln – und das alles unter Beibehaltung der unverhandelbaren Privatsphäre und der lokal-First-Philosophie, die Sie erwarten. Fangen Sie heute damit an, Ihre Daten einzubinden, und sehen Sie, wie Ihre Notizen zum Leben erwachen. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Datenvisualisierung</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokaler-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-betriebene Visualisierung</span> </div>