折线图 Line

效果

在线预览

在线模拟尺寸:

基本折线

{
  data: [
    { month: '1月', value: 23 },
    { month: '2月', value: 35 },
    { month: '3月', value: 18 }
  ],
  series: [{ type: 'line', xField: 'month', yField: 'value' }]
}

多系列折线

{
  data: [
    { month: '1月', sales: 120, cost: 80 },
    { month: '2月', sales: 200, cost: 110 }
  ],
  series: [
    { type: 'line', xField: 'month', yField: 'sales', color: '#3b82f6' },
    { type: 'line', xField: 'month', yField: 'cost', color: '#f59e0b' }
  ]
}

平滑曲线

series: [{
  type: 'line',
  xField: 'month',
  yField: 'value',
  smooth: true,           // 启用平滑
  smoothStrength: 0.6     // 平滑强度 0.15~1，默认 0.6
}]

系列配置项

属性	类型	默认值	说明
type	string	-	固定 'line'
xField	string	-	X 轴字段名
yField	string	-	Y 轴字段名
color	string	自动	线条颜色
smooth	boolean	false	是否平滑曲线
smoothStrength	number	0.6	平滑强度
showPoint	boolean	true	是否显示数据点
lineWidth	number	3	线条宽度
pointSize	number	6	数据点大小
label	ChartLabelOptions	-	数据标签配置
gradient	string[]	-	渐变色数组

数据标签

series: [{
  type: 'line',
  xField: 'month',
  yField: 'value',
  label: {
    show: true,
    fontSize: 10,
    color: '#6b7280'
  }
}]