Angular使用Highcharts如何仅在API返回空数据时显示无数据提示

云原生阿岚

2026-9-26

解决方案

问题根因

Highcharts的lang配置属于全局配置项，仅在初始化阶段读取一次，动态修改实例级chartOptions.lang不会生效
初始配置时如果直接设置了noData提示文本，且初始series为空，图表初始化完成后会立即触发无数据提示，等接口返回数据后才会隐藏，就会出现你遇到的提前闪烁问题

修复方案

我们直接用no-data-to-display模块提供的实例方法手动控制提示的显隐即可，无需动态修改lang配置：

首先全局配置无数据提示文本，在导入模块后添加全局配置：

// 原有导入逻辑不变
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
const noData = require("highcharts/modules/no-data-to-display");
noData(Highcharts);
// 新增全局配置，仅需设置一次
Highcharts.setOptions({
  lang: {
    noData: "无可用数据"
  }
});

移除chartOptions中的lang: { noData: "" }配置项，初始无需设置该字段
修改updateChart方法，接口返回数据后手动控制无数据提示的显隐：

updateChart() {
  const self = this;
  setTimeout(() => {
    // 先更新series数据
    self.chartOptions.series = this.data;
    if (this.data.length === 0) {
      // 空数据手动触发无数据提示
      self.chart?.showNoData();
    } else {
      // 有数据手动隐藏提示，同时更新其他配置
      self.chart?.hideNoData();
      self.chartOptions.title = {
        text: "Updated title!"
      };
    }
    self.updateFlag = true;
  }, 1000);
}