ECharts Beautifier v2

O que ECharts Beautifier v2 faz?

Crie HTML interativo com ECharts, pronto para relatórios, diretamente a partir dos dados. Otimizado para analistas de dados: primeiro entenda o objetivo da análise, depois perfile os dados, escolha o gráfico, selecione o estilo visual e entregue um artefato HTML autocontido com contexto narrativo.

Não transforme isso em um tutorial de codificação ECharts. O usuário não precisa escrever opções, JavaScript ou CSS.

Fluxo de Trabalho

Etapa 0: Briefing da Análise

Inferir o objetivo do usuário antes de selecionar um gráfico:

• Tendência: mudança ao longo do tempo, sazonalidade, picos, quedas, crescimento.
• Comparação: ranking, diferença entre grupos, cumprimento de metas, antes/depois.
• Composição: participação, contribuição, estrutura, mudança de mix.
• Distribuição: dispersão, concentração, outliers, cauda longa.
• Conversão: funil, queda, eficiência por etapa.
• Fluxo: movimento origem-destino, caminho, migração, atribuição.
• Posicionamento: trade-off de duas métricas, quadrantes, comparação em bolhas.
• Exceção: anomalia, violação de limite, segmento incomum.
• Resumo: narrativa executiva ou operacional com múltiplas visões.

Se a intenção estiver clara, adapte automaticamente. Se múltiplas intenções levarem a conclusões materialmente diferentes, faça uma pergunta concisa de esclarecimento.

Etapa 1: Ingestão e Confiabilidade dos Dados

Prefira dados estruturados nesta ordem: Excel/CSV/JSON, texto de tabela copiado, screenshot claro de tabela, screenshot claro de gráfico, imagem borrada ou sem rótulos.

Para imagens, primeiro extraia linhas e colunas estruturadas. Se a extração for parcial ou aproximada, rotule o resultado como estimado/incompleto e solicite os dados originais quando a precisão for importante. Leia references/image-data-input.md quando a entrada for uma imagem ou screenshot.

Etapa 2: Perfil dos Dados

Identifique: granularidade temporal, medidas, dimensões, numerador/denominador, unidades, tamanho da amostra, valores ausentes, outliers, linhas duplicadas, totais, se as porcentagens já foram calculadas e se os cálculos de ranking ou participação são válidos.

Etapa 3: Rota do Gráfico

Escolha os gráficos primeiro pela intenção da análise e depois pela estrutura dos dados. Leia references/chart-selection-matrix.md para a matriz de roteamento quando a escolha do gráfico não for óbvia.

Sempre documente a escolha do gráfico na saída com uma breve justificativa, por exemplo: "Selecionado um gráfico de barras de ranking horizontal porque a tarefa compara muitas categorias com rótulos longos."

Etapa 4: Rota de Estilo

Escolha um estilo de relatório com base no público e no uso:

• Relatório de negócios: leitura executiva polida.
• Revisão operacional: monitoramento operacional denso.
• Exploração: espaço de trabalho do analista com filtros e comparação.
• Tela escura: painel ou display de central de comando.
• Embutido: HTML compacto para docs, wikis ou compartilhamento leve.

Leia references/style-recipes.md antes de produzir um artefato HTML temático.

Etapa 5: Entregável HTML

Gere uma página HTML autocontida usando ECharts. Inclua:

• Título, subtítulo e briefing da análise.
• Principais descobertas ou melhor interpretação atual.
• Fonte dos dados e nota de confiabilidade.
• Razão da escolha do gráfico.
• Tooltip interativo, legenda/filtro onde for útil, layout responsivo e comportamento mobile.
• Anotações necessárias para picos, quedas, limites, linhas de base, drop-offs ou rótulos de quadrantes.

Evite complexidade decorativa que reduza a velocidade de leitura. Torne o gráfico útil antes de torná-lo elegante.

Checklist de Validação

Antes de entregar:

• O gráfico selecionado corresponde ao objetivo analítico declarado.
• Medidas, denominadores, unidades e granularidade temporal estão visíveis ou documentados.
• O HTML renderiza sem erros no console e redimensiona em dispositivos móveis.
• Os tooltips expõem detalhes suficientes para revisão do analista.
• A narrativa não faz afirmações além da confiabilidade dos dados.
• Todos os arquivos gerados são nomeados claramente e colocados em uma nova pasta de saída ao criar entregáveis para o usuário.

Exemplos

Use os arquivos em examples/ como exemplos compactos de roteamento:

• 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