ECharts Beautifier v2

¿Qué hace ECharts Beautifier v2?

Cree informes HTML interactivos y listos para presentar con ECharts directamente desde sus datos. Optimizado para analistas de datos: primero comprenda el objetivo del análisis, luego perfile los datos, elija el gráfico, seleccione el estilo visual y entregue un artefacto HTML autónomo con contexto narrativo.

No convierta esto en un tutorial de codificación de ECharts. El usuario no debería necesitar escribir opciones, JavaScript o CSS.

Flujo de trabajo

Paso 0: Resumen del análisis

Deduzca el objetivo del usuario antes de seleccionar un gráfico:

• Tendencia: cambio a lo largo del tiempo, estacionalidad, picos, caídas, crecimiento.
• Comparación: ranking, diferencia entre grupos, cumplimiento de objetivos, antes/después.
• Composición: participación, contribución, estructura, cambio de mezcla.
• Distribución: dispersión, concentración, valores atípicos, cola larga.
• Conversión: embudo, abandono, eficiencia por etapa.
• Flujo: movimiento origen-destino, ruta, migración, atribución.
• Posicionamiento: compensación de dos métricas, cuadrante, comparación de burbujas.
• Excepción: anomalía, superación de umbral, segmento inusual.
• Resumen: narrativa ejecutiva u operativa a través de múltiples vistas.

Si la intención es clara, adáptese automáticamente. Si varias intenciones llevan a conclusiones materialmente diferentes, haga una pregunta de clarificación concisa.

Paso 1: Ingesta y fiabilidad de datos

Prefiera datos estructurados en este orden: Excel/CSV/JSON, texto de tabla copiado, captura de pantalla de tabla clara, captura de pantalla de gráfico clara, imagen borrosa o sin etiquetar.

Para imágenes, primero extraiga filas y columnas estructuradas. Si la extracción es parcial o aproximada, etiquete el resultado como estimado/incompleto y solicite los datos originales cuando la precisión sea importante. Lea references/image-data-input.md cuando la entrada sea una imagen o captura de pantalla.

Paso 2: Perfil de datos

Identifique: granularidad temporal, medidas, dimensiones, numerador/denominador, unidades, tamaño de muestra, valores faltantes, valores atípicos, filas duplicadas, totales, si los porcentajes ya están calculados, y si los cálculos de ranking o participación son válidos.

Paso 3: Ruta del gráfico

Elija los gráficos primero por la intención del análisis y luego por la estructura de los datos. Lea references/chart-selection-matrix.md para la matriz de enrutamiento cuando la elección del gráfico no sea obvia.

Siempre documente la elección del gráfico en la salida con una breve razón, por ejemplo: "Se seleccionó un gráfico de barras de ranking horizontal porque la tarea compara muchas categorías con etiquetas largas."

Paso 4: Ruta de estilo

Elija un estilo de informe según la audiencia y el uso:

• Informe ejecutivo: presentación ejecutiva pulida.
• Revisión operativa: monitoreo operativo denso.
• Exploración: espacio de trabajo de analista con filtros y comparación.
• Pantalla oscura: tablero o pantalla de centro de comando.
• Incrustado: HTML compacto para documentos, wikis o uso compartido ligero.

Lea references/style-recipes.md antes de producir un artefacto HTML con tema.

Paso 5: Entrega HTML

Genere una página HTML autónoma usando ECharts. Incluya:

• Título, subtítulo y resumen del análisis.
• Hallazgos clave o la mejor interpretación actual.
• Nota de fuente de datos y fiabilidad.
• Razón de selección del gráfico.
• Tooltip interactivo, leyenda/filtro donde sea útil, diseño responsivo y comportamiento móvil.
• Anotaciones necesarias para picos, caídas, umbrales, líneas base, abandonos o etiquetas de cuadrantes.

Evite la complejidad decorativa que reduzca la velocidad de lectura. Haga que el gráfico sea útil antes de hacerlo elegante.

Lista de verificación de validación

Antes de entregar:

• El gráfico seleccionado coincide con el objetivo analítico declarado.
• Las medidas, denominadores, unidades y granularidad temporal son visibles o están documentados.
• El HTML se renderiza sin errores de consola y se redimensiona en móvil.
• Los tooltips exponen suficiente detalle para la revisión del analista.
• La narrativa no excede lo que la fiabilidad de los datos permite.
• Todos los archivos generados se nombran claramente y se colocan en una nueva carpeta de salida al crear entregables para el usuario.

Ejemplos

Use los archivos en examples/ como ejemplos compactos de enrutamiento:

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json