Gráfico de Linha: Rastreamento de Tendências e Dados Contínuos

Ao rastrear progressão contínua ou mudanças em séries temporais, o Gráfico de Linhaserve como a ferramenta visual principal. Diferentemente dos gráficos de colunas ou barras discretas que se concentram em comparações individuais de categorias, os gráficos de linha enfatizam conexão e inclinação para destacar momento, sazonalidade e mudanças súbitas em métricas ao longo de sequências ininterruptas, como o crescimento diário de usuários ativos, receita recorrente mensal ou fluxos de telemetria de sensores.

Os Mecanismos dos Gráficos de Linha

No Apache ECharts, as visualizações de linha são configuradas definindo a propriedade series type para 'line'. Os gráficos de linha conectam pontos de dados ordenados sequencialmente ao longo de um eixo horizontal contínuo categórico ou de escala de tempo (xAxis) e mapeiam valores numéricos contínuos para o eixo vertical (yAxis).

1. Configuração Básica

Para criar um gráfico de linha básico, defina suas categorias contínuas ao longo do eixo X e mapeie seu conjunto de dados para um objeto série com type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Técnicas Estruturais Avançadas

Os gráficos de linha oferecem flexibilidade para sobreposições de múltiplas métricas, curvas de interpolação suave e indicadores personalizados de pontos de dados.

1. Curvas de Interpolação Suave

Por padrão, as séries de linha conectam pontos de dados com segmentos de linha reta. Habilitar smooth: trueaplica interpolação por spline cúbico para criar caminhos de linha curvos e orgânicos em todo o seu conjunto de dados:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 3,
                color: '#5470c6'
            }
        }
    ]
};

2. Comparação de Desempenho em Várias Linhas

Compare métricas secundárias em intervalos de tempo idênticos fornecendo múltiplos objetos de linha dentro do series array:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Período Atual', 'Período Anterior']
    },
    xAxis: {
        type: 'category',
        data: ['Semana 1', 'Semana 2', 'Semana 3', 'Semana 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Período Atual',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Período Anterior',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Ajustes Finos em Preenchimentos de Área e Pontos de Dados

Séries de linhas podem ser visualmente aprimoradas usando preenchimentos suaves com gradientes de fundo e marcadores de dados direcionados para chamar a atenção para marcos importantes.

1. Estilo de Área de Linha

Adicionar um areaStylepropriedade transforma um gráfico de linha padrão em uma visualização de área, preenchendo a região entre o caminho da linha e o eixo horizontal:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Alinhar a linha diretamente às bordas do eixo
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 590, 820, 710, 430],
            areaStyle: {
                color: 'rgba(84, 112, 198, 0.25)' // Preenchimento suave sob a linha
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Melhores Práticas Estratégicas

• Use boundaryGap: false para sequências de tempo: Remover os espaçamentos padrão nas bordas em eixos de tempo contínuos permite que a linha comece diretamente na margem zero, proporcionando uma apresentação limpa de borda a borda.
• Mantenha o número de linhas baixo:Evite renderizar mais de 4 a 5 linhas em uma única tela. Gráficos de linhas muito cheios (“gráficos de espaguete”) tornam-se rapidamente ilegíveis.
• Gatilhos de Dica de Ferramenta do Eixo Sempre configurar tooltip: { trigger: 'axis' }para que os usuários possam passar o mouse por qualquer ponto horizontal para visualizar valores precisos em todas as séries de linhas ativas simultaneamente.