时间戳

首页 > 解决方案 > echarts获取当前时间窗口

echarts - echarts获取当前时间窗口

问题描述

我目前正在做一个 Angular 项目，我必须在图中显示一些数据。我通过它的 NGXecharts 实现使用 echarts。

我的数据来自一个后端应用程序，该应用程序每 5 分钟扫描一次文件系统并计算添加了多少新文件。所以我每 5 分钟在 db 中保存一个扫描状态

scan date : epoch timestamp, number of new files : number

我们可以很容易地想象，一年之后，这使得大量的记录和数据被显示出来。图表充满了所有这些小样本。

我的 echart 是一个简单的图表，其中 xAxis type='time' 是 y 的实际值。

我想做但不知道怎么做，就是在用户放大（进/出）时捕捉时间窗口（开始：日期，结束：日期）。有了这个和正确配置的阈值，我将能够调用我的后端 API 以在我的数据集中获得或多或少的粒度。

例如，如果图表非常缩小显示几年，我会查询我的 api 要求每月汇总数据。如果窗口显示整月，我会查询每日汇总数据等。

我知道 echarts 有一个有效的 dataZoom 事件，但它提供数据值（y 轴的值）而不是 x 轴的时间值（最小值/最大值）。

{
    type: 'datazoom',
    // percentage of zoom start position, 0 - 100
    start: number
    // percentage of zoom finish position, 0 - 100
    end: number
    // data value of zoom start position; only exists in zoom event of triggered by toolbar
    startValue?: number
    // data value of zoom finish position; only exists in zoom event of triggered by toolbar
    endValue?: number
}

有没有办法获得缩放事件的时间窗口？我知道像 Vis.js/Graph2D 这样的其他一些库在这方面做得很好，但它缺少我需要的 echarts 中的一些其他重要功能。

非常感谢你的帮助。

标签： echartsapache-echartsngx-echarts

解决方案

几天前我有同样的问题，并通过以下步骤解决了我的问题：

  1. 您需要获取图表实例并绑定到chartDataZoom事件
<div
  echarts
  [options]="chartOption"
  (chartInit)="onChartInit($event)"
  (chartDataZoom)="onDataZoom()"
  class="demo-chart">
</div>
  1. 创建这两个函数并访问选项对象中的 dataZoom 开始和结束值。
onChartInit(event: any): void {
  this.echartsInstance = event;
}

onDataZoom(): void {
  const dataZoom = this.echartsInstance.getOption().dataZoom[0];
  console.log(
    dataZoom.startValue, // You may need to format your output. Mine is a date as number.
    dataZoom.endValue
  );
  // Here you can filter your data and update your chart data.
}

一件重要的事情是日期如何存储在选项中，它们被转换为number类型，因此您需要转换回Date格式以按预期显示。

推荐阅读