Para enfatizar tanto a direção da tendência quanto o volume total ao longo do tempo contínuo, o Gráfico de Áreafornece uma abordagem visual expressiva. Ao preencher a região entre a linha de tendência e o eixo horizontal, os gráficos de área destacam a magnitude relativa e as variações totais de volume ao longo de sequências, como o consumo de largura de banda do servidor, o volume de usuários ativos ou o volume diário de transações.
Os Mecanismos dos Gráficos de Área
Os gráficos de área são construídos diretamente sobre a configuração do gráfico de linha. Ao definir type: 'line' e incluindo um areaStylepropriedade em um objeto de série, o motor de renderização preenche automaticamente o espaço geométrico abaixo da trajetória da linha até a linha de base horizontal.
1. Configuração Básica
Para criar um gráfico de área básico, defina um eixo X contínuo, defina a série type: 'line', e declare um objeto vazio ou personalizado areaStyleobjeto:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Habilita preenchimento de área padrão
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de área podem ser aprimorados com gradientes de cor modernos e curvas suaves para melhorar a legibilidade e o acabamento visual.
1. Estilo de Preenchimento com Gradiente
Um preenchimento com cor sólida às vezes pode parecer pesado. Aplicar um gradiente linear semitransparente cria uma aparência moderna e elegante, onde o preenchimento desvanece suavemente em direção ao eixo inferior:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. Comparação de Áreas de Múltiplas Séries sobrepostas
Quando exibindo múltiplas séries de área em um único gráfico, ajustar a opacidade do preenchimento é crucial para que os caminhos de dados subjacentes permaneçam totalmente visíveis:
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Tráfego de Entrada', 'Tráfego de Saída']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Tráfego de Entrada',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: 'Tráfego de Saída',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
Ajuste fino do Layout e Espaçamento
Como os preenchimentos de área vão até a linha de base do eixo Y, configurar margens contínuas mantém o preenchimento alinhado de forma limpa com a borda da área de desenho.
1. Alinhamento Suave das Bordas
Definindo boundaryGap: falseno eixo X de categoria, o preenchimento começa na borda esquerda absoluta da grade do contêiner e termina de forma limpa na extremidade direita:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
Melhores Práticas Estratégicas
- Use baixas opacidades de preenchimento:Preenchimentos de área sólidos bloqueiam as linhas de grade subjacentes e séries sobrepostas. Mantenha sempre níveis de transparência entre 20% e 50% para alto contraste.
- Mantenha as séries em 2 ou 3:Muitas formas de área sobrepostas causam confusão visual. Para 4 ou mais conjuntos de dados contínuos acumulados, use um gráfico de área empilhada em vez disso.
- Defina
boundaryGap: false:Remover as margens horizontais nos eixos de tempo permite que os preenchimentos de área cubram a largura total da grade sem deixar espaços vazios desconfortáveis nas bordas esquerda e direita.