echarts 动态字节单位轴，1024进制，B,KB,MB,GB附echarts示例

ezjoke2026-09-21 16:21

echarts 动态字节单位轴，1024进制，B,KB,MB,GB

KB单位图示

MB单位图示

跨单位图示

代码

javascript 复制代码

const propsSeries = [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [11213,24324,5657,4434552,12134,8458,1222],
}]
const maxSplit  = 5
const gb = 1024 * 1024 * 1024;
const mb = 1024 * 1024;
const kb = 1024;
// 打印测试变量
let t = ''
const yByteAxisMax = () => {
    const data = propsSeries.map((s) => s.data.flat().filter((v) => v !== null && v !== undefined));
    const maxVal = Math.max(...data.flat());
    if (!maxVal) return undefined;
    const unitLevel = maxVal / gb > 1 ? gb : maxVal / mb > 1 ? mb : maxVal / kb > 1 ? kb : 1;
    let ceilMax = Math.ceil(maxVal / unitLevel)
    const ceilMaxChar = ceilMax.toString()
    const firstChar = ceilMaxChar.charAt(0)
    // 如57，纵轴最大100；47，纵轴最大50
    if (+firstChar >= 5) {
      ceilMax = Math.pow(10, ceilMaxChar.length)
    } else if (+firstChar >= 2) {
      ceilMax = Math.pow(10, ceilMaxChar.length) / 2
    } else {
    		ceilMax = kb;
    }
    return ceilMax * Number(unitLevel);
};
const maxY = yByteAxisMax()
const yByteAxisInterval = () => {
    if (!maxY) return undefined;
    const interval = maxY / gb > 1 ? gb : maxY / mb > 1 ? mb : maxY / kb > 1 ? kb : 1;
    // 根据maxSplit动设置间隔，如900k不超过1024k不会进位，导致interval为1k会有900个间隔，纵轴看不清
    let scale = 1
    if (maxY / maxSplit > interval) {
      scale = Math.ceil(maxY / maxSplit / interval)
    }
    return interval * scale;
};
const intervalY = yByteAxisInterval()
const formatYUnit = (value) => {
  const gb = 1024 * 1024 * 1024;
  const mb = 1024 * 1024;
  const kb = 1024;

  if (value / gb >= 1) {
    return `${value / gb}Gb`;
  } else if (value / mb >= 1) {
    return `${value / mb}Mb`;
  } else if (value / kb >= 1) {
    return `${value / kb}Kb`;
  } else {
    return `${value}B`;
  }
};
option = {
  title: {
    text: t
  },
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  }],
  yAxis: [{
    type: "value",
    axisLabel: {
      formatter: formatYUnit
    },
    min: 0,
    max: maxY,
    interval: intervalY,
  }],
  series:propsSeries
}

代码是vue的computed写法改的所以有些奇怪，如果你要更好的优化可以提出来一块讨论，可以直接粘贴到echarts柱图示例中查看效果