ECharts堆叠柱状图数据值差异过大的处理方法咨询

针对数据量级差异极大导致小数值柱状条无法清晰展示的问题，以下是几种实用的调整方案：

一、使用对数刻度 #

对数刻度可以压缩大数值的展示范围，让小数值的柱状条显现出来。需要注意0值无法取对数，所以要把数据中的0替换为极小值（比如0.01），同时配置x轴为对数类型：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {},
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'log',
    logBase: 10, // 使用10为底的对数
    min: 0.01, // 适配替换后的极小值
    axisLabel: {
      formatter: function(value) {
        // 优化刻度可读性，大数值显示为千位/百万位格式
        if (value >= 1000000) {
          return (value / 1000000).toFixed(1) + 'M';
        } else if (value >= 1000) {
          return (value / 1000).toFixed(1) + 'k';
        }
        return value;
      }
    }
  },
  yAxis: {
    type: 'category',
    data: [
      "Activity", "Segment", "Branch", "Filled Contact", "Mailing Contact",
      "Contacted Clients", "Clients with Email", "Clients with Call",
      "Clients with Visit", "Clients with Telegram Response",
      "Clients with Quote", "Clients with Negotiation",
      "Clients with Billing", "Billing vs Potential"
    ]
  },
  series: [
    {
      name: 'Completed',
      color: 'green',
      type: 'bar',
      stack: 'total',
      label: { show: true },
      emphasis: { focus: 'series' },
      data: [
        0.01, 257, 244, 148, 50, 61, 0.01, 43, 0.01, 0.01, 34, 13, 47, 1703515.66
      ]
    },
    {
      name: 'Not Completed',
      color: 'red',
      type: 'bar',
      stack: 'total',
      label: { show: true },
      emphasis: { focus: 'series' },
      data: [
        327, 70, 83, 177, 275, 266, 327, 284, 327, 327, 293, 314, 305, 3298438.39
      ]
    }
  ]
};

二、拆分图表，分离极端类别 #

把数值量级差异极大的「Billing vs Potential」单独拆分出来做独立图表，剩余类别保留原堆叠柱状图，通过ECharts的grid配置在同一个容器中布局两个图表，确保两边数据都清晰：

option = {
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: {},
  // 布局两个图表区域
  grid: [
    { left: '3%', right: '4%', top: '5%', bottom: '55%', containLabel: true },
    { left: '3%', right: '4%', top: '65%', bottom: '5%', containLabel: true }
  ],
  xAxis: [
    { type: 'value', gridIndex: 0 },
    { type: 'value', gridIndex: 1, axisLabel: { formatter: val => (val/1000000).toFixed(1)+'M' } }
  ],
  yAxis: [
    {
      type: 'category',
      gridIndex: 0,
      data: [
        "Activity", "Segment", "Branch", "Filled Contact", "Mailing Contact",
        "Contacted Clients", "Clients with Email", "Clients with Call",
        "Clients with Visit", "Clients with Telegram Response",
        "Clients with Quote", "Clients with Negotiation",
        "Clients with Billing"
      ]
    },
    { type: 'category', gridIndex: 1, data: ["Billing vs Potential"] }
  ],
  series: [
    // 普通类别-Completed
    {
      name: 'Completed', color: 'green', type: 'bar', stack: 'total1',
      label: { show: true }, emphasis: { focus: 'series' },
      xAxisIndex: 0, yAxisIndex: 0,
      data: [0,257,244,148,50,61,0,43,0,0,34,13,47]
    },
    // 普通类别-Not Completed
    {
      name: 'Not Completed', color: 'red', type: 'bar', stack: 'total1',
      label: { show: true }, emphasis: { focus: 'series' },
      xAxisIndex: 0, yAxisIndex: 0,
      data: [327,70,83,177,275,266,327,284,327,327,293,314,305]
    },
    // 极端类别-Completed
    {
      name: 'Completed', color: 'green', type: 'bar', stack: 'total2',
      label: { show: true }, emphasis: { focus: 'series' },
      xAxisIndex: 1, yAxisIndex: 1,
      data: [1703515.66]
    },
    // 极端类别-Not Completed
    {
      name: 'Not Completed', color: 'red', type: 'bar', stack: 'total2',
      label: { show: true }, emphasis: { focus: 'series' },
      xAxisIndex: 1, yAxisIndex: 1,
      data: [3298438.39]
    }
  ]
};

三、转换为百分比展示（仅关注占比时适用） #

如果不需要展示绝对值，只关注每个类别中Completed和Not Completed的占比，可以将数据归一化为百分比，统一数值范围为0-100，小占比部分也能清晰显示：

// 预处理数据，转换为百分比
const completedData = [0,257,244,148,50,61,0,43,0,0,34,13,47,1703515.66];
const notCompletedData = [327,70,83,177,275,266,327,284,327,327,293,314,305,3298438.39];

const completedPercent = completedData.map((val, idx) => {
  const total = val + notCompletedData[idx];
  return total === 0 ? 0 : (val / total * 100).toFixed(2) * 1;
});

const notCompletedPercent = notCompletedData.map((val, idx) => {
  const total = val + completedData[idx];
  return total === 0 ? 0 : (val / total * 100).toFixed(2) * 1;
});

option = {
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: {},
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'value',
    axisLabel: { formatter: '{value}%' } // 显示百分比符号
  },
  yAxis: {
    type: 'category',
    data: [
      "Activity", "Segment", "Branch", "Filled Contact", "Mailing Contact",
      "Contacted Clients", "Clients with Email", "Clients with Call",
      "Clients with Visit", "Clients with Telegram Response",
      "Clients with Quote", "Clients with Negotiation",
      "Clients with Billing", "Billing vs Potential"
    ]
  },
  series: [
    {
      name: 'Completed', color: 'green', type: 'bar', stack: 'total',
      label: { show: true }, emphasis: { focus: 'series' },
      data: completedPercent
    },
    {
      name: 'Not Completed', color: 'red', type: 'bar', stack: 'total',
      label: { show: true }, emphasis: { focus: 'series' },
      data: notCompletedPercent
    }
  ]
};

内容的提问来源于stack exchange，提问作者ikk1