# Jak wpleść interaktywne wykresy ECharts do NoteRich Dane są wartościowe tylko w takim samym stopniu, w jakim możesz je zrozumieć. W obszarze zarządzania wiedzą osobniką (PKM) kluczowe jest przekształcenie surowych liczb i strukturalnych danych w wizualne wnioski. **NoteRich** łączy tekst z danymi, natywnie obsługując **Apache ECharts**, dzięki czemu możesz wpleść wykresy o pełnym interaktywności w swoje notatki. W odróżnieniu od narzędzi bazujących na chmurze, które przesyłają dane do zewnętrznych serwerów do renderowania, **NoteRich** przetwarza i renderuje wykresy ECharts wyłącznie na swoim lokalnym urządzeniu. To gwarantuje, że twoje dane pozostają w pełni prywatne, a jednocześnie zapewnia bezproblemowe, interaktywne wyświetlanie informacji. --- ## Dlaczego ECharts w **NoteRich?** **Apache ECharts** to biblioteka wizualizacji o otwartym kodzie, znana ze swojej płynności, głębi i kompatybilności crossplatformowej. Integrując ECharts natywnie, **NoteRich** oferuje kilka wyjątkowych zalet: - **Renderowanie bez kodu**: Napisz standardową konfigurację w formacie JSON w bloku kodu w Markdown, a **NoteRich** natychmiast go zrenderuje w interaktywny wykres. - **100% lokalne i prywatne**: Napęd renderowania funkcjonuje lokalnie w twoim przegląarze. Twoje dane nigdy nie opuszczają twojego urządzenia. - **Wyjątkowa interaktywność**: Możesz cieszyć się wbudowanym rozkładaniem, przesuwaniem, informacjami pop-up i przełączaniem legend bez konieczności pisania ani jednej linijki JavaScripta. - **Generowanie za pomocą AI**: Pozwól AI w **NoteRich** analizować twoje tabelaryczne dane lub polecenia w języku naturalnym, aby automatycznie generować JSON ECharts. --- ## Podstawy: Wplewanie pierwszego wykresu Wplewanie wykresu w **NoteRich** jest tak proste, jak napisanie bloku kodu w Markdown. Wystarczy określić `echarts` jako identyfikator języka i podać ważny obiekt JSON `option` ECharts. ```echarts { "title": { "text": "Rozwój notatek oparany na lokalności", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Styczeń", "Luty", "Marzec", "Kwień", "Maj", "Czerwiec"], "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%" } } ``` Gdy przejdziesz do trybu przejrzenia lub czytaj notatkę, napęd **NoteRich** wykrywa blok `echarts`, inicjuje instancję ECharts i wiąże ją z DOM z możliwością automatycznego zmieniania wielkości. --- ## Wgłębienie: Wysokiej klasy konfiguracje wykresów Gdy opanujesz podstawy, możesz wykorzystać pełną moc ECharts do tworzenia złożonych, wielowymiarowych wykresów. ### 1. Wielokierunkowe wykresy i mieszane wykresy Możesz łatwo łączyć różne typy wykresów, np. nakładając wykres liniowy na wykres słupkowy, definiując kilka obiektów w tablicy `series` i wykorzystując dwie osie y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Utworzone notatki", "Całkowita liczba"] }, "xAxis": { "type": "category", "data": ["Niedziel", "Pewnego dnia", "Wtorek", "Czwartek", "Piątek", "Sobota", "Niedziel"] }, "yAxis": [ { "type": "value", "name": "Dzień", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Całkowita liczba", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Utworzone notatki", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Całkowita liczba", "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. Wykresy częściowe i węgłowce do kompozycji Wizualizacja proporcji jest łatwa za pomocą serii `pie` ECharts. Możesz dostosować promienie, aby stworzyć piękne wykresy węgłowcowe, które pasują do minimalistycznego stylu **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Wykorzystanie miejsc na dysku", "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": "Notatki tekstowe", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Załączniki", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Bazy danych", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Wizualizacja za pomocą AI: Od tekstu do wykresu Pisanie JSON ręcznie jest skuteczne, ale **NoteRich** idzie o krok dalej dzięki swojemu **Lokalnemu Napędowi Wizualizacji AI**. Nie zawsze musisz samodzielnie tworzyć konfigurację. ### Język naturalny do wykresu Możesz po prostu opisać wykres, jaki chcesz, w prostym języku, a lokalny model językowy **NoteRich** generuje JSON ECharts dla ciebie. *Przykład polecenia: „Stworz wykres radarowy porównujący cechy **NoteRich**, **Notion** i **Obsidian** pod względem prywatności, szybkości, obsługi offline i rozszerzalności.”* ### Automatyczna detekcja z tabeli Jeśli masz tabelę w formacie Markdown w swojej notatce, AI **NoteRich** może przeanalizować strukturalne dane i automatycznie sugerować lub generować odpowiednią konfigurację ECharts. Ten bezproblemowy przejście od surowych danych do wizualnych wniosków odbywa się wyłącznie na twoim urządzeniu, zapewniając, że twoje dane analityczne pozostają w pełni prywatne. --- ## Wydajność i płynne renderowanie Częsty problem przy wplewaniu wielu interaktywnych wykresów w jeden dokument to wydajność. **NoteRich** rozwiązuje ten problem za pomocą wysoce optymalizowanej **Architektury Płynnego Renderowania**. 1. **Intersekcja obserwatora**: Wykresy nie są renderowane, dopóki nie przesunie się w zakresie oglądania. To znacznie zmniejsza czas wczytywania długich dokumentów. 2. **Skeletowe ekrany**: Podczas gdy wykres jest renderowany lub inicjowany, wyświetowane jest lekkie skeleton UI, zapobiegając przesuwaniu się układów (CLS) i utrzymując płynny proces czytania. 3. **Płynne zmiany wielkości**: **NoteRich** automatycznie przywiązuje **ResizeObservera** do każdej instancji ECharts, zapewniając, że wykresy bezproblemowo adaptują się do zmian wielkości okna lub przełączania na boczne paski bez konieczności interwencji. --- ## Best Practices dla ECharts w **NoteRich** Aby maksymalnie wykorzystać ECharts w **NoteRich**, pamiętaj o następujących wskazówkach: - **Upewnij się, że JSON jest poprawny**: Upewnij się, że twoja konfiguracja jest poprawną JSON. **NoteRich** będzie wyświetlać informację o błędzie w edytorze, jeśli syntax jest nieprawidłowy, zapobiegając awierom aplikacji. - **Zgodność z tematem**: Interfejs **NoteRich** jest minimalistyczny i monochromatyczny. Użyj kolorów takich jak `#000` (pierwszy kolor), `#666` (tekst drugorzędny) i `#eaeaea` (brzegi/obramowania) w swoich konfiguracjach wykresów, aby utrzymać wizualną harmonję. - **Użyj `grid` do uzupełnienia**: Zawsze definuj właściwość `grid`, aby zapewnić, że osie i etykiety wykresu mają wystarczająco dużo miejsca i nie są przyciągane przez ścianki kontenera. - **Wykorzystaj lokalną AI**: Dla złożonych wykresów pozwól AI wykonać ciężkie obowiązki. Możesz zawsze dostosować generowane JSON ręcznie do dokładnego dostosowania. --- ## Wniosek Wpojenie interaktywnej wizualizacji danych bezpośrednio do twojego procesu tworzenia notatek eliminuje konieczność kontekstowania między zewnętrznymi narzędziami, takimi jak Excel czy Tableau. Dzięki natywnemu **ECharts**, **NoteRich** pozwala ci przekształcić twoją lokalną bazę wiedzy w dynamiczną, wizualną i wyjątkowo wnikliwą konsolę – wszystko to przy zachowaniu bezcompromisowej prywatności i filozofii „lokalności”. Zacznij wplewać swoje dane już dziś i obseruj, jak twoje notatki stają się żywe. --- <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]">Wizualizacja danych</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Lokalność</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Zaawansowana technologia AI</span> </div>