Cuando se rastrea cómo evolucionan múltiples categorías continuas con el tiempo—como las ventas de productos a lo largo de los trimestres, las tendencias cambiantes de temas en la cobertura de noticias o los patrones de consumo de medios—el Gráfico de Río de Temas (una forma especializada de un streamgraph) proporciona una presentación intuitiva y visualmente impactante. A diferencia de los gráficos de áreas apiladas estándar que se anclan en una base plana, un gráfico de río de temas fluye horizontalmente alrededor de un eje central, creando una visualización orgánica, similar a un río, donde los flujos individuales se ensanchan o estrechan según los cambios en los valores cuantitativos.
La mecánica de los gráficos de río de temas
En Apache ECharts, los gráficos de río de temas utilizan type: 'themeRiver'. En lugar de depender de las configuraciones tradicionales xAxis y yAxis, el gráfico opera con un solo eje horizontal singleAxis con type: 'time' o type: 'value'. Los elementos de datos se pasan como tuplas de matriz formateadas como [time, value, categoryName].
1. Configuración esencial
Para crear un gráfico de río de temas básico, configure un singleAxis de tipo 'time', especifique type: 'themeRiver' en sus series y proporcione sus observaciones de flujo en el array data array:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Tecnología', 'Moda', 'Deportes']
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: { show: true }
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.5
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
data: [
['2026-01-01', 12, 'Tecnología'],
['2026-02-01', 24, 'Tecnología'],
['2026-03-01', 32, 'Tecnología'],
['2026-04-01', 18, 'Tecnología'],
['2026-01-01', 15, 'Moda'],
['2026-02-01', 18, 'Moda'],
['2026-03-01', 10, 'Moda'],
['2026-04-01', 25, 'Moda'],
['2026-01-01', 8, 'Deportes'],
['2026-02-01', 12, 'Deportes'],
['2026-03-01', 28, 'Deportes'],
['2026-04-01', 20, 'Deportes']
]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de río de temas destacan al monitorear eventos complejos de múltiples categorías a lo largo de secuencias de cronología largas con herramientas informativas personalizadas y paletas de categorías con estilo.
1. Flujo de volumen de medios de múltiples corrientes
Personalizar los colores de las corrientes con asignaciones explícitas de paleta y herramientas informativas personalizadas para los ejes convierte los registros de eventos sin procesar en una línea de tiempo de actividad limpia:
const categories = ['Artículos', 'Vistas de video', 'Reproducciones de podcast', 'Comparticiones en redes'];
option = {
title: {
text: 'Flujos de participación de contenido',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#333',
width: 1
}
}
},
legend: {
data: categories,
bottom: 10
},
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
singleAxis: {
top: '15%',
bottom: '20%',
type: 'time',
axisLine: { lineStyle: { color: '#ccc' } },
splitLine: { show: false }
},
series: [
{
type: 'themeRiver',
label: {
show: true,
position: 'left',
fontSize: 12
},
data: [
['2026-01-01', 120, 'Artículos'], ['2026-02-01', 200, 'Artículos'], ['2026-03-01', 150, 'Artículos'], ['2026-04-01', 80, 'Artículos'],
['2026-01-01', 60, 'Vistas de video'], ['2026-02-01', 140, 'Vistas de video'], ['2026-03-01', 220, 'Vistas de video'], ['2026-04-01', 310, 'Vistas de video'],
['2026-01-01', 30, 'Reproducciones de podcast'], ['2026-02-01', 45, 'Reproducciones de podcast'], ['2026-03-01', 90, 'Reproducciones de podcast'], ['2026-04-01', 110, 'Reproducciones de podcast'],
['2026-01-01', 180, 'Comparticiones en redes'], ['2026-02-01', 110, 'Comparticiones en redes'], ['2026-03-01', 70, 'Comparticiones en redes'], ['2026-04-01', 95, 'Comparticiones en redes']
]
}
]
};
Mejores prácticas estratégicas
- Formatee correctamente las tuplas de datos: Cada entrada en el
dataarreglo debe seguir el orden exacto[fecha, valor, nombreCategoria]para que ECharts pueda dividir y apilar correctamente los flujos continuos. - Limitar la dispersión de categorías: Mantenga el número de categorías distintas entre 3 y 7. Demasiadas corrientes hacen que las bandas individuales sean estrechas y difíciles de rastrear a lo largo de los puntos de tiempo.
- Aproveche
singleAxisTamaño: Ajustetopybottomen elsingleAxispropiedad para controlar el relleno vertical y evitar que las etiquetas externas de la secuencia se corten contra los bordes del contenedor.