Painéis de e-commerce que qualquer pessoa consegue ler

Este guia mostra como montar um painel de e-commerce que responde a uma decisão em segundos. Ele serve a quem olha os números da loja toda semana e sai da tela sem saber o que fazer.

Pense numa loja de calçados que vende no site, em marketplaces e na loja da rua. O dono abre o painel, vê seis gráficos coloridos e continua sem saber se a semana foi boa. Esse cenário acompanha o guia até o fim.

O teste de um bom painel é simples. Você olha por cinco segundos e responde: estamos bem ou mal, comparados com o quê, e o que mudou? A base visual dele está no guia de design system e CSS moderno.

Por que o painel começa pela pergunta que você precisa responder?

Porque o gráfico é o meio e a decisão é o fim. Pizza, velocímetro e 3D ocupam espaço e dizem pouco. A pizza obriga o olho a comparar ângulos, tarefa em que ele é ruim.

O velocímetro gasta um quadrante inteiro para mostrar um número que uma frase resolveria. A troca é direta: pizza vira barras, para comparar categorias, e velocímetro vira barra de meta, para comparar o feito com o alvo.

Os três indicadores abaixo seguem essa regra. Cada um responde às três perguntas de uma vez. O valor diz como estamos, a seta com sinal diz o que mudou, e a barrinha diz em relação a qual meta.

Como montar uma tabela de resultado que todo mundo lê?

Com uma tabela de verdade, números alinhados à direita e a variação marcada por cor, seta e sinal juntos. Essa tabela é a espinha de qualquer painel de resultado.

A tag <table> entrega acessibilidade de graça. O leitor de tela navega linhas e colunas, anuncia os cabeçalhos e liga cada número à sua métrica.

A regra que não se negocia é manter a tabela de verdade no lugar de uma grade de caixas estilizadas. A grade parece igual na tela e fica muda para quem ouve a página. Veja o que torna a tabela acima legível:

