echarts折线图label重叠

### 解决 ECharts 折线图 Label 标签重叠的方法

#### 使用 `labelLayout` 配置项调整标签位置
为了防止标签之间发生重叠，可以利用 `labelLayout` 属性来动态调整标签的位置。通过自定义布局函数，能够更灵活地控制每个标签的具体显示位置。

option = {
    series: [{
        type: 'line',
        label: {
            show: true,
            position: 'top'
        },
        labelLayout: function(params) {
            let points = params.points;
            let isOverlap = false;

            // 判断是否有其他点位接近当前点
            for (let i = 0; i < points.length; i++) {
                if ((Math.abs(points[i][0] - params.x) < 10 && Math.abs(points[i][1] - params.y) < 10)) {
                    isOverlap = true;
                    break;
                }
            }

            if (isOverlap) {
                return {
                    dy: 20 * (points.length % 2 === 0 ? 1 : -1), // 上下交错排列
                };
            } else {
                return {};
            }
        }
    }]
};

此方法允许开发者编写逻辑判断是否存在潜在的重叠情况，并据此修改标签坐标[^1]。

#### 设置 `endLabel` 特殊样式减少冲突概率
对于折线末端特别容易出现的文字覆盖现象，可以通过专门配置 `endLabel` 来优化视觉效果。这不仅可以让结尾处的数据更加醒目，还能有效降低与其他部分产生交集的可能性。

emphasis: {
    focus: "series",
},
endLabel: {
    show: true,
    color: "#FF0000", // 更改颜色提高辨识度
    lineHeight: 18,
    offset: [35, 0],
    formatter: function(params) {
        return `${params.seriesName}:\n${params.value[1]}%`;
    }
}

上述代码片段展示了如何增强最后一个数据点上的标注表现力，从而间接缓解整体拥挤状况[^2]。

#### 调整区域堆叠模式避免背景遮挡
当多条曲线共存时，可能会因为填充色相互干扰而影响到上方的小字提示清晰可见的程度。此时应该考虑统一设置各系列间的 `stack` 参数值相同，使得不同线条下的阴影不会互相叠加在一起造成混乱局面。

series: [
    {name:'A', stack:'总量'},
    {name:'B', stack:'总量'}
]

这样做既保持了图形美观又解决了因面积着色引起的文字不可读难题[^3]。