# Hoe u interactieve ECharts in NoteRich invoegt Gegevens zijn even waardevol als uw vermogen om ze te begrijpen. In het gebied van persoonlijke kennisbeheer is het belangrijk om ruwe cijfers en georganiseerde gegevens om te zetten in visuele inzichten. **NoteRich** maakt de overgang tussen tekst en gegevens mogelijk door **Apache ECharts** te ondersteunen, waardoor u volledig interactieve grafieken direct in uw notities kunt invoegen. In tegenstelling tot cloud-gebaseerde tools, die uw gegevens naar externe servers sturen voor weergave, verwerkt **NoteRich** ECharts volledig op uw lokale apparaat. Dit zorgt ervoor dat uw gegevens 100% privé blijven, terwijl de ervaring met visuele weergave soepel en interactief is. --- ## Waarom ECharts in NoteRich? **Apache ECharts** is een open-source bibliotheek voor visuele weergave, bekend vanwege haar soepelheid, diepgang en compatibiliteit met verschillende platforms. Door ECharts native te integreren, biedt **NoteRich** verschillende voordelen: - **Zelfstandige weergave zonder code**: Schrijf standaard JSON-configuraties in een Markdown-codeblok, en **NoteRich** weergeeft deze onmiddellijk als interactieve grafieken. - **100% lokale en privé**: De weergave-engine werkt lokaal in uw browser. Uw gegevens verlaat de app nooit. - **Intelligent interactiviteit**: Geniet van inbuilt zoomfuncties, panning, tooltips en het schakelen tussen legendes zonder dat u een enkele regel JavaScript hoeft te schrijven. - **AI-gevoede generatie**: Laat de lokale AI van **NoteRich** uw tabellen of natuurlijke taalopdrachten analyseren om de ECharts JSON automatisch te genereren. --- ## De basis: Invoegen van uw eerste grafiek Het invoegen van een grafiek in **NoteRich** is net zo simpel als het schrijven van een Markdown-codeblok. Vul alleen `echarts` als taalidentificator in en geef een geldig `option` JSON-object van ECharts. ```echarts { "title": { "text": "Local-First Note 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%" } } ``` Wanneer u overstapt naar de voorbeeldmodus of de notitie leest, intercepteert de weergave-engine van **NoteRich** het `echarts`-blok, initialiseert de ECharts-instellingen en bindt deze aan de DOM met automatische aanpassingen van de grootte. --- ## In-depth: Geavanceerde grafiekconfiguraties Zodra u de basis begrijpt, kunt u de volledige kracht van ECharts benutten om complexe, meerdere dimensies visuele weergaven te creëren. ### 1. Meerdere series en gemengde grafieken U kunt gemakkelijk verschillende grafieksoorten combineren, bijvoorbeeld een lijngrafiek combineren met een bargrafiek. Dit doet u door meerdere objecten in de `series`-array te definiëren en gebruik te maken van meerdere Y-axes. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notities gemaakt", "Cumulatieve totaal"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Ma", "Di", "Wo", "Do", "Fr", "Sa", "Zo"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Dagelijkse notities", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Totaal", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notities gemaakt", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Cumulatieve totaal", "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. Pie- en donutgrafieken voor compositie Het visualiseren van verhoudingen is eenvoudig met de `pie`-serie van ECharts. U kunt de straal aanpassen om prachtige donutgrafieken te maken die overeenkomen met de minimalistische stijl van **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Behoud van gegevens", "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": "Tekstnotities", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachements", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databanken", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI-gevoede visuele weergave: Van tekst naar grafiek Handmatig schrijven van JSON is krachtig, maar **NoteRich** gaat nog een stap verder met zijn **Lokale AI-Visuele Weergave Engine**. U hoeft de configuraties niet altijd zelf te schrijven. ### Natuurlijke taal naar grafiek U kunt gewoon beschrijven wat u wilt als grafiek in eenvoudige Engels. De lokale LLM van **NoteRich** zal de ECharts JSON voor u genereren. *Voorbeeld van een opdracht: "Maak een radargrafiek die de kenmerken van NoteRich, Notion en Obsidian vergelijkt op privacy, snelheid, offline ondersteuning en uitbreidbaarheid."* ### Automatische detectie uit tabellen Als u een Markdown-tabel in uw notitie heeft, kan de AI van **NoteRich** de georganiseerde gegevens analyseren en de corresponderende ECharts-configuraties automatisch aanbevelen of genereren. De overgang van ruwe gegevens naar visuele inzichten vindt volledig op uw apparaat plaats, waardoor uw analytische gegevens strikt privé blijven. --- ## Prestaties en Lazy Loading Een veelvoorkomende problem bij het invoegen van meerdere interactieve grafieken in één document is prestaties. **NoteRich** biedt hiervoor een zeer geoptimaliseerde **Lazy Loading Archieven**. 1. **Intersection Observer**: Grafieken worden alleen weergegeven wanneer ze zich in de weergavebereik bevinden. Dit reduceert de initiale ladenstijd van lange documenten aanzienlijk. 2. **Lichte skeleton UI**: Terwijl een grafiek wordt geladen of geïnitialiseerd, wordt een lichte skeleton UI getoond. Dit voorkomt schommelingen in de lay-out en zorgt voor een soepele leessituatie. 3. **Responsie aanpassing**: **NoteRich** bindt automatisch een `ResizeObserver` aan elke ECharts-instelling. Hierdoor passen de grafieken zich zonder manuele interventie aan bij aanpassingen van het venster of de sidebar. --- ## Best practices voor ECharts in NoteRich Om optimaal gebruik te maken van ECharts in **NoteRich**, houd de volgende tips in gedachten: - **Valide JSON**: Zorg ervoor dat uw configuraties een valide JSON zijn. **NoteRich** zal een foutmelding weergeven in de editor als de syntax incorrect is, waardoor appcrash wordt voorkomen. - **Match de thema**: De UI van **NoteRich** is minimalistisch en monochromatisch. Gebruik kleuren zoals `#000` (primair), `#666` (secundaire tekst) en `#eaeaea` (randen/achtergrond) in uw grafiekconfiguraties om visuele harmonie te behouden. - **Gebruik `grid` voor padding**: Definieer altijd de `grid`-eigenschap om ervoor te zorgen dat uw grafiek-axes en labels genoeg ruimte hebben en niet worden afgesneden door de randen van de container. - **Maak gebruik van lokale AI**: Voor complexe grafieken laat de AI de moeilijke werkzaamheden uitvoeren. U kunt de gegenereerde JSON altijd handmatig aanpassen voor perfectie. --- ## Conclusie Het integreren van interactieve data-visualisatie direct in uw notitieschema maakt het onnodig om tussen externe tools als Excel of Tableau te gaan. Met native ondersteuning van **ECharts** geeft **NoteRich** u de mogelijkheid om uw lokale kennisbasis om te zetten in een dynamisch, visueel en zeer interessant dashboard. Dit alles terwijl de privacy en lokale eerste filosofie behouden blijven. Begin vandaag nog met het invoegen van uw gegevens en zie hoe uw notities tot leven komen. --- <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]">Data Visualisatie</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokale eerste keuze</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-gevoede</span> </div>