Apache HertzBeat监控数据可视化进阶：自定义图表开发-优快云博客

Apache HertzBeat监控数据可视化进阶：自定义图表开发

你是否还在为监控系统中千篇一律的图表展示而烦恼？是否希望能根据业务需求定制专属于自己的监控视图？本文将带你深入Apache HertzBeat(incubating)的可视化体系，通过实际案例演示如何开发自定义图表，让监控数据真正为你所用。读完本文后，你将掌握从图表配置到数据绑定的全流程，能够根据业务需求定制各类监控图表。

可视化框架基础

Apache HertzBeat的前端可视化基于ECharts(Enterprise Charts)构建，这是一个由百度开发的开源可视化库，提供了丰富的图表类型和交互能力。在HertzBeat中，ECharts被封装为组件，方便在不同页面中复用。

核心图表组件位于web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html，其中app-monitor-data-chart是历史数据图表组件，app-monitor-data-table是实时数据表格组件。这些组件通过Angular的依赖注入机制获取监控数据并渲染。

<app-monitor-data-chart
  class="card"
  *ngFor="let item of chartMetrics; let i = index"
  [app]="app"
  [metrics]="item.metrics"
  [metric]="item.metric"
  [unit]="item.unit"
  [monitorId]="monitorId"
></app-monitor-data-chart>

图表配置与主题定制

HertzBeat的图表配置遵循ECharts的Option规范，通过定义主题对象来统一图表样式。在web-app/src/app/routes/dashboard/dashboard.component.ts中可以看到完整的图表配置示例：

this.appsCountTheme = {
  title: {
    text: `{a|${this.i18nSvc.fanyi('dashboard.monitors.title')}}`,
    subtext: `{b|${this.i18nSvc.fanyi('dashboard.monitors.sub-title')}}`,
    left: 'center',
    textStyle: {
      rich: {
        a: {
          fontWeight: 'bolder',
          align: 'center',
          fontSize: 26
        }
      }
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: `{a} <br/>{b} : {c}${this.i18nSvc.fanyi('dashboard.monitors.formatter')}({d}%)`
  },
  series: [
    {
      name: this.i18nSvc.fanyi('dashboard.monitors.total'),
      type: 'pie',
      selectedMode: 'single',
      color: '#3f51b5',
      radius: [0, '30%'],
      label: {
        position: 'center',
        fontSize: 38,
        fontWeight: 'bolder',
        color: '#ffffff',
        formatter: '{c}'
      }
    }
  ]
};

这段代码定义了一个环形饼图，用于展示监控项的分布情况。通过修改series数组中的type属性，可以切换不同的图表类型，如'line'(折线图)、'bar'(柱状图)、'gauge'(仪表盘)等。

自定义图表开发步骤

1. 创建图表组件

首先需要创建一个新的图表组件，继承HertzBeat的基础图表组件。在web-app/src/app/routes/monitor/monitor-detail/目录下创建custom-chart.component.ts文件，实现自定义图表的逻辑。

2. 定义图表配置接口

为了确保类型安全，需要定义图表配置的接口。在web-app/src/app/pojo/目录下创建chart-config.ts，定义图表所需的配置项：

export interface CustomChartConfig {
  title: string;
  type: 'line' | 'bar' | 'pie' | 'gauge';
  metrics: string[];
  timeRange: number; // 时间范围(分钟)
  interval: number; // 采样间隔(秒)
  legend: boolean; // 是否显示图例
  animation: boolean; // 是否开启动画
}

3. 实现数据获取逻辑

在自定义组件中，通过MonitorService获取监控数据。参考web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts中的实现：

loadMetricChart() {
  this.isSpinning = true;
  this.showBasic = false;
  this.whichTabIndex = 1;
  
  const detectStatus$ = this.monitorSvc
    .getWarehouseStorageServerStatus()
    .pipe(
      switchMap((message: Message<any>) => {
        if (message.code == 0) {
          return this.appDefineSvc.getAppDefine(this.app);
        } else {
          return throwError(message.msg);
        }
      })
    )
    .pipe(
      finalize(() => {
        detectStatus$.unsubscribe();
        this.isSpinning = false;
      })
    )
    .subscribe(
      message => {
        if (message.code === 0 && message.data != undefined) {
          // 处理图表数据
          this.processChartData(message.data);
        }
      }
    );
}

4. 数据处理与转换

获取原始数据后，需要将其转换为ECharts所需的格式。创建一个数据处理服务web-app/src/app/service/chart-data.service.ts，实现数据转换逻辑：

processTimeSeriesData(rawData: any[], metric: string): any[] {
  return rawData.map(item => {
    return {
      name: item.timestamp,
      value: [
        item.timestamp, // x轴：时间戳
        item.values[metric] // y轴：指标值
      ]
    };
  });
}

5. 注册与使用自定义图表

开发完成后，需要在模块中注册自定义组件。编辑web-app/src/app/routes/monitor/monitor-detail/monitor-detail.module.ts，添加组件声明：

import { CustomChartComponent } from './custom-chart.component';

@NgModule({
  declarations: [
    MonitorDetailComponent,
    CustomChartComponent
  ],
  // ...
})
export class MonitorDetailModule { }

然后在模板中使用自定义图表组件：

<app-custom-chart
  [config]="customConfig"
  [monitorId]="monitorId"
></app-custom-chart>

高级交互功能实现

HertzBeat支持丰富的图表交互功能，如缩放、平移、数据筛选等。在web-app/src/app/routes/dashboard/dashboard.component.ts中实现了图表的响应式调整：

resizeChart() {
  if (this.appsCountEchartsInstance) {
    this.appsCountEchartsInstance.resize();
  }
  if (this.alertsEchartsInstance) {
    this.alertsEchartsInstance.resize();
  }
  if (this.alertsDealEchartsInstance) {
    this.alertsDealEchartsInstance.resize();
  }
}

还可以实现图表的点击事件，用于下钻分析：

onChartClick(click: any) {
  if (click != undefined) {
    let app = click.data?.app;
    if (app != undefined) {
      this.router.navigate(['/monitors'], { queryParams: { app: app } });
    }
  }
}

最佳实践与性能优化

数据缓存：对于频繁访问的监控数据，使用web-app/src/app/service/cache.service.ts进行缓存，减少请求次数。
懒加载：参考web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts中的实现，使用switchMap和finalize操作符管理数据流，避免内存泄漏。
批量渲染：当图表数量较多时，使用虚拟滚动或分页加载，避免一次性渲染过多DOM元素。
主题统一：通过web-app/src/app/service/theme.service.ts统一管理图表主题，确保整个系统的视觉一致性。

总结与扩展

通过本文的介绍，你已经了解了HertzBeat可视化系统的基本架构和自定义图表的开发流程。HertzBeat的图表系统具有良好的可扩展性，可以根据实际需求开发各种复杂的可视化组件。

官方文档中提供了更多关于图表配置的详细说明，可以参考home/docs/advanced/visualization.md。社区也有许多优秀的自定义图表案例，你可以在hip/目录下找到相关的设计文档和实现方案。

掌握自定义图表开发后，你可以构建更加直观、高效的监控面板，让监控数据成为业务决策的有力支持。无论是实时流量监控、性能趋势分析还是异常检测，都能通过精心设计的可视化图表得到清晰呈现。

最后，欢迎你将自己开发的优秀图表组件贡献给社区，一起完善HertzBeat的可视化能力！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考