<table>
  <caption>Resultado vs meta no trimestre</caption>
  <thead>
    <tr>
      <th scope="col">Métrica</th>
      <th scope="col">Realizado</th>
      <th scope="col">Meta</th>
      <th scope="col">Variância (%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Receita</th>
      <td class="num">R$ 1.240.000</td>
      <td class="num">R$ 1.000.000</td>
      <td class="num var-up">▲ +24%</td>
    </tr>
  </tbody>
</table>

São quatro decisões. Os cabeçalhos de coluna e de linha amarram cada célula ao seu rótulo. Os números ficam à direita, para o olho comparar a coluna inteira.

A variação carrega seta, sinal e cor juntos. E a cor vem de um tom claro o bastante para se ler no tema escuro, no lugar de um vermelho fechado que some no fundo preto.

Quando vale chamar uma biblioteca de gráficos?

Quando o gráfico precisa de uma linha do tempo com dezenas ou milhares de pontos, de interação ou de tipos mais complexos. Interação aqui é a caixinha de detalhe, o aproximar e o selecionar um trecho.

Para o indicador simples, a barra e a linha fina, o desenho feito à mão pesa menos e já basta. Acima desse limite, a biblioteca compensa. São seis opções em 2026, cada uma com o seu ponto forte.

ECharts: o mais completo. Aguenta muitos dados e painéis cheios de gráficos.

import * as echarts from "echarts";
const chart = echarts.init(document.getElementById("vendas"));
chart.setOption({
  xAxis: { type: "category", data: ["Jan", "Fev", "Mar", "Abr"],
    axisLabel: { color: "#cbd5e1" } }, // rótulo com contraste AA, não o cinza padrão
  yAxis: { type: "value", axisLabel: { color: "#cbd5e1" } },
  tooltip: { trigger: "axis" },
  series: [{ type: "line", smooth: true, data: [820, 932, 901, 1290] }],
});

Chart.js: o caminho mais rápido para um gráfico decente, com poucos comandos.

import { Chart } from "chart.js/auto";
new Chart(document.getElementById("pedidos"), {
  type: "bar",
  data: { labels: ["Loja", "Marketplace", "PDV"], datasets: [{ label: "Pedidos", data: [540, 820, 210] }] },
  options: { scales: { x: { ticks: { color: "#cbd5e1" } }, y: { ticks: { color: "#cbd5e1" } } } },
});

Plotly: uso científico e financeiro. Já vem com aproximar, arrastar e exportar.

import Plotly from "plotly.js-dist-min";
Plotly.newPlot("receita", [{ x: ["Jan", "Fev", "Mar"], y: [820, 932, 901], type: "scatter", mode: "lines+markers" }],
  { font: { color: "#cbd5e1" }, margin: { t: 16 } });

visx: peças soltas para React. Você monta o gráfico pedaço por pedaço, com controle total.

import { scaleLinear } from "@visx/scale";
import { LinePath } from "@visx/shape";

const x = scaleLinear({ domain: [0, 3], range: [0, 320] });
const y = scaleLinear({ domain: [0, 1300], range: [160, 0] });
// <svg width={320} height={160}>
//   <LinePath data={pontos} x={(d) => x(d.i)} y={(d) => y(d.v)} stroke="currentColor" strokeWidth={2} />
// </svg>

Tremor: peças de painel prontas para React, já estilizadas. Serve para sair do zero rápido.

import { LineChart } from "@tremor/react";

<LineChart
  data={vendas}
  index="mes"
  categories={["receita"]}
  valueFormatter={(n) => `R$ ${n.toLocaleString("pt-BR")}`}
/>

uPlot: muito leve, feito para linhas do tempo enormes, com desenho quase instantâneo.

import uPlot from "uplot";
const opts = { width: 640, height: 240, series: [{}, { stroke: "#818cf8", label: "Sessões" }] };
new uPlot(opts, [tempos, valores], document.getElementById("trafego"));

A escolha depende do caso. O ECharts cobre a maioria dos painéis. O uPlot ganha quando o volume de pontos trava a tela. O Tremor acelera quem já trabalha em React, e o visx serve quem precisa de um gráfico sob medida. A régua completa está em como escolher a stack de frontend.

Como o gráfico chega a quem usa leitor de tela?

Pelo par gráfico e tabela. O gráfico desenha formas, e forma nenhuma vira texto narrado. Então o desenho fica marcado como decorativo, com aria-hidden, e uma tabela com os mesmos dados fica escondida da vista pela técnica sr-only.

As barras abaixo trazem rótulo e valor visíveis, para que a informação dependa de mais coisas além da cor. Logo depois vem a tabela que só o leitor de tela percebe.

A técnica sr-only é um trecho de CSS que tira o elemento da tela sem tirá-lo da leitura. Ela faz o contrário de sumir com o elemento, e essa diferença é o ponto central.

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Esconder com display: none o que precisa ser lido tira o conteúdo de todo mundo, inclusive de quem usa leitor de tela. A técnica sr-only esconde só da vista.

Dois erros aparecem sempre no código gerado por máquina. O primeiro é deixar o rótulo do eixo no cinza claro padrão da biblioteca, que some no fundo. Troque a cor por um tom que se lê nos dois temas.

O segundo é deixar a informação só na cor. Toda série, todo indicador e toda fatia precisa de rótulo, valor ou forma, para que quem enxerga cor de outro jeito continue lendo o painel.

Como saber se o seu painel está pronto?

Ele está pronto quando passa nestes cinco testes. Rode os cinco no painel da loja de calçados do começo, um por vez.

• Nenhuma informação depende só de cor: todo indicador tem seta e sinal, toda categoria tem rótulo.
• Cada gráfico tem a mesma informação em texto, escondida da vista e legível pelo leitor de tela.
• Zero pizza, zero velocímetro e zero 3D: comparação em barras e meta em barra de alvo.
• Rótulos e eixos se leem bem no tema claro e no tema escuro.
• O painel se reorganiza no celular sem quebrar a leitura, cada bloco cuidando do próprio espaço.

O que fazer hoje

Hoje, pegue o painel que você usa e aplique a régua. Troque cada pizza por barras e cada velocímetro por barra de meta. Dê a cada gráfico a sua tabela escondida.

Depois padronize as cores pelo guia de design system, tokens e CSS moderno. O dono da loja de calçados do começo abre o painel de novo. Em cinco segundos, ele sabe se a semana foi boa e o que fazer.