# Как вставить интерактивные графики в NoteRich Данные становятся такими же ценными, как ваше умение их понимать. В области управления личными знаниями преобразование сырых чисел и структурированных данных в визуальные идеи имеет решающее значение. **NoteRich** создает связь между текстом и данными, поддерживая **Apache ECharts**, что позволяет вставлять полностью интерактивные графики, готовые к публикации, непосредственно в ваши заметки. В отличие от облачных инструментов, которые отправляют вашу данные на внешние серверы для рендеринга, **NoteRich** обрабатывает и рендерит графики ECharts полностью на вашем локальном устройстве. Это гарантирует, что ваши конфиденциальные данные остаются полностью защищенными, а в то же время обеспечивает безупречный, интерактивный визуальный опыт. --- ## Почему ECharts в NoteRich? Apache ECharts – это открытая среда визуализации, известная своей гибкостью, глубиной и совместимостью с различные платформы. Интеграция ECharts позволяет **NoteRich** предложить несколько преимуществ: - **Бескошелое рендеринг**: Напишите стандартную конфигурацию в формате JSON в блоке Markdown, и **NoteRich** мгновенно превратит его в интерактивный график. - **100% локальное и конфиденциальное**: Интерфейс рендеринга работает локально в браузере. Ваши данные никогда не покидают ваше устройство. - **Интерактивность**: Наслаждайтесь встроенными функциями масштабирования, перемещения, информационных подсказок и переключения легенд без необходимости написания ни одного строки JavaScript. - **Генерация данных с помощью AI**: Позвольте локальной AI **NoteRich** анализировать ваши таблицы или использовать просьбы в естественном языке для автоматической генерации JSON-файлов ECharts. --- ## Основы: Вставка первого графика Вставка графика в **NoteRich** очень проста – достаточно написать блок кода в формате Markdown. Необходимо указать `echarts` как идентификатор языка и предоставить корректный JSON-объект настроек ECharts. ```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>