如何在 NoteRich 中嵌入交互式 ECharts

# 如何在NoteRich中嵌入交互式ECharts图表 数据的价值取决于你理解它的能力。在个人知识管理领域，将原始数字和结构化数据转化为可视化洞察至关重要。**NoteRich**通过原生支持**Apache ECharts**，让你能够在笔记中直接嵌入完全交互式的、可供发布的图表。 与将数据发送到外部服务器进行渲染的云基础工具不同，**NoteRich**完全在本地设备上处理并渲染ECharts图表。这确保了你的专有数据保持100%的私密性，同时提供无缝的交互式可视化体验。 --- ## 为什么选择NoteRich中的ECharts？ Apache ECharts是一个开源的可视化库，以其流畅性、深度和跨平台兼容性而闻名。通过原生集成ECharts，NoteRich提供了多项独特的优势： - **零代码渲染**：只需在Markdown代码块中编写标准的JSON配置，NoteRich就会立即将其渲染为交互式图表。 - **100%本地化与私密性**：渲染引擎在浏览器中本地运行。你的数据永远不会离开设备。 - **丰富的交互性**：无需编写一行JavaScript代码，即可享受内置的缩放、平移、工具提示和图例切换功能。 - **人工智能驱动的生成**：让NoteRich的本地人工智能分析你的表格或自然语言提示，自动生成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": ["创建的笔记", "累计总数"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "每日", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "总计", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "创建的笔记", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "累计总数", "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": "存储使用情况", "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": "文本笔记", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "附件", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "数据库", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## 人工智能驱动的可视化：从文本到图表 手动编写JSON文件功能强大，但NoteRich通过其**本地人工智能可视化引擎**更进一步。你不必总是自己编写配置。 ### 自然语言到图表 你可以用简单的英语描述你想要的图表，NoteRich的本地LLM会为你生成相应的ECharts JSON文件。 *提示示例：“创建一个雷达图，比较NoteRich、Notion和Obsidian在隐私、速度、离线支持和可扩展性方面的特点。”* ### 从表格自动检测 如果你在笔记中有一张Markdown表格，NoteRich的人工智能可以分析结构化数据，并自动建议或生成相应的ECharts配置。这种从原始数据到可视化洞察的无缝过渡完全在你的设备上完成，确保你的分析数据保持严格的私密性。 --- ## 性能和懒加载 在单个文档中嵌入多个交互式图表时，性能是一个常见的担忧。NoteRich通过高度优化的**懒加载架构**解决了这个问题。 1. ** Intersection Observer**：图表在滚动到视口之前不会渲染。这大大减少了长文档的初始加载时间。 2. **骨架屏幕**：在图表加载或初始化时，会显示一个轻量级的骨架UI，防止布局偏移（CLS），并保持流畅的阅读体验。 3. **响应式调整大小**：NoteRich会自动为每个ECharts实例附加一个`ResizeObserver`，确保图表能够完美适应窗口大小调整或侧边栏切换，而无需手动干预。 --- ## NoteRich ECharts的最佳实践 为了充分利用NoteRich中的ECharts，请记住以下建议： - **保持JSON有效性**：确保你的配置是有效的JSON格式。如果语法不正确，NoteRich会在编辑器中显示错误信息，从而避免应用程序崩溃。 - **匹配主题**：NoteRich的UI是简约且单色的。在图表配置中使用如 `#000`（主要颜色）、`#666`（次要文本颜色）和 `#eaeaea`（边框/背景色）等颜色，以保持视觉上的和谐。 - **使用`grid`进行填充**：始终定义`grid`属性，以确保图表轴和标签有足够的空间，不会被容器边缘裁剪。 - **利用本地人工智能**：对于复杂的图表，让人工智能来处理繁重的工作。你可以随时手动调整生成的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]">人工智能驱动</span> </div>