syncfusion-react-linear-gauge

用途

Syncfusion React Linear Gauge 用于在线性（水平或垂直）刻度上展示测量值，典型用途包括温度传感器、温度计、燃料指示、KPI 指示器、进度或百分比展示，以及包含多个仪表盘的数据看板。它适合需要将数值以可定制坐标轴、指针、颜色区间和交互动效呈现的应用场景。

主要能力

组件由以下部分组成：

坐标轴（Axes）：线性刻度，可配置最小值、最大值、刻度、标签和样式。
指针（Pointers）：数值指示器，支持 Bar（默认）和 Marker（形状）两种类型；Marker 支持 Circle、Rectangle、Triangle、Diamond、Image、Text 等形状。
范围区间（Ranges）：用不同颜色表示数值区间（如冷、温、热或安全、警告、危险）。
注释（Annotations）：文本或图片叠加层，用于标签和标注。
刻度与标签（Ticks & Labels）：可自定义格式与格式的单位。
导出（Export）：支持打印，以及导出为 PDF、PNG、SVG。

可视化外观支持标题、尺寸（宽高与边距）、背景与边框、主题和配色、响应式设计与 CSS 类定制、RTL 语言支持。交互与高级能力包括动画效果与时长、事件处理（valueChange、print、export 等）、提示框与悬停效果、实时数据绑定与更新、拖拽交互、性能优化建议。

使用方式

先安装包：

npm install @syncfusion/ej2-react-lineargauge --save

再引入组件与指令（LinearGaugeComponent、AxesDirective、AxisDirective、PointersDirective、PointerDirective、RangesDirective、RangeDirective）进行配置。文档提供的最小示例如下：

import React from 'react';
import { LinearGaugeComponent, AxesDirective, AxisDirective, 
         PointersDirective, PointerDirective, RangesDirective, RangeDirective } 
  from '@syncfusion/ej2-react-lineargauge';

export function App() {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <LinearGaugeComponent 
        title="Temperature Monitor"
        orientation="Horizontal"
      >
        <AxesDirective>
          <AxisDirective 
            minimum={0}
            maximum={100}
            labelStyle={{ format: '{value}°C' }}
          >
            <RangesDirective>
              <RangeDirective start={0} end={30} color='#1E90FF' />
              <RangeDirective start={30} end={70} color='#FFA500' />
              <RangeDirective start={70} end={100} color='#FF4500' />
            </RangesDirective>
            
            <PointersDirective>
              <PointerDirective value={55} />
            </PointersDirective>
          </AxisDirective>
        </AxesDirective>
      </LinearGaugeComponent>
    </div>
  );
}

常用 API（经官方文档核对）：

LinearGaugeComponent：title（字符串）、orientation（"Horizontal" | "Vertical"）、width、height。
AxisDirective：minimum、maximum、labelStyle（可用 format，如 '{value}°C'、'${value}K'、'{value}%'）。文档明确指出 majorTicksInterval、minorTicksInterval、axisLineStyle 并非有效属性。
PointerDirective：value、color、type（"Bar" | "Marker"）、markerType、width。
RangeDirective：start、end、color、startWidth、endWidth。

方法包括：destroy()、export(type, fileName, orientation?, allowDownload?)、print(id?)、setAnnotationValue(annotationIndex, content, axisValue?)、setPointerValue(axisIndex, pointerIndex, value)。事件包括：load、loaded、resized、valueChange、dragStart、dragMove、dragEnd、beforePrint、tooltipRender、animationComplete、annotationRender、axisLabelRender、gaugeMouseDown、gaugeMouseMove、gaugeMouseUp、gaugeMouseLeave。

适用场景

温度监控：实时温度与冷热指示。
传感器数据可视化：压力、湿度等读数。
性能指标：系统性能、CPU 使用率、内存。
进度指示：任务完成度或下载进度。
燃料/电量：资源消耗监控。
速度/RPM：转速或速度显示。
网络流量：实时带宽使用。
质量/评分：评级或质量指标。

限制

资料未提供组件的收费方式、价格、授权模式、支持的浏览器范围或性能上限；这些信息暂未提供。文档提示部分属性不被支持（majorTicksInterval、minorTicksInterval、axisLineStyle），使用时应避免。

技能介绍

用途

主要能力

使用方式

适用场景

限制