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

已于 2024-03-21 14:58:03 修改
阅读量2.6k 收藏 12
点赞数 9
文章标签： echarts 前端 javascript
于 2024-03-20 16:49:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69337669/article/details/136878964
版权
本文介绍了如何在ECharts中处理堆叠柱状图中标签的重叠问题，通过检测像素位置并调整标签偏移来确保清晰显示。作者提供了代码示例，展示了如何获取柱子信息、计算标签位置以及应用偏移策略。
摘要由CSDN通过智能技术生成

先展示一下效果：

处理前

处理后

整体思路：

        通过获取每个标签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: color[0]
                    }
                },
                data: []
            }, {
                name: 'Item2Names',
                type: 'bar',
                stack: 'Ad',
                barMinHeight: 20,
                itemStyle: {
                    normal: {
                        color: color[1]
                    }
                },
                data: []
            }, {
                name: 'Item3Names',
                type: 'bar',
                stack: 'Ad',
                barMinHeight: 20,
                itemStyle: {
                    normal: {
                        color: color[2]
                    }
                },
                data: []
            }
        ]
    }

    // pointsTable为数据表，数据结构：
    // {
    //     values: [
    //         {
    //             date: "", 
    //             Item1: 1,
    //             Item2: 2,
    //             Item3: 3,
    //         }
    //     ],
    //     max: 3     // Item1、Item2、Item3 的最大值，用来判断label的最大像素长度
    // }


    option.xAxis[0].data = pointsTable.values.map(i => {  
        return i.date;
    })

    option.series[0].data.length = 0;
    option.series[1].data.length = 0;
    option.series[2].data.length = 0;

    pointsTable.values.forEach(i => {
        option.series[0].data.push(i.Item1);
        option.series[1].data.push(i.Item2);
        option.series[2].data.push(i.Item3);
    })

myChart.setOption(option);  // 先生成图像才能获取到柱子bar的像素信息

let offFlag = false;   // 重叠处理标志位，如果为true说明已经处理过了

myChart.on('finished', () => {
        // 柱状图加载完之后，获取柱子像素信息，然后计算标签位置
        if (offFlag) return;
        let echartPX = getEchartPX(myChart);   // getEchartPX：获取echarts的像素信息
        let offSet = changeLabelPosition(echartPX[0], echartPX[1], myChart, pointsTable.max);    // changeLabelPosition：计算每个标签的偏移量


        // 设置偏移量
        option.series[0].data = option.series[0].data.map((d, i) => {
            return {value: d, label: {normal: {offset: [0, offSet[0][i]]}}}
        })
        option.series[1].data = option.series[1].data.map((d, i) => {
            return {value: d, label: {normal: {offset: [0, offSet[1][i]]}}}
        })
        option.series[2].data = option.series[2].data.map((d, i) => {
            return {value: d, label: {normal: {offset: [0, offSet[2][i]]}}}
        })

        option.label = {
            show: true,
            position: 'inside',
            color: '#000'
        }

        myChart.setOption(option);

        offFlag = true;
    })

getEchartPX方法： 

// 获取整个图表的像素信息
function getEchartPX(chart) {
    let barWidth = -1;    // 柱子宽度
    let barHeights = [];  // 有三个系列，包括了每个柱子的像素信息

    chart._chartsViews.forEach(bars => {  // 获取每一个小serious的bar像素信息
        let barH = []   // 单个系列的柱子像素信息
        bars.group._children.forEach(bar => {  // 每个x对应bar的像素信息
            let shape = bar.shape;
            if (shape) {
                barH.push([shape.x, shape.y, 0 - shape.height])   // 像素信息： [横坐标x, 纵坐标y, 高度height]
                barWidth = shape.width     // 柱子宽度
            }
        })
        barHeights.push(barH)
    })

    return [barWidth, barHeights];
}

 changeLabelPosition方法：

