我来帮你搞定这个需求——要让TinyArea悬浮时同时显示数值和对应的日期，核心思路是把原始的两个平行数组整合成结构化对象数据，再通过配置Tooltip自定义显示内容。具体步骤如下：

关键修改点 #

1. 合并数值与日期数组为结构化对象（保证索引对应关系）
2. 指定图表的xField和yField字段
3. 自定义Tooltip的显示格式

完整实现代码 #

const DemoTinyArea: React.FC = () => {
  const values = [264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592];
  const dates = ['2021-06-01T00:00:00','2021-07-01T00:00:00', '2021-09-01T00:00:00', '2021-02-01T00:00:00', '2021-03-01T00:00:00', '2021-04-01T00:00:00', '2021-07-01T00:00:00', '2021-01-01T00:00:00', '2021-02-01T00:00:00', '2021-05-01T00:00:00', '2021-08-01T00:00:00', '2021-04-01T00:00:00'];

  // 合并数值与日期为结构化数组，保证索引对应
  const data = values.map((value, index) => ({
    date: dates[index],
    value: value
  }));

  const config = {
    height: 60,
    autoFit: false,
    data: data,
    // 指定横轴（日期）和纵轴（数值）对应的字段
    xField: 'date',
    yField: 'value',
    smooth: true,
    // 自定义Tooltip悬浮显示内容
    tooltip: {
      formatter: (datum) => {
        // 把ISO日期格式转成更友好的显示样式
        const formattedDate = new Date(datum.date).toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        });
        return {
          name: '数据详情',
          value: `${formattedDate}：${datum.value}`
        };
      }
    }
  };

  return <TinyArea {...config} />;
};

代码说明 #

• 数组合并：通过map遍历数值数组，同时取对应索引的日期值，生成包含date和value的对象数组，让图表能识别每一组关联数据。
• 字段指定：因为现在是结构化数据，必须通过xField和yField告诉TinyArea哪个字段对应横轴、哪个对应纵轴。
• Tooltip格式化：利用tooltip.formatter处理每个数据项，将原始的ISO日期转换为用户友好的格式，同时拼接数值，实现悬浮时同时展示两者。

如果不需要格式化日期，直接使用原始字符串的话，可以简化formatter：

formatter: (datum) => ({
  name: '日期',
  value: `${datum.date}：${datum.value}`
})

调整完成后，悬浮图表上的任意点，就能看到对应的日期和数值信息了。

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