Apache ECharts数值取整与单位转换问题求助

针对你提出的三个需求，以下是具体的配置修改方案：

1. Y轴数值取整+短格式转换 #

通过yAxis.axisLabel.formatter自定义格式化逻辑，同时实现数值取整和大单位缩写（K/M/B）：

yAxis: {
  type: 'value',
  axisLabel: {
    formatter: function(value) {
      // 先对数值取整
      const intValue = Math.round(value);
      // 按量级转换为短格式
      if (intValue >= 1000000000) {
        return (intValue / 1000000000).toFixed(1) + 'B';
      } else if (intValue >= 1000000) {
        return (intValue / 1000000).toFixed(1) + 'M';
      } else if (intValue >= 1000) {
        return (intValue / 1000).toFixed(1) + 'K';
      } else {
        return intValue.toString();
      }
    }
  }
}

2. X轴单位转换（秒→ms/s） #

通过xAxis.axisLabel.formatter实现根据数值大小切换单位：

xAxis: {
  type: 'category',
  axisTick: {
    show: false
  },
  data: [0.002, 0.004, 0.128, 0.512, 1.0256, 2.0512, 5.1],
  axisLabel: {
    formatter: function(value) {
      const num = parseFloat(value);
      if (num < 1) {
        // 小于1秒转毫秒，保留1位小数
        return (num * 1000).toFixed(1) + 'ms';
      } else {
        // 大于等于1秒保留2位小数，显示为秒
        return num.toFixed(2) + 's';
      }
    }
  }
}

完整配置代码 #

整合以上修改后的完整配置如下：

option = {
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: [0.002, 0.004, 0.128, 0.512, 1.0256, 2.0512, 5.1],
    axisLabel: {
      formatter: function(value) {
        const num = parseFloat(value);
        if (num < 1) {
          return (num * 1000).toFixed(1) + 'ms';
        } else {
          return num.toFixed(2) + 's';
        }
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function(value) {
        const intValue = Math.round(value);
        if (intValue >= 1000000000) {
          return (intValue / 1000000000).toFixed(1) + 'B';
        } else if (intValue >= 1000000) {
          return (intValue / 1000000).toFixed(1) + 'M';
        } else if (intValue >= 1000) {
          return (intValue / 1000).toFixed(1) + 'K';
        } else {
          return intValue.toString();
        }
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // 优化tooltip显示，保留完整数值精度
    formatter: function(params) {
      const xVal = params[0].name;
      const yVal = params[0].value.toLocaleString();
      return `${xVal}<br/>${params[0].seriesName}: ${yVal}`;
    }
  },
  grid: {
    top: '4%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  series: [
    {
      data: [1204546.1235, 200456.315311, 1504561.11, 8046456, 7456456.654, 1146540.6484868432, 134560.1],
      type: 'bar'
    }
  ]
}

额外说明 #

• Y轴的toFixed(1)可按需调整小数位数，若不需要小数，直接用Math.round()处理后拼接单位即可
• X轴的小数精度可根据数据桶需求修改，比如(num * 1000).toFixed(0)可显示整数毫秒
• 新增的tooltip格式化是为了在悬浮时展示完整精度的数值，避免短格式丢失原始数据信息

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