折线图(Line Chart)实现

折线图(Line Chart)实现

折线图是数据可视化中最常见的图表类型之一，用于展示数据随时间或其他连续变量的变化趋势。ECharts提供了丰富的配置项来自定义折线图的外观和行为，从基本的线条样式到复杂的数据交互都能轻松实现。

基础折线图实现

最简单的折线图只需要准备x轴数据和对应的y轴数据。以下是一个基础示例：

option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

这段代码会生成一个展示一周内数值变化的折线图。xAxis的type设置为'category'表示离散的类别数据，yAxis的type设置为'value'表示连续的数值数据。

多系列折线图

在实际应用中，经常需要同时展示多个数据系列进行比较：

option = {
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '产品A',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230]
        },
        {
            name: '产品B',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330]
        }
    ]
};

这个例子展示了两个产品半年内的销售数据对比。通过为每个系列设置不同的name属性，可以在图例中区分它们。

折线图样式定制

ECharts提供了丰富的样式配置选项：

series: [{
    name: '邮件营销',
    type: 'line',
    stack: '总量',
    data: [120, 132, 101, 134, 90, 230, 210],
    itemStyle: {
        color: '#c23531',
        borderColor: '#c23531',
        borderWidth: 2
    },
    lineStyle: {
        width: 3,
        type: 'dashed'
    },
    symbol: 'circle',
    symbolSize: 8,
    areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(194, 53, 49, 0.5)' },
            { offset: 1, color: 'rgba(194, 53, 49, 0.1)' }
        ])
    }
}]

这段代码配置了：

• 线条颜色和宽度
• 数据点符号形状和大小
• 虚线样式
• 渐变填充区域

平滑曲线与阶梯线

ECharts支持多种线条表现形式：

series: [
    {
        name: '平滑曲线',
        type: 'line',
        smooth: true,
        data: [12, 15, 11, 14, 19, 23, 21]
    },
    {
        name: '阶梯线',
        type: 'line',
        step: 'middle', // 可选值: 'start', 'middle', 'end'
        data: [22, 25, 21, 24, 29, 33, 31]
    }
]

smooth属性设置为true会生成平滑曲线，而step属性可以创建阶梯状折线图，适用于离散状态变化的数据展示。

动态数据更新

折线图经常需要动态更新数据，ECharts提供了简单的API：

// 初始化图表
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// 模拟实时数据更新
setInterval(function() {
    const oldData = option.series[0].data;
    // 移除第一个数据点，添加新的随机数据
    const newData = oldData.slice(1);
    newData.push(Math.round(Math.random() * 1000));
    
    option.series[0].data = newData;
    myChart.setOption(option);
}, 2000);

这段代码每2秒会移除最旧的数据点并添加一个新的随机数据点，实现动态滚动的效果。

大数据量优化

当数据点非常多时，需要进行性能优化：

option = {
    xAxis: {
        type: 'value',
        min: 0,
        max: 10000
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: generateLargeData(10000), // 生成10000个数据点
        progressive: 200,
        progressiveThreshold: 3000,
        animation: false
    }]
};

function generateLargeData(count) {
    const data = [];
    for (let i = 0; i < count; i++) {
        data.push([i, Math.sin(i / 100) * 100 + Math.random() * 10]);
    }
    return data;
}

关键优化参数：

• progressive: 分片渲染的块大小
• progressiveThreshold: 启用渐进渲染的阈值
• animation: 禁用动画提升性能

交互功能增强

ECharts提供了丰富的交互功能：

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            start: 0,
            end: 100
        }
    ],
    series: [
        {
            data: [120, 132, 101, 134, 90, 230, 210],
            type: 'line',
            markPoint: {
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                ]
            },
            markLine: {
                data: [
                    { type: 'average', name: '平均值' }
                ]
            }
        }
    ]
};

这段代码实现了：

• 十字准星提示框
• 数据区域缩放
• 最大值/最小值标记点
• 平均值参考线
• 工具箱(保存图片、重置等)

多轴折线图

当需要展示不同量纲的数据时，可以使用多y轴：

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: [
        {
            type: 'value',
            name: '温度',
            position: 'left',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        {
            type: 'value',
            name: '降水量',
            position: 'right',
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],
    series: [
        {
            name: '温度',
            type: 'line',
            yAxisIndex: 0,
            data: [12, 15, 11, 14, 19, 23, 21]
        },
        {
            name: '降水量',
            type: 'line',
            yAxisIndex: 1,
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

这个例子同时展示了温度和降水量两个不同单位的数据系列，分别使用左右两侧的y轴。

时间轴折线图

对于时间序列数据，ECharts提供了专门的时间轴支持：

function randomData() {
    now = new Date(+now + oneDay);
    value = Math.random() * 1000 - 500;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    };
}

let now = new Date(2023, 0, 1);
const oneDay = 24 * 3600 * 1000;
const data = [];
for (let i = 0; i < 100; i++) {
    data.push(randomData());
}

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '<br/>' + 
                   params[0].seriesName + ': ' + params[0].value[1];
        }
    },
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '30%']
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        data: data
    }]
};

这段代码创建了一个动态生成的时间序列折线图，xAxis的type设置为'time'可以自动处理时间数据的格式和缩放。

响应式设计

确保折线图在不同屏幕尺寸下都能正常显示：

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

function resizeChart() {
    myChart.resize();
}

window.addEventListener('resize', resizeChart);

// 初始设置
option = {
    // ... 图表配置
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    }
};
myChart.setOption(option);

关键点：

• 监听窗口resize事件并调用resize方法
• 使用百分比设置grid边距而非固定像素值
• 设置containLabel: true防止标签溢出

主题与自定义渲染

ECharts支持主题定制和自定义系列渲染：

// 注册主题
echarts.registerTheme('my_theme', {
    color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53'],
    backgroundColor: '#f5f5f5',
    textStyle: {
        fontFamily: 'Arial, sans-serif'
    }
});

// 使用主题初始化
const myChart = echarts.init(document.getElementById('main'), 'my_theme');

// 自定义系列
option = {
    series: [{
        type: 'custom',
        renderItem: function(params, api) {
            const coord = api.coord([api.value(0), api.value(1)]);
            return {
                type: 'circle',
                shape: {
                    cx: coord[0],
                    cy: coord[1],
                    r: 5
                },
                style: {
                    fill: api.visual('color')
                }
            };
        },
        data: [[10, 20], [30, 40], [50, 60]]
    }]
};

这个例子展示了如何：

1. 注册并使用自定义主题
2. 使用custom系列实现完全自定义的渲染逻辑

折线图与其他图表组合

折线图常与其他图表类型组合使用：

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['蒸发量', '降水量', '平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [50, 70, 60, 80, 75, 90]
        },
        {
            name: '降水量',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230]
        },
        {
            name: '平均温度',
            type: 'line',
            yAxisIndex: 1,
            data: [12, 15, 11, 14, 19, 23]
        }
    ]
};

这个组合图表同时展示了柱状图和折线图，共享x轴但使用不同的y轴，适合展示相关但不同量纲的数据。