O tile de Gráfico

O tile de Gráfico é o que você mais vai usar, e ele faz bem mais que “barra, linha, pizza”. Esta página é a referência dele: os tipos de gráfico, e depois o editor de Opções do gráfico, onde mora a maior parte do poder.

Dica

Antes de recorrer ao tile de option do ECharts para conseguir uma forma que você acha que falta — veja esta página primeiro. Radar, dispersão, treemap, sunburst e cascata são todos nativos, e as versões nativas herdam o tema da App, suportam formatação condicional e continuam editáveis por quem herdar a sua App.

Tipos de gráfico

Escolha o tipo no editor ⚙ do tile. O menu os agrupa:

Grupo	Tipos
Barras	Barra, Barra empilhada, Cascata
Linhas	Linha, Linha empilhada, Área, Área empilhada
Proporcionais	Pizza, Rosca, Treemap, Sunburst
Matriz	Heatmap, Radar
Pontos	Dispersão, Bolha
Geo	Mapa (coroplético — por país)

Alguns merecem destaque:

• Cascata — contribuições acumuladas, para fazer a ponte de um total a outro.
• Treemap / Sunburst — proporção com muito mais categorias do que uma pizza aguenta; o sunburst acrescenta a profundidade da hierarquia.
• Heatmap — dois eixos categóricos com a medida como cor. Linhas num eixo, colunas no outro.
• Dispersão / Bolha — veja A dispersão plota duas medidas.
• Mapa (coroplético) — veja Mapas são por país.

A dispersão plota duas medidas

Dê duas medidas a uma dispersão e ela plota uma contra a outra — a primeira em x, a segunda em y, um ponto por membro de linha. É a leitura volume-versus-valor que acha um segmento de alto volume e baixo valor.

Bolha pega uma terceira medida para o raio.

Com uma única medida não há par para plotar, então o gráfico recai em plotar aquela medida ao longo das categorias de linha.

Os pontos são rotulados com o nome do membro enquanto os rótulos ainda couberem. Dois limites se aplicam, e o segundo é o que costuma morder: no máximo 25 pontos, e no máximo 220 caracteres de texto de rótulo no total.

O orçamento de caracteres existe porque só a contagem de pontos não prevê sobreposição — os rótulos são desenhados à direita de cada ponto, então o que de fato colide é a largura somada deles. Treze armazéns chamados Quality Warehousing and Trucking se sobrepõem muito antes que vinte e cinco lojas chamadas Store 6.

Então uma dispersão de dezoito cargos como Store Assistant Manager não desenha rótulo nenhum — dezoito está abaixo do teto de pontos, mas os títulos passam bem dos 220 caracteres. Isso não é bug; é o tile decidindo que o tooltip vai se ler melhor. Encurte as captions dos membros se quiser os rótulos de volta.

Mapas são por país

O coroplético resolve a caption de cada linha contra um mapa base de países do mundo. Aliases comuns (USA, UK) são casados automaticamente.

Nomes subnacionais — estados dos EUA, condados, CEPs — não vão se posicionar, porque não existe mapa base para eles. Se algumas linhas não casarem, o tile avisa acima do gráfico:

1 of 16 categories matched the country map (no match: Illinois, Michigan, Minnesota, +12 more). This map plots countries — sub-national names won’t place.

Cuidado

Fique atento a um nome que case com a forma errada. Um cubo com um estado americano chamado Georgia vai pintar a Geórgia, o país. O aviso de cobertura é o sinal para conferir: se a proporção parecer estranha, o mapa é o tile errado para aquele nível.

Em Opções do gráfico, um mapa ganha uma rampa de cor (Blues, Greens, Reds, Viridis, Diverging) e uma escolha de dados faltantes — deixar um país em branco, ou tratar a medida ausente dele como zero.

Opções do gráfico

O botão Opções do gráfico do editor ⚙ (“Título, eixos, legenda, eixo duplo e tendência…”) abre o editor do gráfico. Tudo aqui é por tile e persiste com a App.

Títulos, eixos e legenda

Título do gráfico, rótulo do eixo x, rótulo do eixo y, se a legenda aparece e onde fica (topo / base / esquerda / direita).

