Cuando se rastrean los mercados financieros y los movimientos de precios de los activos con el tiempo, el Gráfico de velas es la herramienta de visualización estándar de la industria. Al combinar cuatro puntos clave de precios—Apertura, Máximo, Mínimo y Cierre (OHLC)—en una sola barra visual, los gráficos de velas muestran volatilidad de precios, rango de trading y sentimiento del mercado a simple vista, lo que los hace esenciales para paneles de rendimiento de acciones, rastreadores de criptomonedas y vistas de trading de materias primas.
La mecánica de las velas
En Apache ECharts, las series de velas se representan utilizando type: 'candlestick' (o el alias 'k'). Cada punto de datos requiere un arreglo de 4 valores ordenado explícitamente como [Apertura, Cierre, Mínimo, Máximo]. El motor del gráfico representa un cuerpo sólido o hueco entre la Apertura y el Cierre, con líneas delgadas de “mecha” que se extienden hasta los precios Mínimo y Máximo.
1. Configuración esencial
Para crear un gráfico de velas básico, asigna valores de tiempo a lo largo de un eje X continuo y pasa [Apertura, Cierre, Mínimo, Máximo] arreglos a tus datos de series:
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], // [Apertura, Cierre, Mínimo, Máximo] -> Alcista (Cierre > Apertura)
[40, 35, 30, 50], // Bajista (Cierre < Apertura)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de velas se pueden personalizar con convenciones de color internacionales, rangos de tiempo ampliados o combinados con promedios móviles.
1. Colores personalizados y promedios móviles
Personaliza los colores de las barras alcistas (al alza) y bajistas (a la baja) utilizando itemStyle, y superpone líneas de promedio móvil mezclando series de línea con las series de velas:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
leyenda: {
data: ['K Diario', 'MA5']
},
ejeX: {
type: 'category',
data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
},
ejeY: {
type: 'value',
escala: true
},
series: [
{
name: 'K Diario',
type: 'candelabro',
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]
],
estiloItem: {
color: '#eb4d4b', // Color para alza (Cierre > Apertura)
color0: '#6ab04c', // Color para baja (Cierre < Apertura)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'linea',
suave: true,
data: [null, null, null, null, 2310, 2321, 2329],
estiloLinea: { opacidad: 0.8, ancho: 2 }
}
]
};
Ajuste fino del diseño y zoom interactivo
Agregar controles de zoom de series de tiempo proporciona flexibilidad a los usuarios al navegar por registros históricos densos de operaciones.
1. Controles de zoom de datos y punteros de eje
Incorpore deslizadores horizontales y zoom con rueda del mouse utilizando el bloque de configuracióndataZoom bloque de configuración:
option = {
cuadrícula: {
izquierda: '10%',
derecha: '10%',
abajo: '15%'
},
ejeX: {
type: 'category',
data: ['Día 1', 'Día 2', 'Día 3', 'Día 4', 'Día 5', 'Día 6', 'Día 7', 'Día 8']
},
ejeY: {
type: 'value',
escala: true
},
dataZoom: [
{
type: 'inside', // Habilita el zoom con la rueda del mouse
inicio: 20,
fin: 100
},
{
type: 'slider', // Deslizador visual de zoom en la parte inferior
mostrar: true,
top: '90%'
}
],
series: [
{
type: 'candelabro',
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]
]
}
]
};
Prácticas recomendadas estratégicas
- Ordene los datos correctamente:¡Revise cuidadosamente la estructura del arreglo! ECharts espera
[Apertura, Cierre, Mínimo, Máximo]—cambiar el orden de Cierre y Mínimo es una causa común de errores de renderizado. - Habilite
escala: trueen el eje Y:Siempre incluyaescala: trueen los ejes numéricos de precios para que el gráfico se ajuste automáticamente al rango de precios actual en lugar de forzar el origen a cero. - Use punteros de eje de cruz:Establezca
tooltip.axisPointer.type = 'cross'para mostrar líneas de referencia verticales y horizontales continuas para una alineación sencilla de precios y marcas de tiempo.