Quando rastreia como múlticas categorias contínuas evoluem ao longo do tempo — como vendas de produtos ao longo dos trimestres, tendências de tópicos em coberturas jornalísticas ou padrões de consumo de mídia — o Gráfico de Rio de Temas (uma forma especializada de streamgraph) oferece uma apresentação intuitiva e visualmente impactante. Diferentemente dos gráficos de área empilhados padrão que se fixam em uma base plana, um gráfico de rio de temas flui horizontalmente em torno de um eixo central, criando uma visualização orgânica, semelhante a um rio, onde os fluxos individuais se ampliam ou se reduzem com base em mudanças nos valores quantitativos.
Os Mecanismos dos Gráficos de Rio de Temas
No Apache ECharts, os gráficos de rio de temas usam type: 'themeRiver'. Em vez de depender das configurações tradicionais xAxis e yAxis, o gráfico opera com um único eixo horizontal singleAxis com type: 'time' ou type: 'value'. Os itens de dados são passados como tuplas de array formatadas como [time, value, categoryName].
1. Configuração Básica
Para criar um gráfico de rio de temas básico, configure um singleAxis do tipo 'time', especifique type: 'themeRiver' em sua série e forneça suas observações de fluxo no array data array:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Tecnologia', 'Moda', 'Esportes']
},
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, 'Tecnologia'],
['2026-02-01', 24, 'Tecnologia'],
['2026-03-01', 32, 'Tecnologia'],
['2026-04-01', 18, 'Tecnologia'],
['2026-01-01', 15, 'Moda'],
['2026-02-01', 18, 'Moda'],
['2026-03-01', 10, 'Moda'],
['2026-04-01', 25, 'Moda'],
['2026-01-01', 8, 'Esportes'],
['2026-02-01', 12, 'Esportes'],
['2026-03-01', 28, 'Esportes'],
['2026-04-01', 20, 'Esportes']
]
}
]
};
Técnicas Estruturais Avançadas
Gráficos de Rio de Temas se destacam ao monitorar eventos complexos de múltiplas categorias ao longo de sequências de tempo longas, com tooltips personalizados e paletas de categorias estilizadas.
1. Fluxo de Volume de Mídia em Vários Fluxos
Personalizar as cores dos fluxos com mapeamentos explícitos de paleta e tooltips personalizados para o eixo transformam registros brutos de eventos em uma linha do tempo de atividade limpa:
const categories = ['Artigos', 'Visualizações de Vídeo', 'Reproduções de Podcast', 'Compartilhamentos Sociais'];
option = {
title: {
text: 'Fluxos de Engajamento com Conteúdo',
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, 'Artigos'], ['2026-02-01', 200, 'Artigos'], ['2026-03-01', 150, 'Artigos'], ['2026-04-01', 80, 'Artigos'],
['2026-01-01', 60, 'Visualizações de Vídeo'], ['2026-02-01', 140, 'Visualizações de Vídeo'], ['2026-03-01', 220, 'Visualizações de Vídeo'], ['2026-04-01', 310, 'Visualizações de Vídeo'],
['2026-01-01', 30, 'Reproduções de Podcast'], ['2026-02-01', 45, 'Reproduções de Podcast'], ['2026-03-01', 90, 'Reproduções de Podcast'], ['2026-04-01', 110, 'Reproduções de Podcast'],
['2026-01-01', 180, 'Compartilhamentos Sociais'], ['2026-02-01', 110, 'Compartilhamentos Sociais'], ['2026-03-01', 70, 'Compartilhamentos Sociais'], ['2026-04-01', 95, 'Compartilhamentos Sociais']
]
}
]
};
Melhores Práticas Estratégicas
- Formate as Tuplas de Dados Corretamente: Cada entrada no
dataarray deve seguir a ordem exata[data, valor, nomeCategoria]para que o ECharts possa cortar e empilhar corretamente os fluxos contínuos. - Limite a Dispersão de Categorias: Mantenha o número de categorias distintas entre 3 e 7. Muitos fluxos tornam as faixas individuais estreitas e difíceis de rastrear ao longo dos pontos no tempo.
- Aproveite o
singleAxisDimensionamento: AjustetopoebasenosingleAxispropriedade para controlar o preenchimento vertical e evitar que rótulos externos da sequência sejam cortados nas bordas do contêiner.