Cores

Uma paleta nomeada — Padrão do tema, Vibrante, Fria, Quente, Terra — mais sobrescritas de cor por série chaveadas pelo nome da série. Deixe uma série intocada para a paleta conduzi-la.

Nota

O modo seguro para daltônicos, quando um espectador o tem ligado, sobrescreve os dois por acessibilidade. Isso é deliberado: uma preferência de acessibilidade vence a paleta de um autor.

Eixos Y — o conserto do eixo duplo

Duas medidas de magnitude muito diferente num eixo só deixam a menor invisível: contagens de receitas na casa dos milhares contra receita na casa das dezenas de milhões achatam as contagens contra a linha do zero.

• Eixo duplo automático separa as duas quando o máximo de uma série está uma ordem de grandeza ou mais abaixo da dominante.
• Por série sobrescreve essa decisão — force qualquer medida para o eixo da esquerda ou da direita.

É o controle mais útil do editor, e o que os autores mais deixam passar.

Tipo de série (gráficos combo)

Dê a uma série o próprio tipo de gráfico — receita como barras com uma linha de taxa de crescimento por cima — entre Barra / Linha / Área / Dispersão. Só tipos cartesianos; misturar uma pizza num gráfico de barras não faz sentido.

Linha de tendência

Regressão linear, média móvel ou média móvel ponderada, com período configurável. Linhas de tendência renderizam em gráficos de linha / linha empilhada / área, usando a primeira coluna de medida.

Ordenar e Top N

Ordenar categorias pela primeira medida (crescente / decrescente, ou manter a ordem da consulta) e cortar para o top 5 / 10 / 20 / 50. Ambos são do lado do cliente — sem nova consulta — e persistem com o tile, então a visão arrumada é a que o seu público vê.

Formato numérico

Vale para o texto de valores — rótulos de eixo, valores de tooltip, rótulos de dados — não para o eixo de categorias:

Campo	Efeito
Prefixo / Sufixo	Colado antes / depois literalmente (£, %, ms)
Decimais	Casas decimais fixas; em branco = precisão natural
Separador de milhar	Agrupamento por locale
Abreviar números grandes	Reduz para k / M / B / T

Deixe tudo em branco para valores crus.

Linhas e faixas de referência

Desenhe linhas de limiar / meta atravessando gráficos de barra, linha, área e dispersão — uma linha Y é horizontal num valor, uma linha X é vertical num índice de categoria — e sombreie uma faixa de meta com uma faixa.

Formatação condicional

Cores por medida guiadas por limiares, para que barras acima de uma meta peguem outra cor sem mexer na consulta.

Detecção de anomalias

Ligue Detectar anomalias e o tile marca os pontos fora da curva na série. Útil numa tendência longa em que o olho escorrega por cima de uma única semana ruim.

Previsão

Ligue Mostrar previsão e o tile anexa um horizonte projetado — uma continuação tracejada com faixa de confiança — além do último ponto real.

Nota

Os dois são chaves por tile no editor ⚙, ao lado da consulta. Eles descrevem o que o tile desenha, então viajam junto com a App.

Filtro cruzado ao arrastar

Marque Emitir filtro cruzado ao arrastar e arrastar uma faixa neste gráfico filtra os outros tiles da página para aqueles membros. O tile de origem mantém o contexto completo para você ver onde a seleção cai; Esc limpa.

Esse é o jeito mais rápido de fazer uma página parecer uma aplicação em vez de um relatório: um gráfico de tendência no topo, arraste uma quinzena, e o resto da página acompanha.

Auto-refresh

Todo tile ligado a uma consulta — não só gráficos — consegue se re-executar num intervalo: 1, 5, 15, 30 ou 60 minutos. Filtros ativos são respeitados a cada execução, e o timer pausa enquanto a aba do navegador está escondida, então um painel de parede não martela o servidor em segundo plano.

Relacionado

• Construindo páginas e tiles — os tipos de tile e como a ligação funciona.
• Tiles customizados — os renderizadores declarativos para formas que estes dezesseis não cobrem.
• Design e tema — gráficos pintam a partir dos tokens da App.