使用Vue-echarts在单行中显示事件

Question

有人可以指出我使用 vue-echarts 创建图表的方向吗？

我有一组代表 24 小时内事件的数据。该数据将从 API 中获取，它是一个对象数组，如下所示：

[
  {
    start: "2023-11-01T01:47:09.930Z"
    end: "2023-11-01T02:47:09.930Z"
    duration: 60 // in minutes
  },
  {
    start: "2023-11-01T02:47:09.930Z"
    end: "2023-11-01T02:57:09.930Z"
    duration: 10
  },
  {
    start: "2023-11-01T02:57:09.930Z"
    end: "2023-11-01T03:27:09.930Z"
    duration: 30
  },
  {
    start: "2023-11-01T03:27:09.930Z"
    end: null
    duration: 30
  },

日期之间没有间隙，最新事件的结尾可能为空。

我想创建一个单行图表，其中事件从最旧到最新依次堆叠，x 轴标签显示日期 + 时间。

我按照这个示例echarts堆叠水平条创建了一个条形图，但我无法让标签工作。

如果更容易实现我的目标，我可以尝试使用不同的包。

Answer 1

要在 Vue 表中显示提供的数据（假设您指的是基本表，而不是像 Vuetify 中的

v-data-table

这样的任何特定组件），您可以使用以下代码：

首先，在脚本部分中，定义您提供的数据：

<script>
export default {
  data() {
    return {
      timeEntries: [
        {
          start: "2023-11-01T01:47:09.930Z",
          end: "2023-11-01T02:47:09.930Z",
          duration: 60 // in minutes
        },
        {
          start: "2023-11-01T02:47:09.930Z",
          end: "2023-11-01T02:57:09.930Z",
          duration: 10
        },
        {
          start: "2023-11-01T02:57:09.930Z",
          end: "2023-11-01T03:27:09.930Z",
          duration: 30
        },
        {
          start: "2023-11-01T03:27:09.930Z",
          end: null,
          duration: 30
        },
      ]
    };
  }
};
</script>

然后，在模板部分中，使用表格来显示数据：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Duration (minutes)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in timeEntries" :key="entry.start">
          <td>{{ entry.start }}</td>
          <td>{{ entry.end ? entry.end : 'N/A' }}</td>
          <td>{{ entry.duration }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

这将生成一个包含“开始时间”、“结束时间”和“持续时间”列的表格。表的每一行将显示

timeEntries

数组中的相应值。如果

end

值为

null

，则会在“结束时间”栏中显示“N/A”。