Line Chart

Code

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  tooltip: { trigger: 'axis' },
  legend: { data: ['2023', '2024'] },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '2023',
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
      smooth: true,
      areaStyle: { opacity: 0.3 }
    },
    {
      name: '2024',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310],
      smooth: true,
      itemStyle: { color: '#ee6666' }
    }
  ]
});

Explanation

Each entry in the series array becomes a separate line; legend.data must match the series names to enable toggling. smooth:true produces Bézier curves and areaStyle fills beneath the line. boundaryGap:false places points on axis tick marks rather than between them, which is conventional for time series.

More ECharts Snippets