# Paano Mag-embed ng Interaktibong ECharts sa NoteRich Ang datos ay may halaga lamang depende sa iyong kakayahang maunawaan ito. Sa larangan ng Personal Knowledge Management (PKM), napakahalaga na ang mga hilaw na numero at istrukturadong datos ay maaaring maging visual na kaalaman. Ang **NoteRich** ay nagbibigay-daan sa pagitan ng teksto at datos sa pamamagitan ng pag-support sa **Apache ECharts**, na nagpapahintulot sa iyong mag-embed ng mga interaktibong chart na handa nang gamitin sa iyong mga tala. Hindi katulad ng mga tool na nasa cloud na nagpapadala ng iyong datos sa mga external na server para sa pag-render, ang NoteRich ay kinokontrol at nag-render ng ECharts sa iyong lokal na device. Ito ay tinitiyak na ang iyong mga datos ay nanatiling 100% pribado habang nagbibigay ng isang seamless na interactive na visual na karanasan. --- ## Bakit ECharts sa NoteRich? Ang Apache ECharts ay isang open-source na library para sa visual na paglalarawan na kilala para sa kaniyang pagiging malambot, detalyado, at kompatibilidad sa iba't ibang platform. Sa pamamagitan ng pag-integrate ng ECharts sa NoteRich, mayroon tayong ilang kagiliw-giliw na bentahe: - **Zero-Code Rendering**: Isulat ang standard na JSON na konfigurasyon sa isang Markdown code block, at ang NoteRich ay agad na gagawing interactive na chart. - **100% Lokal at Pribado**: Ang engine na nag- render ay tumatakbo sa iyong browser. Ang iyong datos ay hindi kailanman lumalabas sa iyong device. - **Rich Interactivity**: Makakuha ng built-in na pag-zoom, pag-panning, tooltips, at pag-toggling ng legend nang wala kang isang linya ng JavaScript na isulat. - **AI-Powered Generation**: Hayaan ang lokal na AI ng NoteRich na suriin ang iyong mga table o natural na wika upang makabuo ng ECharts JSON nang awtomatiko. --- ## Mga Basikong Prinsipyo: Pag-embed ng Iyong Unang Chart Ang pag-embed ng isang chart sa NoteRich ay simple lamang. Kailangan mo lamang tukuyin ang `echarts` bilang language identifier at ibigay ang isang valid na ECharts `option` JSON object sa loob nito. ```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%" } } ``` Kapag ikaw ay lumilipat sa preview mode o binabasa ang tala, ang engine na nag- render ng NoteRich ay kinokontrol ang `echarts` block, initsiwalize ang ECharts instance, at ikabit ito sa DOM na may awtomatikong pag- adjust ng sukat. --- ## Malalim na Pag-aaral: Advanced Chart Configurations Kapag natutunan mo na ang mga basikong prinsipyo, maaari kang gumamit ng buong kapangyarihan ng ECharts upang lumikha ng komplikadong, multidimensional na visual na paglalarawan. ### 1. Multi-Series at Mixed Charts Maaari kang madaling magkombin ng iba't ibang uri ng chart, tulad ng paggamit ng line chart sa bar chart, sa pamamagitan ng pagtukoy ng maraming object sa `series` array at paggamit ng dual Y-axes. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notes Created", "Cumulative Total"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Daily", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notes Created", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Cumulative Total", "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 at Donut Charts para sa Komposisyon Ang paglalarawan ng mga proporsyon ay madali gamit ang `pie` series ng ECharts. Maaari kang magdisenyo ng magagandang donut chart na naaayon sa minimalist na estetika ng NoteRich. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Storage Usage", "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 Notes", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Databases", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI-Powered Visual na Paglalarawan: Mula sa Teksto hanggang sa Chart Ang pagsulat ng JSON nang manu ay kapaki-pakinang, ngunit ang NoteRich ay nagbibigay ng mas malalim na pag-unlad sa pamamagitan ng **Lokal na AI na Visual na Paglalarawan Engine**. Hindi mo kailangan palaging isulat ang konfigurasyon nang manu. ### Natural na Wika patungo sa Chart Maaari kang simpleng ilarawan ang chart na gusto mo sa plain English, at ang lokal na LLM ng NoteRich ay gagawa ng ECharts JSON para sa iyo. *Halimbawa ng prompt: "Lumikha ng isang radar chart na naglalarawan sa mga katangian ng NoteRich, Notion, at Obsidian sa mga aspekto ng Privacy, Bilis, Offline Support, at Pagiging Abot-kayang Kontrol."* ### Auto-detekyon mula sa mga Table Kung mayroon kang isang Markdown table sa iyong tala, ang AI ng NoteRich ay maaaring suriin ang istrukturadong datos at awtomatikong magmungkah o makabuo ng kaukulang ECharts konfigurasyon. Ang seamless na paglipat mula sa raw datos patungo sa visual na kaalaman ay nangyayari sa iyong device, na tinitiyak na ang iyong analytical na datos ay nanatiling pribado. --- ## Performance at Lazy Loading Isang karaniwang isyu kapag nag-embed ng maraming interaktibong chart sa isang dokumento ay ang performance. Ang NoteRich ay tinutugon ito sa pamamagitan ng isang highly optimized na **Lazy Loading Architecture**. 1. **Intersection Observer**: Ang mga chart ay hindi na-render hanggang sa sila ay lumabas sa viewport. Ito ay lubhang nagpapababa sa paunang oras ng pag- load ng mahabang dokumento. 2. **Skeleton Screens**: Habang ang chart ay naglo-load o inihahanda, isang lightweight na skeleton UI ang ipinapakita, na pinipigilan ang pagbabago ng layout (CLS) at pinapanatiling isang smooth na karanasan sa pagbabasa. 3. **Responsive na Pag-Adjust ng Sukat**: Ang NoteRich ay awtomatikong nagbibigay ng `ResizeObserver` sa bawat instance ng ECharts, na tinitiyak na ang mga chart ay maayos na nakakasabay sa pagpapalaki o pagtanggal ng sidebar nang walang manu-manong interbensyon. --- ## Mga Best Practices para sa NoteRich ECharts Upang makakuha ng pinakamalaking epekto mula sa ECharts sa NoteRich, isaalang-alang ang mga sumusunod na tip: - **Siguruhing Ang JSON ay Valid**: Tiyaking ang iyong konfigurasyon ay valid na JSON. Ang NoteRich ay magpapakita ng isang error message sa editor kung ang syntax ay hindi wasto, na nakapipigil sa pagkakaroon ng app crash. - **Tugma sa Thema**: Ang UI ng NoteRich ay minimalistiko at monochromatic. Gamitin ang mga kulay tulad ng `#000` (primary), `#666` (secondary text), at `#eaeaea` (borders/backgrounds) sa iyong chart konfigurasyon upang mapanatili ang visual na harmoniya. - **Gamitin ang `grid` para sa Padding**: Palaging tukuyin ang `grid` property upang matiyak na ang iyong chart axes at labels ay may sapat na espasyo at hindi nakakasira ng mga hangganan ng container. - **Lumikha ng AI-Powered**: Para sa komplikadong chart, hayaan ang AI na gawin ang mabigat na trabaho. Maaari kang palaging baguhin ang generated JSON nang manu para sa mas detalyadong pag-aayos. --- ## Konklusyon Ang integrasyon ng interaktibong visual na paglalarawan ng datos sa iyong workflow sa pagtitipon ng tala ay nagpapawala sa pangangailangan na magpalipat-lipat sa pagitan ng external na mga tool tulad ng Excel o Tableau. Sa pamamagitan ng native na **ECharts** support, ang **NoteRich** ay nagbibigay sa iyo ng kakayahang gawing dynamic, visual, at malalim na kaalaman sa dashboard gamit ang iyong lokal na kaalaman base – habang pinapanatili ang hindi kompromiso sa privacy at lokal na prinsipyo. Simulan ang pag-embed ng iyong datos ngayon, at tingnan kung ang iyong mga tala ay nagiging buhay. --- <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 Visualization</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-Powered</span> </div>