返回数据分析
📈 趋势图表

折线图 Line Chart

展示数据随时间或有序分类的变化趋势，最常用的趋势分析图表

@ant-design/charts Line 趋势分析
2024年月度销售趋势
Basic Line
数据源: 财务系统, 销售指标表 数据周期: 1月-12月
筛选
万元
按月份
销售额
悬停查看标注
折线规范
线条颜色#5B8FF9
线宽2px
平滑曲线false
数据点
大小4px
形状circle
坐标轴配置
标签字号11px
标签颜色#1D1D1F
网格线[4,4]虚线
全年累计： 68,500 万元 月均： 5,708 万元 增长率： +105%
Chart Configuration 
const config = {
    data: monthlyData,
    xField: 'month',
    yField: 'value',
    padding: [40, 20, 50, 50],
    color: '#5B8FF9',
    lineStyle: { lineWidth: 2 },
    point: { 
        size: 4, 
        shape: 'circle', 
        style: { fill: '#5B8FF9' } 
    },
    xAxis: {
        label: { style: { fontSize: 11, fill: '#1D1D1F' } },
        line: { style: { stroke: '#E8E8ED' } },
    },
    yAxis: {
        label: { 
            style: { fontSize: 11, fill: '#1D1D1F' }, 
            formatter: (v) => v.toLocaleString() 
        },
        grid: { line: { style: { stroke: '#E8E8ED', lineDash: [4, 4] } } },
    },
};
折线规范
参数值说明
color#5B8FF9主题蓝
lineStyle.lineWidth2线条宽度
smoothfalse是否平滑曲线
point.size4数据点大小
point.shapecircle数据点形状
坐标轴配置
参数X轴值Y轴值
label.fontSize11px11px
label.fill#1D1D1F#1D1D1F
grid.linenull#E8E8ED [4,4]
常见变体
平滑曲线
Smooth
Smooth Line
new Line('chart-smooth', {
    data: basicData,
    xField: 'month',
    yField: 'value',
    smooth: true,
    color: '#5AD8A6',
    lineStyle: { lineWidth: 2 },
}).render();
多系列折线
Multi Line
Multi Line
new Line('chart-multi', {
    data: multiData,
    xField: 'month',
    yField: 'value',
    seriesField: 'type',
    color: ['#5B8FF9', '#FF9500'],
    lineStyle: { lineWidth: 2 },
}).render();
代码示例
const config = { data, xField: 'month', yField: 'value', padding: [40, 20, 50, 50], color: '#5B8FF9', smooth: false, lineStyle: { lineWidth: 2 }, point: { size: 4, shape: 'circle' }, };