# How to Embed Interactive ECharts in NoteRich
Data is only as valuable as your ability to understand it. In the realm of Personal Knowledge Management (PKM), transforming raw numbers and structured data into visual insights is crucial. **NoteRich** bridges the gap between text and data by natively supporting **Apache ECharts**, allowing you to embed fully interactive, publication-ready charts directly within your notes.
Unlike cloud-based tools that send your data to external servers for rendering, NoteRich processes and renders ECharts entirely on your local device. This ensures your proprietary data remains 100% private while delivering a seamless, interactive visualization experience.
---
## Why ECharts in NoteRich?
Apache ECharts is an open-source visualization library renowned for its fluidity, depth, and cross-platform compatibility. By integrating ECharts natively, NoteRich offers several distinct advantages:
- **Zero-Code Rendering**: Write standard JSON configuration in a Markdown code block, and NoteRich instantly renders it into an interactive chart.
- **100% Local & Private**: The rendering engine runs locally in your browser. Your data never leaves your device.
- **Rich Interactivity**: Enjoy built-in zooming, panning, tooltips, and legend toggling without writing a single line of JavaScript.
- **AI-Powered Generation**: Let NoteRich's local AI analyze your tables or natural language prompts to auto-generate the ECharts JSON.
---
## The Basics: Embedding Your First Chart
Embedding a chart in NoteRich is as simple as writing a Markdown code block. You just need to specify `echarts` as the language identifier and provide a valid ECharts `option` JSON object inside.
```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%" }
}
```
When you switch to the preview mode or read the note, NoteRich's rendering engine intercepts the `echarts` block, initializes the ECharts instance, and binds it to the DOM with automatic resizing capabilities.
---
## Deep Dive: Advanced Chart Configurations
Once you master the basics, you can leverage the full power of ECharts to create complex, multi-dimensional visualizations.
### 1. Multi-Series and Mixed Charts
You can easily combine different chart types, such as overlaying a line chart on a bar chart, by defining multiple objects in the `series` array and utilizing 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 and Donut Charts for Composition
Visualizing proportions is effortless with ECharts' `pie` series. You can customize the radius to create stunning donut charts that match NoteRich's minimalist aesthetic.
```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 Visualization: From Text to Chart
Writing JSON manually is powerful, but NoteRich takes it a step further with its **Local AI Visualization Engine**. You don't always need to write the configuration yourself.
### Natural Language to Chart
You can simply describe the chart you want in plain English, and NoteRich's local LLM will generate the ECharts JSON for you.
*Prompt example: "Create a radar chart comparing the features of NoteRich, Notion, and Obsidian across Privacy, Speed, Offline Support, and Extensibility."*
### Auto-Detection from Tables
If you have a Markdown table in your note, NoteRich's AI can analyze the structured data and automatically suggest or generate the corresponding ECharts configuration. This seamless transition from raw data to visual insight happens entirely on your device, ensuring your analytical data remains strictly private.
---
## Performance and Lazy Loading
A common concern when embedding multiple interactive charts in a single document is performance. NoteRich addresses this with a highly optimized **Lazy Loading Architecture**.
1. **Intersection Observer**: Charts are not rendered until they scroll into the viewport. This drastically reduces the initial load time of long documents.
2. **Skeleton Screens**: While a chart is loading or initializing, a lightweight skeleton UI is displayed, preventing layout shifts (CLS) and maintaining a smooth reading experience.
3. **Responsive Resizing**: NoteRich automatically attaches a `ResizeObserver` to every ECharts instance, ensuring charts flawlessly adapt to window resizing or sidebar toggling without manual intervention.
---
## Best Practices for NoteRich ECharts
To get the most out of ECharts in NoteRich, keep these tips in mind:
- **Keep JSON Valid**: Ensure your configuration is valid JSON. NoteRich will gracefully display an error message in the editor if the syntax is incorrect, preventing app crashes.
- **Match the Theme**: NoteRich's UI is minimalist and monochromatic. Use colors like `#000` (primary), `#666` (secondary text), and `#eaeaea` (borders/backgrounds) in your chart configurations to maintain visual harmony.
- **Use `grid` for Padding**: Always define the `grid` property to ensure your chart axes and labels have enough breathing room and don't get clipped by the container edges.
- **Leverage Local AI**: For complex charts, let the AI do the heavy lifting. You can always tweak the generated JSON manually for fine-tuning.
---
## Conclusion
Integrating interactive data visualization directly into your note-taking workflow eliminates the need to context-switch between external tools like Excel or Tableau. With native **ECharts** support, **NoteRich** empowers you to turn your local knowledge base into a dynamic, visual, and deeply insightful dashboard—all while maintaining the uncompromising privacy and local-first philosophy you expect.
Start embedding your data today, and watch your notes come to life.
---
<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>
Jinsi ya Kupachika ECharts Shirikishi kwenye NoteRich
How to Embed Interactive ECharts in NoteRich Data is only as valuable as your ability to understand it. In the realm of ...
Timu ya NoteRich
Watetezi wa Bidhaa na Faragha
Jun 02, 2026
21 dak za kusoma
Uko tayari kubadilisha mtiririko wako wa kazi?
Kituo chako cha Kibinafsi, Kinachoendeshwa na AI
cha Uandishi wa Maelezo Kinasubiri
Jiunge na maelfu ya watumiaji wanaoamini NoteRich kwa uandishi wa maelezo wa faragha na wenye nguvu. Jaribu kwenye kivinjari chako — hakuna usakinishaji, hakuna kadi ya mkopo, maelezo yako hayatokei kwenye kifaa chako kamwe.
Hakuna kadi ya mkopo
Hufanya kazi kwenye kivinjari
Maelezo 100% ya ndani
Rasilimali na Miongozo
Chunguza makala zetu za kina kuhusu uandishi wa maelezo ya kwanza-ndani, usanifu wa faragha, na mifumo ya kazi ya hali ya juu.
- Usimbaji Fiche wa AES-GCM wa Kwanza-Ndani wa NoteRich Umelezwa
- Jinsi ya Kusafirisha PDF na HTML Bila Alama ya Maji kwenye NoteRich
- Jinsi ya Kupachika ECharts Shirikishi kwenye NoteRich
- Jinsi ya Kutumia Mermaid.js kwa Michoro ya Mtiririko kwenye NoteRich – Mafunzo Kamili
- Badilisha maelezo yako kuwa kumbukumbu ya AI ndani ya NoteRich
- Mafunzo ya RAG ya Hifadhi ya Maarifa ya Ndani ya NoteRich
- Jinsi ya Kutumia AI ya Faragha ya NoteRich Kufanya Muhtasari wa Nyaraka kwa Faragha
- Vipengele na Faida za NoteRich kwa Uandishi wa Maelezo Mtandaoni
- Njia za Mkato za Kibodi za NoteRich na Vidokezo vya Tija
- Mwongozo wa Hesabu za LaTeX za NoteRich Jinsi ya Kuandika Fomula
- Mafunzo ya OCR ya NoteRich Changanua Maelezo ya Karatasi hadi Maandishi ya Kidijitali
- Mafunzo ya Usawazishaji wa P2P wa NoteRich Vifaa Mbali Mbali Bila Wingu
- Maandishi Tajiri ya NoteRich dhidi ya Markdown Jinsi ya Kubadilisha na Kutumia Vyote Viwili
- Mafunzo ya Nafasi za Kazi na Utafutaji wa Hali ya Juu wa NoteRich
- Badilisha Maandishi kuwa Infographic za Kuonekana na AI ya NoteRich
- Jinsi ya Kuingiza Video na Viambatisho kwenye NoteRich