如何在Grafana的ECharts中将Unix时间戳转为ZonedDateTime？

原生JavaScript方案（推荐，无依赖） #

不需要引入第三方库，直接用JS原生API就能完成转换，完美避开模块导入报错的问题：

1. 数据处理阶段转换
   在Grafana ECharts面板的自定义数据处理逻辑中，把InfluxDB返回的毫秒时间戳（如1720788623000）直接转换为目标格式：

// 假设data是从InfluxDB获取的原始数据数组
const processedData = data.map(item => {
  // 将毫秒时间戳转为ISO格式字符串
  const formattedTime = new Date(item.timestamp).toISOString();
  return {
    x: formattedTime,
    y: item.value
  };
});

2. X轴配置适配
   在ECharts的X轴配置中，将type设为'time'，让ECharts自动识别时间格式：

xAxis: {
  type: 'time',
  axisLabel: {
    // 如果需要自定义显示格式，也可以在这里用formatter
    formatter: function(value) {
      return new Date(value).toISOString();
    }
  }
}

原生toISOString()方法直接生成的就是你需要的2024-07-12T14:51:01.339Z格式，完全符合需求。

若需使用date-fns-tz的解决方案 #

你遇到的SyntaxError: Cannot use import statement outside a module，是因为Grafana ECharts面板的运行环境不支持ES模块的import语法。可以改用UMD版本的库，通过全局变量调用：

1. 动态加载UMD库
   在面板的自定义JS代码中，先加载date-fns和date-fns-tz的UMD包：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Failed to load ${url}`));
    document.head.appendChild(script);
  });
}

// 加载依赖包
loadScript('https://cdn.jsdelivr.net/npm/date-fns@2.30.0/dist/date-fns.min.js')
  .then(() => loadScript('https://cdn.jsdelivr.net/npm/date-fns-tz@2.0.0/dist/date-fns-tz.min.js'))
  .then(() => {
    // 加载完成后使用全局变量
    const { utcToZonedTime, format } = window.dateFnsTz;
    const timestamp = 1720788623000;
    const date = utcToZonedTime(new Date(timestamp), 'UTC');
    const formattedDate = format(date, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
    // 后续处理逻辑
  });

2. 注意事项

• 确保Grafana所在环境能访问CDN链接；
• 如果面板不支持异步代码，可改用回调方式处理加载逻辑。

总结 #

完全可以实现你需要的时间格式转换，优先推荐原生JS方案，无需额外依赖，简单高效且避免模块兼容问题。

内容的提问来源于stack exchange，提问作者Edwin de Boer