echarts堆叠柱状图，当值过小的时候，柱子里数值重叠的问题解决

echarts堆叠柱状图，当值过小的时候，柱子里数值会重叠，本文是解决这个问题的方案

最近在开发一个看板需求，用到了echarts图表，有个模块是要求用堆叠柱状图来展示，产品要求在柱子中展示数值，大致效果如下，只是参考：

看似很简单，其实在极端情况下数值的展示会出现重叠的情况，比如👇🏻：

很小的数值都重叠到一起了，我解决这个问题的方法如下：
通过barMinHeightecharts的barMinHeight的api来处理，但是堆叠柱状图直接给series的每个item设置barMinHeight只能有一个类型生效，最终解决方案，只是写了个demo，上代码：
直接把下面代码放到echarts里运行就能看到效果

// 原始数据
var rawData1 = [1, 200, 1, 80];
var rawData2 = [2, 40, 60, 30];
var rawData3 = [3, 90, 50, 80];
var rawData4 = [4];
 

// 计算处理后的数据
var processedData1 = calculateProccessedData(rawData1);
var processedData2 = calculateProccessedData(rawData2);
var processedData3 = calculateProccessedData(rawData3);
var processedData4 = calculateProccessedData(rawData4);

function calculateProccessedData(rawData) {
  var minBarHeight = 10;
    return rawData.map(function(val){
        return Math.max(val,minBarHeight);
    });
}

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        getSeriesOption('Series 1', processedData1, rawData1),
        getSeriesOption('Series 2', processedData2, rawData2),
        getSeriesOption('Series 3', processedData3, rawData3),
        getSeriesOption('Series 4', processedData4, rawData4)
    ]
};

function getSeriesOption(name, processedData, rawData) {
    return {
        name: name,
        data: processedData,
        type: 'bar',
        stack: 'total',
        label: {
            show: true,
            position: 'inside',
            formatter: function(params) {
                return rawData[params.dataIndex];
            },
        }
    }
}

最终效果👇🏻：

如果大佬们有其他好的解决方案，评论区留言讨论😁