# Як вбудувати інтерактивні діаграми ECharts у NoteRich Дані є такими ж цінними, як і ваша здатність їх розуміти. У сфері управління особистою інформацією перетворення сирових чисел та структурованих даних на візуальні інтерпретації є ключовим. **NoteRich** створює зв’язок між текстом та даними, підтримуючи **Apache ECharts**, що дозволяє вбудовувати повністю інтерактивні діаграми безпосередньо в свої нотатки. На відміну від сервісів, які передають дані на сторонні сервери для рендерингу, **NoteRich** обробляє та рендерює діаграми ECharts безпосередньо на вашому локальному пристрої. Це гарантує, що ваші конфіденційні дані залишаються 100% приватними, при цьому забезпечує безперешкодний візуальний контроль. --- ## Чому ECharts у NoteRich? **Apache ECharts** – це відкритий для користувачів бібліотека візуалізації, відома своєю гладкістю, глибокою функціональністю та підтримкою різних платформ. Інтеграція ECharts дозволяє отримати кілька переваг: - **Рендеринг без коду**: Напишіть стандартну конфігурацію у форматі JSON у блокі Markdown, і **NoteRich** миттєво перетворить її на інтерактивну діаграму. - **100% локальність та приватність**: Механізм рендерингу працює локально на вашому браузері. Ваші дані ніколи не виходять з вашого пристрою. - **Інтерактивність**: Можна користуватися функціями змінення масштабу, переміщення елементів, інформування про деталі та перемикання легенди без необхідності написання жодного рядка JavaScript. - **Generування за допомогою AI**: Дозвольте локальній AI **NoteRich** аналізувати ваші таблиці чи пропонувати варіанти конфігурацій ECharts автоматично. --- ## Основи: Вбудування першої діаграми Вбудувати діаграму у **NoteRich** просто – достатньо написати блок коду у форматі Markdown. Потрібно лише вказати `echarts` як ідентифікатор мови та надати правильну конфігурацію ECharts у форматі JSON. ```echarts { "title": { "text": "Локально-перша нота", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Січень", "Лютий", "Березень", "Квітень", "Травень", "Червень"], "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": ["Субота", "Неділя", "Середа", "Четвер", "П’ятниця", "Субота", "Неділя"], "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. Діаграми типу „Крапка“ та „Донат“ для комбінації Візуалізація пропорцій є простою з використанням серії `pie` ECharts. Ви можете налаштувати радіус для створення чудових донатних діаграм, які відповідають мінімалістичному стилю **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" } } ] } ] } ``` --- ## Візуалізація за допомогою AI: від тексту до діаграм Робота з JSON вручну є ефективною, але **NoteRich** пропонує ще більше можливостей з використанням **Локальної AI-візуалізаційної системи**. Вам не завжди потрібно самостійно писати конфігурацію. ### Пропозиція мовою природної мови для створення діаграм Ви можете просто описати діаграму у звичайній мові, і локальний модуль LLM **NoteRich** генеруватиме JSON-конфігурацію ECharts для вас. *Приклад запиту: „Створіть радарну діаграму, яка порівняє переваги NoteRich, Notion та Obsidian щодо конфіденційності, швидкості, офлайн підтримки та розширюваності.“* ### Автоматичне визначення з таблиць Якщо у вашій нотатці є таблиця у форматі Markdown, AI **NoteRich** може аналізувати структуровані дані та автоматично пропонувати чи генерувати відповідну конфігурацію ECharts. Це безперешкодний перехід від сирових даних до візуальних інтерпретацій відбувається повністю на вашому пристрої, що гарантує, що ваші аналітичні дані залишаються приватними. --- ## Продуктивність та повільне завантаження Проблема, яка часто виникає під час вбудовування кількох інтерактивних діаграм у одну нотатку, полягає у продуктивності. **NoteRich** вирішує цю проблему за допомогою оптимізованої **архітектури повільного завантаження**. 1. **Об’єктивний спостережник за перетином**: Діаграми не рендеруються, поки не потраплять у область вікна. Це значно зменшує час завантаження довгих нотаток. 2. **Створення легких сценаріїв**: Поки діаграма завантажується чи ініціалізується, відображається легкий сценарій, що запобігає змінам розміру елементів та забезпечує безперешкодний процес читання. 3. **Реактивне змінення розміру**: **NoteRich** автоматично прив’язує `ResizeObserver` до кожного об’єкта ECharts, що гарантує бездоганну адаптацію діаграм до змін розміру вікна чи перемикання між полюсами. --- ## Найкращі практики для використання ECharts у NoteRich Щоб максимально використовувати ECharts у **NoteRich**, слід дотримуватися цих порад: - **Провірте валідність JSON**: Упевніться, що ваша конфігурація є валідним JSON. Якщо синтаксис неправильний, **NoteRich** виведе повідомлення про помилку у редакторі, що запобігає збоям системи. - **Відповідність тематиці**: Вікс **NoteRich** є мінімалістичним та монохромним. Використовуйте кольори, такі як `#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>