Echarts Bar 柱状图标签label重叠问题处理

logo、

已于 2024-03-21 14:58:03 修改

阅读量6.1k

点赞数 11

文章标签： echarts 前端 javascript

于 2024-03-20 16:49:34 首次发布

本文链接：https://blog.csdn.net/weixin_69337669/article/details/136878964

版权

本文介绍了如何在ECharts中处理堆叠柱状图中标签的重叠问题，通过检测像素位置并调整标签偏移来确保清晰显示。作者提供了代码示例，展示了如何获取柱子信息、计算标签位置以及应用偏移策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先展示一下效果：

整体思路：

通过获取每个标签label的像素位置看是否跟别的标签label有重叠，如果重叠了就在柱子范围内进行位置偏移。

实现步骤：

1.先生成echarts图像，然后获取图像里每个柱子的起始像素位置、高度、宽度。echarts对象里存在属性，可以直接获取到每个柱子bar的信息。如图所示：

对于标签label设置为inside的情况，可以知道标签label的默认位置都是在柱子的中间，所以标签label的像素位置也是能确定的。 ~~为了即使在柱子特别小的情况下也能显示标签label，建议设置柱子的最小高度barMinHeight~~。(堆叠柱状图这个属性有bug，简单柱状图可以使用)

2.遍历标签label像素位置，判断是否重叠。我这里是拿当前的标签label跟之前已经生成好的进行比较。如果标签label重叠，需要对标签label的位置进行调整。echarts 可以对单个data的标签label位置进行偏移调整，如图：

乐观情况就是标签label有合适的位置被找到，但是也存在所有的地方都试过之后都有重叠，这种情况暂时没有处理，只能重叠显示（可以考虑不显示）。

代码实现：

注：我这里是堆叠柱状图，共有三组数据。

主程序：

let color = ['#e58361', '#47982b', '#3dc7f5'];
let pxH = 12;   // 一个数字的像素高度
let radix = 3; // 偏移基数

myChart && myChart.dispose();   // echarts 对象

myChart = echarts.init(document.getElementById('chart'));

// 绘制图表
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisLabel: {
                    interval: 0,
                    rotate: 40
                },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Item1Names',
                type: 'bar',
                stack: 'Ad',
                barMinHeight: 20,
                itemStyle: {
                    normal: {
                        color: