【echarts踩坑记录】为什么第二个Y轴最大值不整洁-CSDN博客

本文链接：https://blog.csdn.net/DecorateCC/article/details/149273376

问题复现示意图：

在这里插入图片描述

今天在用echarts图表的时候，出现了一个小问题。第二个y轴上的最大值显示为1.799999而不是1.8，查阅了资料发现是因为JavaScript中的浮点数精度问题。

在ECharts图表中，当系统需要根据数据自动计算y轴的最大值时，如果数据中包含的最大值接近1.8，JavaScript的浮点数计算可能会产生微小的精度误差，导致最终显示为1.799999而不是精确的1.8。

这是因为JavaScript（和大多数编程语言）使用IEEE 754标准来表示浮点数，这种表示方式在某些十进制数值转换为二进制时会产生微小的舍入误差。

解决方法有以下几种：

1. 在y轴配置中手动设置max属性：

yAxis: [
  {
    // 第一个y轴配置
  },
  {
    type: 'value',
    name: this.yName2,
    max: 1.8, // 手动设置最大值
    // 其他配置...
  }
]

2. 使用ECharts提供的坐标轴标签格式化功能：

yAxis: [
  {
    // 第一个y轴配置
  },
  {
    type: 'value',
    name: this.yName2,
    axisLabel: {
      formatter: function(value) {
        // 对接近整数或特定小数的值进行格式化
        return parseFloat(value).toFixed(1);
      }
    },
    // 其他配置...
  }
]

这个问题是JavaScript浮点数计算的常见现象，不会影响图表的实际功能，只是显示上看起来不够整洁。通过上述方法可以使显示更加规范。

yAxis: [
  {
    // 第一个y轴配置
  },
  {
    type: 'value',
    name: this.yName2,
    max: 1.8, // 手动设置最大值
    // 其他配置...
  }
]

yAxis: [
  {
    // 第一个y轴配置
  },
  {
    type: 'value',
    name: this.yName2,
    axisLabel: {
      formatter: function(value) {
        // 对接近整数或特定小数的值进行格式化
        return parseFloat(value).toFixed(1);
      }
    },
    // 其他配置...
  }
]