Line 线

基本属性

const options = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      smooth: true, // 平滑曲线
      areaStyle: {}, // 填充区域
    },
  ],
}

填充区域

const options = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      areaStyle: {
        color: 'rgba(135,206,250,0.5)', // 填充颜色
      },
    },
    {
      type: 'line',
      smooth: true, // 平滑曲线
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      itemStyle: {
        color: '#5B8FF9', // 线条颜色
      },
      areaStyle: {
        color: {
          // 填充渐变色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(91, 143, 249, 0.8)', // 蓝色
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255, 0)', // 白色透明
            },
          ],
        },
      },
    },
  ],
}