如何用echarts画折线图

下面用 ECharts 画一个最基础的折线图示例，从引入到完整代码一步步说明。

一、引入 ECharts

方式 1：CDN（最简单）

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

方式 2：npm（前端项目）

npm install echarts

import * as echarts from 'echarts';

二、HTML 容器

<div id="chart" style="width: 600px; height: 400px;"></div>

三、JS 初始化折线图

<script>
  // 1. 初始化 ECharts 实例
  const chart = echarts.init(document.getElementById('chart'));

  // 2. 配置项
  const option = {
    title: {
      text: '一周气温变化'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '气温',
        type: 'line',
        data: [22, 24, 25, 23, 21, 20, 19]
      }
    ]
  };

  // 3. 渲染图表
  chart.setOption(option);
</script>

四、常见扩展

1️⃣ 多条折线

series: [
  {
    name: '最高温',
    type: 'line',
    data: [28, 30, 31, 29, 27, 26, 25]
  },
  {
    name: '最低温',
    type: 'line',
    data: [18, 19, 20, 19, 17, 16, 15]
  }
]

2️⃣ 平滑曲线

series: [{
  type: 'line',
  smooth: true,
  data: [22, 24, 25, 23, 21, 20, 19]
}]

3️⃣ 显示数据点

series: [{
  type: 'line',
  symbol: 'circle',
  symbolSize: 8,
  data: [22, 24, 25, 23, 21, 20, 19]
}]

五、响应式（窗口变化）

window.addEventListener('resize', () => {
  chart.resize();
});

如果你有 具体数据 / Vue / React / 动态数据 / 时间轴折线图，可以告诉我，我可以直接给你对应版本代码。