Ao acompanhar mercados financeiros e movimentações de preços de ativos ao longo do tempo, o Gráfico de Velas é a ferramenta padrão da indústria para visualização. Ao combinar quatro pontos-chave de preço — Abertura, Máximo, Mínimo e Fechamento (OHLC) — em uma única barra visual, os gráficos de velas mostram volatilidade de preços, amplitude de negociação e sentimento do mercado de primeira vista, tornando-os essenciais para painéis de desempenho de ações, rastreadores de cripto e visualizações de negociação de commodities.
Os Mecanismos das Velas
No Apache ECharts, séries de velas são renderizadas usando type: 'candlestick' (ou o alias 'k'). Cada ponto de dados exige um array de 4 valores ordenado explicitamente como [Abertura, Fechamento, Mínimo, Máximo]. O motor do gráfico renderiza um corpo sólido ou oco entre Abertura e Fechamento, com linhas finas de “pêlo” estendendo-se até os preços Mínimo e Máximo.
1. Configuração Básica
Para criar um gráfico de velas básico, mapeie valores de tempo ao longo de um eixo X contínuo e passe [Abertura, Fechamento, Mínimo, Máximo] arrays para seus dados de série:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Abertura, Fechamento, Mínimo, Máximo] -> Alcista (Fechamento > Abertura)
[40, 35, 30, 50], // Bearish (Fechamento < Abertura)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de velas podem ser personalizados com convenções internacionais de cores, faixas de tempo ampliadas ou combinados com médias móveis.
1. Cores Personalizadas e Médias Móveis
Personalize as cores das barras alcistas (para cima) e descendentes (para baixo) usando itemStyle, e sobrepõe linhas de média móvel misturando séries de linha com a série de velas:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['K Diário', 'MA5']
},
xAxis: {
type: 'category',
data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'K Diário',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // Cor para bullish (Fechamento > Abertura)
color0: '#6ab04c', // Cor para bearish (Fechamento < Abertura)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Ajuste fino do layout e zoom interativo
Adicionar controles de zoom em séries temporais dá aos usuários flexibilidade ao navegar por registros históricos densos de negociações.
1. Controles de Zoom de Dados e Ponteiro de Eixo
Incorpore deslizadores horizontais e zoom com roda do mouse usando o bloco de configuração dataZoom bloco de configuração:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Dia 1', 'Dia 2', 'Dia 3', 'Dia 4', 'Dia 5', 'Dia 6', 'Dia 7', 'Dia 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Habilita zoom com roda do mouse
start: 20,
end: 100
},
{
type: 'slider', // Deslizador de zoom visual na parte inferior
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
Melhores Práticas Estratégicas
- Ordene os dados corretamente:Verifique novamente a estrutura do array! O ECharts espera
[Abertura, Fechamento, Mais Baixo, Mais Alto]—trocar Fechamento e Mais Baixo é uma fonte comum de erros de renderização. - Habilite
scale: trueno eixo Y: Sempre incluascale: trueem eixos numéricos de preço para que o gráfico se ajuste automaticamente à faixa de preço atual em vez de forçar a origem para zero. - Use ponteiros de eixo em cruz: Defina
tooltip.axisPointer.type = 'cross'para mostrar linhas de referência contínuas vertical e horizontalmente para facilitar a alinhamento de preço e horário.