// 调整label位置信息
function changeLabelPosition(barWidth, barHeights, chart, max) {
    let maxPx = max.toString().length * 8  // 数据最长占用像素
    let minSpaceBar = Math.ceil(maxPx * 100 / barWidth)  // 最小不重叠间隔 = 最长数据 / 柱子宽,  向上取整

    // 算当前label的像素位置
    let position = []
    barHeights.forEach(it => {
        let posi = []
        it.forEach(bar => {
            posi.push(bar[1] - bar[2] / 2)
        })
        position.push(posi)
    })

    let offset = [];  // 存储所有的偏移位置

    // 重叠判断
    position.forEach((p, pi) => {   // p : 不同系列
        let off = [0];  // 默认第一个不偏移
        for (let i = 1; i < p.length; i++) {  // 遍历系列内的数据
            let ind = 1,  // 计数器，往前数柱子
                calFlag = true, // f：上移，t：下移
                offVal = 0; // 当前偏移值
            let barH = barHeights[pi][i][2],
                offCount = Math.floor(barH / pxH) // 看当前的柱子可以有多少个偏移值

            while (ind <= minSpaceBar && i - ind >= 0) {   // 跟之前的几个标签判断是否重叠
                if (Math.abs(p[i] + offVal - p[i - ind] - off[i - ind]) < pxH ||    // 跟当前系有重叠
                    (pi === 1 && (Math.abs(p[i] + offVal - position[0][i - ind] - offset[0][i - ind]) < pxH ||  // 跟上一个系有重叠
                        Math.abs(p[i] + offVal - position[0][i + ind] - offset[0][i + ind]) < pxH ||
                        Math.abs(p[i] + offVal - position[0][i] - offset[0][i]) < pxH)) ||  // 跟自己有重叠
                    (pi === 2 && (Math.abs(p[i] + offVal - position[1][i - ind] - offset[1][i - ind]) < pxH ||
                        Math.abs(p[i] + offVal - position[1][i + ind] - offset[1][i + ind]) < pxH ||  // 跟前两个系有重叠
                        Math.abs(p[i] + offVal - position[0][i - ind] - offset[0][i - ind]) < pxH ||
                        Math.abs(p[i] + offVal - position[0][i + ind] - offset[0][i + ind]) < pxH ||
                        Math.abs(p[i] + offVal - position[1][i] - offset[1][i]) < pxH ||    // 跟自己有重叠
                        Math.abs(p[i] + offVal - position[0][i] - offset[0][i]) < pxH))) {

                    // 标签重叠了
                    if (offCount < 1) {
                        // 偏移值太少了，无法偏移
                        break;
                    } else {
                        // 寻找合适的偏移位置
                        offVal += calFlag ? pxH / radix : -pxH / radix;
                        if (p[i] + offVal > barHeights[pi][i][1]) { // 超出柱子下限
                            offVal = -pxH / radix; // 改成向上偏移
                            calFlag = false;
                        }
                        if (p[i] + offVal < (barHeights[pi][i][1] - barH)) { // 超出柱子上限
                            offVal = 0;
                            break;
                        }
                    }
                    ind = 0;
                }
                ind++;
            }
            off.push(offVal);
        }
        offset.push(off)
    })

    // 二次判断，判断当前标签跟前后几个柱子的所有标签看是否重叠，重叠再进行偏移
    // 原因：主要是有部分后面生成的柱子没有多的偏移量，只能让前面的柱子调整位置
    position.forEach((p, pi) => {
        for (let i = 1; i < p.length; i++) {  // 遍历系列内的数据
            let ind = 1,  // 计数器
                calFlag = true, // f：上移，t：下移
                offVal = 0; // 当前偏移值
            let barH = barHeights[pi][i][2],
                offCount = Math.floor(barH / pxH) // 看当前的柱子可以有多少个偏移值

            while (ind < minSpaceBar && i - ind >= 0) {   // 跟之前的几个标签判断是否重叠
                if ((pi === 0 && (Math.abs(p[i] + offset[0][i] + offVal - position[1][i] - offset[1][i]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[2][i] - offset[2][i]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[0][i - ind] - offset[0][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[1][i - ind] - offset[1][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[2][i - ind] - offset[2][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[0][i + ind] - offset[0][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[1][i + ind] - offset[1][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[0][i] + offVal - position[2][i + ind] - offset[2][i + ind]) < pxH
                    ))
                    || (pi === 1 && (Math.abs(p[i] + offset[1][i] + offVal - position[0][i] - offset[0][i]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[2][i] - offset[2][i]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[0][i - ind] - offset[0][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[1][i - ind] - offset[1][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[2][i - ind] - offset[2][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[0][i + ind] - offset[0][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[1][i + ind] - offset[1][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[1][i] + offVal - position[2][i + ind] - offset[2][i + ind]) < pxH))
                    || ((pi === 2 && (Math.abs(p[i] + offset[2][i] + offVal - position[0][i] - offset[0][i]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[1][i] - offset[1][i]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[0][i - ind] - offset[0][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[1][i - ind] - offset[1][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[2][i - ind] - offset[2][i - ind]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[0][i + ind] - offset[0][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[1][i + ind] - offset[1][i + ind]) < pxH ||
                        Math.abs(p[i] + offset[2][i] + offVal - position[2][i + ind] - offset[2][i + ind]) < pxH)))) {
                    // 标签重叠了
                    if (offCount < 1) {
                        // 偏移值太少了，无法偏移
                        break;
                    } else {
                        // 寻找合适的偏移位置
                        offVal += calFlag ? pxH / radix : -pxH / radix;
                        if (p[i] + offset[pi][i] + offVal > barHeights[pi][i][1]) { // 超出柱子下限
                            offVal = -pxH / radix; // 改成向上偏移
                            calFlag = false;
                        }
                        if (p[i] + offset[pi][i] + offVal < (barHeights[pi][i][1] - barH)) { // 超出柱子上限
                            offVal = 0;
                            break;
                        }
                    }
                    ind = 0;
                }
                ind++;
            }
            offset[pi][i] += offVal;
        }
    })

    return offset;
}

支持原创！！
欢迎加入讨论！！！

logo、
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts 折线图 数据点过密，间隔显示数据
学习笔记
03-21 1720
有这样一个图表，显示的数据比较多， 当把 label 显示出来的时候，这些 label 重叠了，我想让它间隔一下。
echarts-折线图与柱状图，图形的标记，堆叠
最新发布
m0_74019046的博客
05-21 1075
如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
echarts柱状图 显示数值重叠_eCharts柱形图label文字过长时会出现重叠问题
weixin_34193397的博客
01-12 7136
eCharts柱形图label文字过长时会出现重叠问题，有没有什么比较好的解决方法如图：已解决，eCharts3有属性可以单独对每根柱子上的数据定义位置，只当判断两个数据要重叠的时候才进行位置的移动http://echarts.baidu.com/opti…可以使用提示框组件tooltip，鼠标移动到柱子上显示一个数值的提示框tooltip补充：或者你可以把柱子横着放试试能不能设置倾斜这个有两种情...
echarts折线图的label标签实现一上一下减少重叠效果
weixin_45711931的博客
12-06 659
【代码】echarts折线图的label标签实现一上一下减少重叠效果。
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
热门推荐
qq_38718629的博客
09-16 3万+
最近公司项目中在使用Echarts绘制图表时，由于默认的label标签不能满足设计稿需求，所以研究了对label标签进行格式化的方案，了解到可以使用formatter内容格式器对标签内容进行调整，formatter支持字符串模板和回调函数两种形式，下面以饼图为例对formatter格式化标签label标签遇到的情况记录如下。
【 echarts 属性详解】
qq_43142023的博客
04-11 6249
数据系列，包括折线图、柱状图、散点图、饼图等，可以设置系列的类型、数据、样式和标注等属性。图例组件，用于展示数据系列的标识和名称，支持点击切换系列的显示状态。: 网格组件右侧位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件顶部位置，同样可以设置为像素值、百分比或预设的字符串值。:网格组件底部位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件左侧位置，可以设置为像素值、百分比或预设的字符串值。: 网格的边框颜色，可以设置为颜色值。: 网格的边框宽度，可以设置为像素值。
echarts使用之label自定义
wulenglinglz的博客
11-03 1万+
echarts饼图label自定义样式 series:[ { label:{ formatter: "{name|{b}}\n{value|{d}%}", rich:{ name:{ fontSize:12, color:"#666" }, value:{ fontSize:18, color:"#5c8ef3" } } } } ]
Echarts中饼状图label标签文本重叠
qq_46344419的博客
07-24 3986
Echarts中饼状图label标签文本重叠
echarts的饼图label标签重叠解决办法
华唐的博客
01-14 1万+
未使用formatter，不使用formatter的情况下label重叠主要是没有设置 第一步：调整文字的显示大小，字越小就越不会重叠 第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互） 第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启，默认是true ，可以不设置，但是不能设置成false） 使用了formatter 使用了formatter的情况下重叠的情况有 这种情况一般是因为在series..
Echarts 柱状图自动刷新数据
11-01
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，适用于多种浏览器环境，且支持移动端。在本案例中，我们将关注如何实现ECharts柱状图的数据自动...
堆叠图_echarts_柱状堆叠图_
09-29
4. 创建配置项：使用JavaScript编写ECharts的配置项，定义图表的类型（如'bar'表示柱状图）、数据、堆叠方式（如'stacked'表示堆叠）以及其他视觉样式和交互选项。 ```javascript var option = { tooltip: { ...
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echarts折线图如何防止label重叠，实现一上一下的效果
超级婷
09-28 1万+
echarts折线图标签不重叠，实现一上一下的效果
Echarts柱状图label优化历程
青春微凉、不悲伤℃
11-30 3155
echarts柱状图label错落显示、立体柱状图
ECharts 实现重叠柱状图
旭东怪的博客
10-12 2万+
1 使用详解 （1）series.z 说明： 折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。 （2）series.barGap 说明： 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。 在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置
echarts柱状图的label设置，动态设置position
yinge0508的博客
12-18 2万+
先看效果：图一： 图二： 数值大于零的在x轴上方，label在柱状图上方，小于零的在x轴下方，label在轴下方；相关代码如下： <template> <div> <ChartTitle :name="config.titleName1" /> <div id="areaRate"></div> <ChartTitle :name="config.titleName2" /> ..
echarts柱状图重叠后显示百分比数据
09-08
要在echarts柱状图重叠后显示百分比数据，可以通过设置`label`属性来实现。在使用echarts时，可以使用以下方法来设置柱状图的标签显示百分比数据： 1. 首先，在`series`中设置柱状图的`label`属性为`show: true`，以显示标签。 2. 然后，设置`formatter`属性为`"{c}%"`，以将标签的内容格式化为百分比数据。 例如，可以使用以下代码来实现： ``` series: [{ type: 'bar', data: [20, 30, 40, 50, 60], label: { show: true, formatter: '{c}%' } }] ``` 在上述代码中，柱状图的数据为`[20, 30, 40, 50, 60]`，通过设置`label`的`formatter`属性为`'{c}%'`，标签将以百分比形式显示在柱状图上。 这样，当柱状图重叠时，每个柱状图上都会显示相应的百分比数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值