# Cómo incrustar gráficos interactivos en NoteRich Los datos son tan valiosos como tu capacidad para comprenderlos. En el campo de la Gestión del Conocimiento Personal (PKM), transformar números brutos y datos estructurados en información visual es crucial. **NoteRich** conecta texto y datos, soportando nativamente **Apache ECharts**, lo que te permite incrustar gráficos completamente interactivos y listos para su publicación directamente en tus notas. A diferencia de las herramientas basadas en la nube que envían tus datos a servidores externos para su renderización, **NoteRich** procesa y renderiza ECharts completamente en tu dispositivo local. Esto asegura que tus datos privados permanezcan completamente seguros, al tiempo que ofrece una experiencia de visualización interactiva y fluida. --- ## ¿Por qué ECharts en NoteRich? Apache ECharts es una biblioteca de visualización de código abierto conocida por su fluidez, profundidad y compatibilidad con múltiples plataformas. Al integrar ECharts de forma nativa, **NoteRich** ofrece varias ventajas: - **Renderización sin código**: Escribe la configuración JSON estándar en un bloque de código Markdown, y **NoteRich** lo renderiza instantáneamente en un gráfico interactivo. - **100% local y privado**: El motor de renderización se ejecuta localmente en tu navegador. Tus datos nunca salen de tu dispositivo. - **Interactividad avanzada**: Disfruta de zoom, desplazamiento, información de herramientas y cambio de leyenda sin necesidad de escribir una línea de JavaScript. - **Generación automática con IA**: Deja que la IA local de **NoteRich** analice tus tablas o solicites instrucciones en lenguaje natural para generar automáticamente el JSON de ECharts. --- ## Lo básico: Incrustando tu primer gráfico Incrustar un gráfico en **NoteRich** es tan sencillo como escribir un bloque de código Markdown. Solo necesitas especificar `echarts` como identificador del lenguaje y proporcionar un objeto JSON válido de `option` de ECharts. ```echarts { "title": { "text": "Crecimiento de notas local", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Ene", "Febrero", "Marzo", "Abril", "Mayo", "Junio"], "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%" } } ``` Cuando cambias al modo de vista previa o lees la nota, el motor de renderización de **NoteRich** intercepta el bloque de `echarts`, inicializa la instancia de ECharts y la vincula al DOM con capacidad de ajuste automático. --- ## Profundización: Configuraciones avanzadas de gráficos Una vez que domines los conceptos básicos, puedes aprovechar todo el poder de ECharts para crear visualizaciones complejas y multidimensionales. ### 1. Múltiples series y gráficos mixtos Puedes combinar fácilmente diferentes tipos de gráficos, como superponer un gráfico de líneas sobre un gráfico de barras, definiendo múltiples objetos en el array `series` y utilizando dos ejes Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notas creadas", "Total acumulado"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Diario", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notas creadas", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Total acumulado", "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. Gráficos de pastas y donut Es sencillo visualizar proporciones con la serie `pie` de ECharts. Puedes personalizar el radio para crear gráficos de donut que se alíen con el estilo minimalista de **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Uso de almacenamiento", "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": "Notas de texto", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Archivos adjuntos", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Bases de datos", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualización con IA: De texto a gráficos Escribir JSON manualmente es poderoso, pero **NoteRich** va un paso más allá con su **Motor de Visualización con IA Local**. No siempre necesitas escribir la configuración tú mismo. ### Descripción del gráfico en lenguaje natural Puedes describir simplemente el gráfico que deseas en inglés, y el modelo de lenguaje natural local de **NoteRich** generará el JSON de ECharts para ti. *Ejemplo de prompt: "Crea un gráfico radar que compare las características de NoteRich, Notion y Obsidian en términos de privacidad, velocidad, soporte fuera de línea y capacidad de ampliación."* ### Detección automática de tablas Si tienes una tabla en Markdown en tu nota, la IA de **NoteRich** puede analizar los datos estructurados y sugerir o generar automáticamente la configuración correspondiente de ECharts. Este transición sin interrupciones del datos brutos a información visual ocurre completamente en tu dispositivo, asegurando que tus datos analíticos permanezcan estrictamente privados. --- ## Rendimiento y carga asincrónica Una preocupación común al incrustar múltiples gráficos interactivos en un documento es el rendimiento. **NoteRich** aborda este problema con una arquitectura de carga asincrónica altamente optimizada. 1. **Observador de intersección**: Los gráficos no se renderizan hasta que se desplivan en la ventana de visualización. Esto reduce drásticamente el tiempo de carga inicial de documentos largos. 2. **Screens esqueletales**: Mientras se carga o se inicializa un gráfico, se muestra una interfaz ligera que evita cambios en el diseño (CLS) y mantiene una experiencia de lectura fluida. 3. **Ajuste de tamaño responsivo**: **NoteRich** asocia automáticamente un `ResizeObserver` a cada instancia de ECharts, asegurando que los gráficos se adapten perfectamente al tamaño de la ventana o al cambio de barra lateral sin intervención manual. --- ## Prácticas recomendadas para ECharts en NoteRich Para aprovechar al máximo ECharts en **NoteRich**, tenga en cuenta estos consejos: - **Garantice que el JSON sea válido**: Asegúrese de que su configuración sea JSON válido. **NoteRich** mostrará un mensaje de error en el editor si la sintaxis es incorrecta, evitando que la aplicación colapse. - **Haga que coincida con el tema**: La interfaz de **NoteRich** es minimalista y monocromática. Utilice colores como `#000` (color principal), `#666` (texto secundario) y `#eaeaea` (borde/background) en sus configuraciones de gráficos para mantener la armonía visual. - **Utilice `grid` para el relleno**: Defina siempre la propiedad `grid` para asegurar que los ejes y etiquetas de tu gráfico tengan suficiente espacio y no queden cortados por los bordes del contenedor. - **Aproveche la IA local**: Para gráficos complejos, deje que la IA haga el trabajo pesado. Puedes siempre ajustar el JSON generado manualmente para una mejora adicional. --- ## Conclusión Integrar visualización de datos interactiva directamente en tu flujo de trabajo de toma de notas elimina la necesidad de cambiar de herramientas externas como Excel o Tableau. Con soporte nativo para **ECharts**, **NoteRich** te permite convertir tu base de conocimientos local en un panel visual dinámico y profundamente perspicaz, manteniendo al mismo tiempo la privacidad y la filosofía de prioridad local que esperas. Comienza a incrustar tus datos hoy, y ve cómo tus notas cobran vida. --- <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]">Visualización de datos</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Prioridad local</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Impreso por IA</span> </div>