如何在 NoteRich 中嵌入互動式 ECharts

# 如何在NoteRich中嵌入互動式ECharts 數據的價值取決於你理解它的能力。在個人知識管理領域中，將原始數據和結構化數據轉換成視覺化洞察非常重要。**NoteRich**通過原生支持**Apache ECharts**，能夠在文本和數據之間建立連接，讓你能在筆記中直接嵌入完全互動式的、適於出版的圖表。 與那些將數據傳送到外部服務器進行渲染的雲端工具不同，NoteRich在本地設備上處理和渲染ECharts。這樣可以確保你的數據保持100%的私密性，同時提供無縁的互動式視覺化體驗。 --- ## 為何選擇NoteRich中的ECharts？ Apache ECharts是一個開源的可視化庫，以其流動性、深度和跨平台兼容性而著稱。通過原生集成ECharts，NoteRich提供了以下幾大優勢： - **零代碼渲染**：只需在Markdown代碼區域中寫出標準的JSON配置，NoteRich就能立即將其渲染成互動式圖表。 - **100%本地化與私密性**：渲染引擎在您的瀏覽器中本地運行。您的數據永遠不會離開您的設備。 - **豐富的互動性**：您可以享受內建的放大、平移、工具提示以及圖例切換功能，而無需撰寫一行JavaScript代碼。 - **AI驅動的生成**：讓NoteRich的本地AI分析您的表格或自然語言提示，自動生成ECharts JSON文件。 --- ## 基礎知識：首次嵌入圖表 在NoteRich中嵌入圖表就像寫一個Markdown代碼一樣簡單。您只需指定`echarts`作為語言識別符，並提供有效的ECharts `option` JSON對象即可。 ```echarts { "title": { "text": "本地化優先的筆記成長", "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%" } } ``` 當您切換到預覽模式或閱讀筆記時，NoteRich的渲染引擎會截攝`echarts`代碼，初始化ECharts對象，並將其與DOM相連接，還能自動調整大小。 --- ## 深入探討：高級圖表配置 一旦掌握了基礎知識，你就可以利用ECharts的全部功能來創造複雜的多維視覺化效果。 ### 1. 多系列圖表和混合圖表 您可以輕鬆地結合不同的圖表類型，例如將線性圖表與條形圖表疊加在一起，只需在`series`数组中定義多個對象，並使用雙Y軸。 ```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. 用於組合的扇形圖和甜甜圈圖表 使用ECharts的`pie`系列可以輕鬆地展示比例。您可以自定義半徑來創造美觀的甜甜圈圖表，這與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驅動的視覺化：從文本到圖表 手動撰寫JSON文件固然很有效，但NoteRich通過其**本地AI視覺化引擎**進一步提升了效率。您不必總是親自撰寫配置設定。 ### 用自然語言描述圖表 您可以用簡單的英語描述您想要的圖表，NoteRich的本地LLM將自動生成相應的ECharts JSON文件。 *提示示例："創建一個雷達圖表，比較NoteRich、Notion和Obsidian在隱私性、速度、線下支持和可擴展性方面的特點。"* ### 從表格自動識別 如果您在筆記中使用了Markdown表格，NoteRich的AI可以分析這些結構化數據，並自動推薦或生成相應的ECharts配置。這種從原始數據到視覺化洞察的轉換完全在您的設備上完成，確保您的分析數據保持完全私密性。 --- ## 性能和緩慢載入 在單個文件中嵌入多個互動式圖表時，性能是一個常見的問題。NoteRich通過高度优化的**緩慢載入架構**解決了這個問題。 1. **交會觀察器**：圖表只有在滾動到視窗區域時才會被渲染。這大大減少了長文文件的初始載入時間。 2. **輕型骨架界面**：在圖表正在載入或初始化時，會顯示一個輕型骨架UI，避免布局變化（CLS），並保持流暢的閱讀體驗。 3. **響應式調整大小**：NoteRich會自動為每個ECharts對象添加`ResizeObserver`，確保圖表能夠無誤地適應窗口大小或側邊欄位的切換，而無需人工干預。 --- ## NoteRich ECharts的最佳實踐 為了充分利用NoteRich中的ECharts，請遵循以下建議： - **保持JSON有效性**：確保您的配置是有效的JSON文件。如果語法不正確，NoteRich會在編輯器中顯示錯誤消息，避免應用程序崩潰。 - **與主題匹配**：NoteRich的UI是極簡和單色的。在圖表配置中使用如 `#000`（主要色）、`#666`（次要文本色）和`#eaeaea`（邊框/背景色）等顏色，以保持視覺上的協調性。 - **使用`grid`進行填充**：始終定義`grid`屬性，以確保圖表的軸和標籤有足夠的空間，避免被容器邊界切斷。 - **利用本地AI**：對於複雜的圖表，讓AI負責處理重複的任務。您可以隨時手動調整生成的JSON文件以進行細調整。 --- ## 結語 將互動式數據視覺化直接整合到您的筆記工作流程中，就不需要在Excel或Tableau等外部工具之間切換了。通過原生支持的**ECharts**，NoteRich能夠幫助您將本地知識庫轉換成動態的、視覺化的、具有深刻洞察力的面板——同時保持您所期望的無可諉求的私密性和本地化原則。 從今天開始嵌入您的數據吧，讓您的筆記變得更加生動。 --- <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]">數據視覺化</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">本地化優先</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI驅動</span> </div>