折线图 Line
效果
在线预览
在线模拟尺寸:
基本折线
typescript
{
data: [
{ month: '1月', value: 23 },
{ month: '2月', value: 35 },
{ month: '3月', value: 18 }
],
series: [{ type: 'line', xField: 'month', yField: 'value' }]
}多系列折线
typescript
{
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' }
]
}平滑曲线
typescript
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[] | - | 渐变色数组 |
数据标签
typescript
series: [{
type: 'line',
xField: 'month',
yField: 'value',
label: {
show: true,
fontSize: 10,
color: '#6b7280'
}
}]