ECharts在曲线上方显示数值的实现方法-牛站云

ECharts作为前端数据可视化领域中应用非常广泛的图表库，常用于折线图、曲线图、趋势分析图等场景。在实际项目开发过程中，仅展示曲线走势往往无法满足用户需求，很多业务场景还需要直接显示每个数据点对应的数值，例如销售趋势、访问量变化、设备监控数据等。

ECharts提供了丰富的配置项，可以通过label属性轻松实现曲线上方显示数据值的效果。合理使用数据标签，不仅能够提升图表可读性，还可以让用户快速获取关键数据。

ECharts曲线上方显示数值的核心方法

在ECharts中，折线图或曲线图的数据展示主要依赖series.label配置项。通过设置show:true开启标签显示，并通过position控制数值显示的位置。

一个基础示例如下：

JavaScript
option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [120, 200, 150, 80, 70],
            label: {
                show: true,
                position: 'top'
            }
        }
    ]
};

运行后，每个折线节点上方都会显示对应的数据值：

周一显示120
周二显示200
周三显示150
周四显示80
周五显示70

其中：

show:true表示开启数据标签；
position:'top'表示标签显示在数据点顶部；
type:'line'表示使用折线图展示数据。

设置曲线平滑效果并显示数值

很多业务场景中的曲线并不是简单折线，而是需要更加平滑的趋势展示。ECharts支持通过smooth属性实现曲线效果。

示例：

JavaScript
series: [
    {
        type: 'line',
        smooth: true,
        data: [30, 80, 50, 120, 90],
        label: {
            show: true,
            position: 'top'
        }
    }
]

smooth:true会让折线连接处变成平滑曲线，同时配合label.position:'top'即可实现曲线上方显示数值。

这种方式常用于：

用户增长趋势图；
股票走势分析；
温度变化曲线；
销售数据统计。

自定义曲线上方显示的数值格式

默认情况下，ECharts会直接显示数据原值。但在实际开发中，经常需要对数据进行格式化，例如增加单位、转换金额格式等。

可以使用formatter方法：

JavaScript
label: {
    show: true,
    position: 'top',
    formatter: '{c}万'
}

显示效果：


120万
200万
150万
80万
70万

其中{c}代表当前数据值。

如果需要更加复杂的格式，可以使用函数：

JavaScript
label: {
    show: true,
    position: 'top',
    formatter: function(params) {
        return params.value + '人';
    }
}

例如用户数量统计图：


120人
200人
150人
80人
70人

这种方式可以满足不同业务的数据展示需求。

调整数值显示位置避免遮挡

在部分情况下，曲线距离图表顶部较近，顶部数字可能会被截断。此时可以通过调整网格区域或标签距离解决。

方法一：增加grid顶部空间

JavaScript
grid: {
    top: '15%'
}

通过增加顶部空白区域，为数据标签预留展示空间。

完整配置：

JavaScript
option = {
    grid: {
        top: '15%'
    },
    series: [
        {
            type: 'line',
            data: [100, 200, 300],
            label: {
                show: true,
                position: 'top'
            }
        }
    ]
};

方法二：调整标签距离

使用distance控制文字距离数据点的位置：

JavaScript
label: {
    show: true,
    position: 'top',
    distance: 10
}

数值越大，标签距离曲线越远。

多条曲线同时显示数值的方法

当一个图表中存在多条曲线时，只需要分别配置每个series即可。

示例：

JavaScript
series: [
    {
        name: '销售额',
        type: 'line',
        data: [120, 150, 180, 200],
        label: {
            show: true,
            position: 'top'
        }
    },
    {
        name: '订单量',
        type: 'line',
        data: [80, 100, 130, 160],
        label: {
            show: true,
            position: 'top'
        }
    }
]

不过多条曲线同时显示标签时，可能出现文字重叠问题。

可以结合以下方式优化：

使用labelLayout自动调整

JavaScript
labelLayout: {
    hideOverlap: true
}

该配置可以自动隐藏部分重叠标签，提高图表展示效果。

完整示例：

JavaScript
series: [
    {
        type: 'line',
        data: [20, 50, 80],
        label: {
            show: true,
            position: 'top'
        },
        labelLayout: {
            hideOverlap: true
        }
    }
]

根据条件显示曲线上方的数据

有些情况下，并不希望所有节点都显示数值，而是只显示重点数据。

可以通过formatter进行判断：

JavaScript
label: {
    show: true,
    position: 'top',
    formatter: function(params) {
        if(params.value > 100){
            return params.value;
        }
        return '';
    }
}

效果：

大于100的数据显示；
小于100的数据隐藏。

这种方式适合：

大规模数据趋势图；
实时监控图；
数据点较多的统计报表。

ECharts动态更新数据时显示数值

如果图表数据来自接口请求，例如Ajax获取后台数据，可以在数据加载完成后设置series。

示例：

JavaScript
axios.get('/api/data').then(res => {

    chart.setOption({
        series: [
            {
                data: res.data,
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    });

});

这样即使数据动态变化，曲线上方的数值也会同步更新。

常见问题及解决方案

1. 设置label后没有显示数字

常见原因：

show没有设置为true；
配置写在错误的位置；
series类型不是line；
ECharts版本不支持相关属性。

正确结构：

JavaScript
series: [
    {
        type:'line',
        label:{
            show:true
        }
    }
]

2. 数值显示在曲线内部

如果使用：

JavaScript
position:'inside'

标签会显示在数据点内部。

修改为：

JavaScript
position:'top'

即可显示在曲线上方。

3. 顶部数字被裁剪

解决方式：

增加：

JavaScript
grid:{
    top:50
}

或者：

JavaScript
containLabel:true

例如：

JavaScript
grid:{
    containLabel:true
}

可以避免标签超出绘图区。

ECharts曲线上方显示数值的最佳实践

在实际项目中，建议根据数据量选择合适的展示策略：

数据点较少：直接开启全部label；
数据点较多：只显示关键节点；
多条曲线：开启hideOverlap避免遮挡；
数据单位复杂：使用formatter格式化；
移动端展示：减少标签数量，提高阅读体验。

一个较完整的配置示例：

JavaScript
option = {
    tooltip: {
        trigger: 'axis'
    },
    grid:{
        top:50,
        containLabel:true
    },
    xAxis:{
        type:'category',
        data:['1月','2月','3月','4月']
    },
    yAxis:{
        type:'value'
    },
    series:[
        {
            type:'line',
            smooth:true,
            data:[100,200,150,300],
            label:{
                show:true,
                position:'top',
                formatter:'{c}元'
            },
            labelLayout:{
                hideOverlap:true
            }
        }
    ]
};