Gráfico de líneas: seguimiento de tendencias y datos continuos

Cuando se rastrea una progresión continua o cambios en series de tiempo, el Gráfico de líneas sirve como la herramienta visual principal. A diferencia de los gráficos de columnas o barras discretas que se centran en comparaciones individuales entre categorías, los gráficos de líneas enfatizan la conexión y la pendiente para destacar impulso, estacionalidad y cambios bruscos en métricas sobre secuencias continuas, como el crecimiento diario de usuarios activos, los ingresos recurrentes mensuales o las secuencias de telemetría de sensores.

La mecánica de los gráficos de líneas

En Apache ECharts, las visualizaciones de líneas se configuran estableciendo la propiedad series type propiedad en 'line'. Los gráficos de líneas conectan puntos de datos ordenados secuencialmente a lo largo de un eje horizontal continuo categórico o de escala de tiempo (xAxis) y mapean valores numéricos continuos al eje vertical (yAxis).

1. Configuración esencial

Para crear un gráfico de líneas básico, define tus categorías continuas a lo largo del eje X y asigna tu conjunto de datos a un objeto series con type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Técnicas estructurales avanzadas

Los gráficos de líneas ofrecen flexibilidad para superposiciones de múltiples métricas, curvas de interpolación suave y indicadores personalizados para puntos de datos.

1. Curvas de interpolación suave

Por defecto, las series de líneas conectan puntos de datos con segmentos de línea recta. Habilitar smooth: trueaplica interpolación de spline cúbica para crear caminos de línea curvos y orgánicos a través de tu conjunto de datos:

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

2. Comparación de rendimiento multilínea

Compare métricas secundarias en intervalos de tiempo idénticos proporcionando múltiples objetos de línea dentro del series matriz:

option = {
    tooltip: {
        trigger: 'axis'
    },
    leyenda: {
        data: ['Período actual', 'Período anterior']
    },
    xAxis: {
        type: 'category',
        data: ['Semana 1', 'Semana 2', 'Semana 3', 'Semana 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Período actual',
            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' }
        }
    ]
};

Afinación precisa de rellenos de área y puntos de datos

Las series de líneas pueden mejorarse visualmente utilizando rellenos sutiles con degradado de fondo y marcadores de datos específicos para llamar la atención sobre hitos clave.

1. Estilo de área de línea

Agregar un areaStylepropiedad transforma un gráfico de línea estándar en una vista de área, rellenando la región entre la trayectoria de la línea y el eje horizontal:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Alinear la línea directamente a los bordes del eje
        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)' // Relleno suave debajo de la línea
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Prácticas recomendadas estratégicas

• Utilice boundaryGap: falsepara secuencias de tiempo:Eliminar los márgenes predeterminados en los bordes de los ejes de tiempo continuos permite que la línea comience directamente en el margen cero para una presentación limpia de borde a borde.
• Mantenga bajo el número de líneas:Evite representar más de 4 a 5 líneas en una sola superficie. Los gráficos de líneas demasiado cargados («gráficos de espagueti») se vuelven rápidamente ilegibles.
• Disparadores de información al pasar el cursor sobre el eje Siempre configurar tooltip: { trigger: 'eje' }para que los usuarios puedan pasar el cursor por cualquier punto horizontal y ver valores precisos en todas las series de líneas activas al mismo tiempo.