# Jak vložit interaktivní ECharts do NoteRich Data jsou stejně cenná, jakou má vaše schopnost jejich pochopení. V oblasti správy osobních znalostí je klíčové převádět surová čísla a strukturovaná data na vizuální informace. **NoteRich** překládá rozdíl mezi textem a daty nativní podporou **Apache ECharts**, což vám umožňuje vložit plně interaktivní grafy, které jsou připraveny k publikování, přímo do vašich poznámek. Na rozdíl od nástrojů založených na cloudu, které odesílají vaše data na externí servery pro zobrazení, **NoteRich** zpracovává a zobrazuje ECharts přímo na vašem lokálním zařízení. To zajišťuje, že vaše data zůstanou 100% soukromá, přičemž poskytuje bezproblémové, interaktivní vizualizace. --- ## Proč ECharts v **NoteRich?** Apache ECharts je open-source knihovna pro vizualizaci, která je známá svou plynulostí, hloubkou a kompatibilitou s různými platformami. Integrace ECharts nativním způsobem umožňuje **NoteRich** nabídnout několik výhod: - **Zobrazení bez kódu**: Napište standardní JSON konfiguraci v bloku markdown kódu a **NoteRich** ji okamžitě převádí na interaktivní graf. - **100% lokální a soukromé**: Zobrazovací motor běží lokálně ve vašem prohlížeči. Vaše data nikdy neopustí vaše zařízení. - **Bohatá interaktivnost**: Užitek z integrované zoomování, posouvání, informací v pop-upů a možnosti přepínání legend bez nutnosti psaní jediné řádky JavaScriptu. - **Generování s pomocí AI**: Nechte lokální AI **NoteRich** analyzovat vaše tabulky nebo příkazy v přirozeném jazyce a automaticky generovat JSON ECharts. --- ## Základy: Vložení vašeho prvního grafu Vložení grafu do **NoteRich** je stejně jednoduché jako napsání bloku markdown kódu. Stačí určit `echarts` jako identifikátor jazyka a poskytnout platný JSON objekt `option` ECharts. ```echarts { "title": { "text": "Rozvoj poznámek na místní úrovni", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Leden", "Úvod," "Březen", "Duben", "Květen", "Červen"], "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%" } } ``` Když přejdete do režimu přehledu nebo čtete poznámku, zobrazovací motor **NoteRich** zachytí blok `echarts`, inicializuje instance ECharts a připojí ji k DOM s možností automatického měnit velikost. --- ## Podrobnosti: Pokročilá konfigurace grafů Jakmile ovládnete základy, můžete využít plnou sílu ECharts k vytvoření složitých, více dimenzionálních vizualizací. ### 1. Více sérií a smíšené grafy Lze snadno kombinovat různé typy grafů, například při použití lineárního grafu nad barovým grafem, pomocí definice více objektů v poli `series` a využití dvou os Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Vytvořené poznámky", "Kumulativní údaje"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Deníkové poznámky", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Celkové poznámky", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Vytvořené poznámky", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Kumulativní údaje", "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. Kuličkové a donutové grafy pro kompozici Vizualizace proporcí je snadná s sekvencí `pie` ECharts. Můžete upravit poloměr, abyste vytvořili skvělé donutové grafy, které odpovídají minimalistické estetice **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Využití prostoru", "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": "Textové poznámky", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Přiložené dokumenty", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databáze", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Vizualizace s pomocí AI: Od textu k grafu Manuální psaní JSON je skvělý, ale **NoteRich** přichází s ještě většími výhodami s **lokálním AI vizualizačním motorem**. Ne vždy musíte sami psát konfiguraci. ### Příkazový jazyk do grafu Můžete jednoduše popsat graf, který chcete, v prostém angličtině, a lokální LLM **NoteRich** vám generuje JSON ECharts. *Příklad příkazu: "Vytvořte radarový graf srovnávající vlastnosti **NoteRich**, **Notion** a **Obsidian** v oblasti soukromosti, rychlosti, offline podpory a rozšířitelnosti."* ### Automatické detekování z tabulek Pokud máte tabulku v markdown formátu ve vaší poznámce, AI **NoteRich** může analyzovat strukturovaná data a automaticky navrhnout nebo generovat odpovídající konfiguraci ECharts. Tento přechod z surových dat k vizuální informaci probíhá přímo na vašem zařízení, což zajišťuje, že vaše analytická data zůstanou zcela soukromá. --- ## Výkon a lazy loading Běžná obava při vložení více interaktivních grafů do jediného dokumentu je výkon. **NoteRich** řeší to s vysoce optimalizovanou **Lazy Loading Architekturou**. 1. **Intersection Observer**: Grafy se nezobrazují, dokud se nepřiblíží do rozsahu okna. To výrazně redukuje počáteční dobu načítání dlouhých dokumentů. 2. **Skeleton UI**: Zatímco se graf načítá nebo inicializuje, zobrazuje se lehká skeleton UI, což zabraňuje změnám rozložení (CLS) a zajišťuje plynulé čtení. 3. **Reaktivní měnit velikost**: **NoteRich** automaticky připojí `ResizeObserver` ke každé instance ECharts, aby grafy bezproblémově přizpůsobovaly se změnám velikosti okna nebo přepínání na boční liště bez nutnosti manuálního zásahu. --- ## Best practices pro ECharts v **NoteRich** Abyste využili ECharts co nejlépe v **NoteRich**, mějte na paměti tyto tipy: - **Udržujte validní JSON**: Ujistěte se, že vaše konfigurace je platný JSON. **NoteRich** bude v editoru zobrazovat chybovou zprávu, pokud syntaxe není správná, čímž se předchází zlomení aplikace. - **Shodujte se na motivu**: UI **NoteRich** je minimalistická a monochromatická. Použijte barvy jako `#000` (primární barva), `#666` (sekundární text) a `#eaeaea` (okraje/obálka) ve vaší konfiguraci grafů, abyste udrželi vizuální harmonii. - **Použijte `grid` pro prostor**: Vždy definujte vlastnost `grid`, aby vaše osa a popisy měřítka měli dostatek prostoru a nebyly překrývány hranami kontejneru. - **Využijte lokální AI**: Pro složité grafy nechte AI vykonat práci. Vždy můžete ručně upravit generovaný JSON pro důkladné ladění. --- ## Závěr Integrovaní interaktivní vizualizace dat přímo do vašeho procesu vytváření poznámek odstraňuje potřebu přecházení mezi externími nástroji, jako je Excel nebo Tableau. S nativní podporou **ECharts** vám **NoteRich** umožňuje přeměnit vaši lokální znalostní zásobu na dynamický, vizuální a hloubkově informativní panel – přičemž zachováváte nekompromisní soukromost a filozofii lokálnosti, kterou očekáváte. Začněte vložovat svá data již dnes a sledujte, jak vaše poznámky ožijí. --- <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]">Vizualizace dat</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokální první</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">S pomocí AI</span> </div>