ECharts实现数据超出Y轴最大值max但不隐藏

作者：橙子时间：2026-10-25 22:32:47浏览：515

本文介绍在ECharts中如何设置Y轴最大值（max）以限制刻度显示范围，同时通过series配置中的value和realValue属性结合tooltip的formatter回调，使超出部分的数据在图表上被截断但提示框仍能显示原始数值，解决数据隐藏问题。

需求

Y轴必须设定最大值，折线图数据可能超过该值，但要求刻度显示在最大值位置，而提示框显示原始数值。

如下图：

先翻翻文档

yAxis

Y轴配置项多达三十余项，重点关注数值范围限制相关属性。

min：设置y轴刻度最小值，默认小于等于所有数据最小值，手动设置后小于该值的部分不予显示。
max：设置y轴刻度最大值，默认大于等于所有数据最大值，手动设置后大于该值的部分不予显示。
splitNumber：刻度数量，仅适用于value数值类型数据。
minInterval：自动计算坐标轴最小间隔大小，仅在数值轴或时间轴（'value'或'time'）中有效。
maxInterval：自动计算坐标轴最大间隔大小，仅在数值轴或时间轴（'value'或'time'）中有效。
interval：强制设置坐标轴分割间隔。

splitNumber与interval为相对概念，通常设置其中一个或不设置即可。

依据产品团队提出的具体需求，必须配置 max 参数。然而，一旦设定该参数，超出最大值的数据部分将无法显示。经全面排查 Y 轴相关配置项，均未发现可行的解决方案，导致问题无法解决。

此时效果如下，超出部分直接显示为被截断

既然y轴无解，尝试从series配置入手，即折线图部分。

series.Line

配置项众多，需仔细查阅。

与数据显示相关的属性主要有以下几个：

data：显示内容的基础，注意以下几点：

当某个数据是 -、null 或者 undefined 时，该处对应的图元素会消失，折线图会断开
当使用的是value或者log类数据时，可以使用字符串形式的数字（当然这个字符串必须可以被Number正常转化）
当使用的是value或者log类数据时，不仅可以使用number和string，也可以使用对象元素，但其中必须有一个value属性指定一个具体数值用来在图表上显示

yAxisIndex与xAxisIndex：用来指定对应的坐标轴

label：每项数据的数值在图表上的显示，对象形式的配置项，内部包含一个formatter配置用来进行转换
emphasis：折线图数据高亮状态（被选中状态/鼠标hover状态）下的显示配置，内部也包含与外部相同label、itemStyle等配置
tooltip：当前系列特定的tooltip的显示配置，内部包含两个数据处理配置：formatter和valueFormatter

与显示相关最重要的是formatter和valueFormatter。valueFormatter是以当前值为参数的回调函数，返回字符串；formatter是字符串模板或函数形式。

关于formatter的具体说明可以看文档tooltip.formatter，函数说明实在是太多了，不太好总结。

解决方案

文档阅读后产生新思路。

将原始data数组转换为特殊对象数组，用value属性控制显示不超过y轴max值，用realValue属性保存原始值，再通过tooltip的formatter转换显示。

首先处理原始数值数组。

const reallyData = [2.0, 18.2, 3.3, 4.5, 16.3, 10.2, 20.3]
const formatData = reallyData.map(realValue => ({value: realValue >= 15 ? 15 : realValue, realValue }))

然后处理显示配置。

series.line.tooltip中配置的formatter仅在tooltip.trigger为item时有效，不满足场景，故需在外部tooltip中配置，两者配置项相同。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    crossStyle: {
      color: '#999'
    }
  },
  formatter(params) {
    return params.reduce((res, item, index) => {
      if (index === 0) {
        res += `${item.axisValue}
`
      }
      if (item.seriesName === 'Temperature') {
        res += `${item.marker + item.seriesName + item.data.realValue} ℃
`
      } else {
        res += `${item.marker + item.seriesName + item.data} ml
`
      }
      return res
    }, '')
  }
}

因有多个数据，需判断数据标识，即series中每个数据项配置的name字段，可通过seriesName获取。其中的marker是本身的图例显示节点。

当匹配到需处理的数据项时，通过手动设置所需值来回显，最后返回字符串或DOM结构。

完整代码

  var dom = document.getElementById('chart-container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  var app = {};

  var option;

  const testData = [2.0, 18.2, 3.3, 4.5, 16.3, 10.2, 20.3].map(num => ({value: num >= 15 ? 15 : num, num }))

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter(params) {
        console.log(params);
        return params.reduce((res, item, index) => {
          if (index === 0) {
            res += `${item.axisValue}
`
          }
          if (item.seriesName === 'Temperature') {
            res += `${item.marker + item.seriesName + item.data.num} ℃
`
          } else {
            res += `${item.marker + item.seriesName + item.data} ml
`
          }
          return res
        }, '')
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 15,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        data: testData
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  console.log(testData);

  window.addEventListener('resize', myChart.resize);

以上就是ECharts实现数据超出Y轴最大值max但不隐藏的详细内容，更多关于ECharts数据超出Y轴最大值不隐藏的资料请关注本站其它相关文章！

作者最新文章

JS脚本在App中运行报错怎么解决

2026-11-04 23:11:03

JS怎么使用padStart方法给数字补零

2026-11-04 11:12:03

JS是什么意思？JavaScript全称及基本定义

2026-11-04 08:05:29

JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项

2026-11-03 18:34:57

JS字符串转整数：parseInt与Number的区别及用法

2026-11-03 17:26:54