在前端实现折线图，最常用且高效的方式是使用成熟的可视化库，其中 ECharts（百度开源）和 Chart.js（轻量级）是最主流的选择。下面我会分别展示这两种方案的完整实现代码，从基础到可直接运行。

方案一：使用 ECharts（功能强大，适合复杂场景）

ECharts 是国内使用最广泛的前端可视化库，支持丰富的图表类型和交互效果，上手简单。

完整代码（HTML + JS）

html

预览

        <!-- 引入 ECharts CDN -->    [xss_clean][xss_clean]    <!-- 设置图表容器大小 -->        <!-- 图表容器 -->    
    [xss_clean]        // 1. 初始化 ECharts 实例        const chartDom = document.getElementById('line-chart');        const myChart = echarts.init(chartDom);        // 2. 配置折线图参数        const option = {            // 图表标题            title: {                text: '月度销售额趋势',                left: 'center'            },            // 提示框（鼠标悬浮显示数据）            tooltip: {                trigger: 'axis' // 按坐标轴触发，显示对应点的所有系列数据            },            // 图例（区分多条折线）            legend: {                data: ['产品A', '产品B'],                top: 'bottom'            },            // 网格（辅助线）            grid: {                left: '3%',                right: '4%',                bottom: '15%',                containLabel: true            },            // x 轴配置            xAxis: {                type: 'category', // 类目轴（文本类型）                data: ['1月', '2月', '3月', '4月', '5月', '6月']            },            // y 轴配置            yAxis: {                type: 'value' // 数值轴（数字类型）            },            // 系列数据（折线的核心数据）            series: [                {                    name: '产品A',                    type: 'line', // 图表类型为折线图                    data: [120, 200, 150, 80, 70, 110], // 对应x轴的数值                    smooth: true // 折线平滑处理                },                {                    name: '产品B',                    type: 'line',                    data: [80, 180, 100, 60, 90, 130],                    smooth: true                }            ]        };        // 3. 渲染图表        myChart.setOption(option);        // 可选：适配窗口大小变化        window.addEventListener('resize', () => {            myChart.resize();        });    [xss_clean]

关键说明

• 容器：必须给图表容器设置 width 和 height，否则无法渲染。
• 核心配置：xAxis/data：x 轴的类目（如月份、日期）。series：每个系列对应一条折线，data 是 y 轴数值。tooltip：开启鼠标悬浮提示，提升交互体验。

方案二：使用 Chart.js（轻量级，适合简单场景）

Chart.js 体积更小，API 更简洁，适合对体积敏感、需求简单的场景。

完整代码（HTML + JS）

html

预览

        <!-- 引入 Chart.js CDN -->    [xss_clean][xss_clean]        <!-- canvas 容器 -->        [xss_clean]        // 1. 获取 canvas 上下文        const ctx = document.getElementById('line-chart').getContext('2d');        // 2. 创建折线图        const myChart = new Chart(ctx, {            type: 'line', // 图表类型            data: {                // x轴标签                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],                // 数据集（多条折线）                datasets: [                    {                        label: '产品A', // 折线名称                        data: [120, 200, 150, 80, 70, 110], // 数值                        borderColor: '#ff6384', // 折线颜色                        backgroundColor: 'rgba(255, 99, 132, 0.1)', // 填充颜色                        tension: 0.4, // 折线平滑度（0为直线，1最平滑）                        fill: true // 是否填充折线下方区域                    },                    {                        label: '产品B',                        data: [80, 180, 100, 60, 90, 130],                        borderColor: '#36a2eb',                        backgroundColor: 'rgba(54, 162, 235, 0.1)',                        tension: 0.4,                        fill: true                    }                ]            },            options: {                responsive: true, // 响应式                plugins: {                    title: {                        display: true,                        text: '月度销售额趋势'                    },                    tooltip: {                        mode: 'index', // 鼠标悬浮时显示同索引的所有数据                        intersect: false                    }                },                scales: {                    y: {                        beginAtZero: true // y轴从0开始                    }                }            }        });    [xss_clean]

关键说明

• 容器：Chart.js 基于 渲染，无需额外的 div 容器。
• 核心配置：labels 对应 x 轴类目，datasets 是折线数据集合。tension 控制折线平滑度，是 Chart.js 特有的配置。

前置条件

两种方案都无需本地安装依赖，直接通过 CDN 引入即可运行；如果是 Vue/React 项目，可安装对应的 npm 包（如 echarts、chart.js），用法与上述核心逻辑一致。

总结

1. ECharts：功能全面（支持多维度交互、海量数据），适合中大型项目、复杂可视化需求。
2. Chart.js：轻量简洁（体积约 ECharts 的 1/5），适合小型项目、简单折线图需求。
3. 核心逻辑：无论用哪种库，都需要定义 x 轴类目、y 轴数值，并绑定到渲染容器上，再通过配置项调整样式和交互。