@easy-editor/materials-dashboard-gauge-chart 0.0.2

package/src/component.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
+import * as echarts from 'echarts/core'
+import { GaugeChart } from 'echarts/charts'
+import { TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { EChartsOption } from 'echarts'
+import { DEFAULT_RANGES, type GaugeRange } from './constants'
+import styles from './component.module.css'
+
+// 按需注册 ECharts 组件
+echarts.use([GaugeChart, TooltipComponent, CanvasRenderer])
+
+interface GaugeChartProps {
+  ref?: Ref<HTMLDivElement>
+  value?: number
+  min?: number
+  max?: number
+  unit?: string
+  showScale?: boolean
+  divisions?: number
+  showLabels?: boolean
+  pointerType?: 'needle' | 'triangle' | 'rect'
+  pointerColor?: string
+  ranges?: GaugeRange[]
+  glowEffect?: boolean
+  style?: CSSProperties
+}
+
+const GaugeChartComponent = (props: GaugeChartProps) => {
+  const {
+    ref,
+    value = 0,
+    min = 0,
+    max = 100,
+    unit = '',
+    showScale = true,
+    divisions = 10,
+    showLabels = true,
+    pointerType = 'needle',
+    pointerColor = '#00d4ff',
+    ranges = DEFAULT_RANGES,
+    glowEffect = true,
+    style: externalStyle,
+  } = props
+
+  const chartRef = useRef<HTMLDivElement>(null)
+  const chartInstance = useRef<echarts.ECharts | null>(null)
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return
+    }
+
+    chartInstance.current = echarts.init(chartRef.current)
+
+    // 构建颜色区间
+    const axisLineColors: [number, string][] = ranges.map(range => [(range.to - min) / (max - min), range.color])
+
+    // 指针宽度根据类型调整
+    const pointerWidthMap: Record<string, number> = {
+      needle: 4,
+      triangle: 8,
+      rect: 6,
+    }
+    const pointerWidth = pointerWidthMap[pointerType] ?? 6
+
+    const option: EChartsOption = {
+      backgroundColor: 'transparent',
+      series: [
+        {
+          type: 'gauge',
+          min,
+          max,
+          startAngle: 180,
+          endAngle: 0,
+          center: ['50%', '70%'],
+          radius: '90%',
+          progress: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 20,
+              color: axisLineColors,
+              shadowColor: glowEffect ? 'rgba(0, 212, 255, 0.3)' : 'transparent',
+              shadowBlur: glowEffect ? 10 : 0,
+            },
+          },
+          axisTick: {
+            show: showScale,
+            distance: -25,
+            length: 6,
+            lineStyle: {
+              color: '#8899aa',
+              width: 1,
+            },
+            splitNumber: divisions / 5,
+          },
+          splitLine: {
+            show: showScale,
+            distance: -30,
+            length: 12,
+            lineStyle: {
+              color: '#8899aa',
+              width: 2,
+            },
+          },
+          axisLabel: {
+            show: showLabels,
+            distance: -40,
+            color: '#8899aa',
+            fontSize: 10,
+          },
+          pointer: {
+            show: true,
+            length: '60%',
+            width: pointerWidth,
+            itemStyle: {
+              color: pointerColor,
+              shadowColor: glowEffect ? pointerColor : 'transparent',
+              shadowBlur: glowEffect ? 10 : 0,
+            },
+          },
+          anchor: {
+            show: true,
+            size: 12,
+            itemStyle: {
+              color: pointerColor,
+              shadowColor: glowEffect ? pointerColor : 'transparent',
+              shadowBlur: glowEffect ? 5 : 0,
+            },
+          },
+          title: {
+            show: true,
+            offsetCenter: [0, '30%'],
+            color: '#8899aa',
+            fontSize: 12,
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, '50%'],
+            fontSize: 28,
+            fontWeight: 'bold',
+            color: '#fff',
+            formatter: (val: number) => `${val}${unit}`,
+            textShadowColor: glowEffect ? 'rgba(0, 212, 255, 0.5)' : 'transparent',
+            textShadowBlur: glowEffect ? 10 : 0,
+          },
+          data: [{ value }],
+        },
+      ],
+    }
+
+    chartInstance.current.setOption(option)
+
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstance.current?.resize()
+    })
+    resizeObserver.observe(chartRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      chartInstance.current?.dispose()
+    }
+  }, [value, min, max, unit, showScale, divisions, showLabels, pointerType, pointerColor, ranges, glowEffect])
+
+  const containerStyle: CSSProperties = {
+    width: '100%',
+    height: '100%',
+    ...externalStyle,
+  }
+
+  return (
+    <div className={styles.container} ref={ref} style={containerStyle}>
+      <div className={styles.chart} ref={chartRef} />
+    </div>
+  )
+}
+
+export default GaugeChartComponent

package/src/configure.ts

@@ -0,0 +1,285 @@
+/**
+ * Gauge Chart Configure
+ * 仪表盘组件配置
+ */
+
+import type { Configure } from '@easy-editor/core'
+
+const configure: Configure = {
+  props: [
+    {
+      type: 'group',
+      title: '属性',
+      setter: 'TabSetter',
+      items: [
+        {
+          type: 'group',
+          key: 'config',
+          title: '配置',
+          setter: {
+            componentName: 'CollapseSetter',
+            props: {
+              icon: false,
+            },
+          },
+          items: [
+            // 基础配置
+            {
+              name: 'id',
+              title: 'ID',
+              setter: 'NodeIdSetter',
+              extraProps: {
+                // @ts-expect-error label is not a valid extra prop
+                label: false,
+              },
+            },
+            {
+              name: 'title',
+              title: '标题',
+              setter: 'StringSetter',
+              extraProps: {
+                getValue(target) {
+                  return target.getExtraPropValue('title')
+                },
+                setValue(target, value) {
+                  target.setExtraPropValue('title', value)
+                },
+              },
+            },
+            {
+              type: 'group',
+              title: '基础属性',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'rect',
+                  title: '位置尺寸',
+                  setter: 'RectSetter',
+                  extraProps: {
+                    getValue(target) {
+                      return target.getExtraPropValue('$dashboard.rect')
+                    },
+                    setValue(target, value) {
+                      target.setExtraPropValue('$dashboard.rect', value)
+                    },
+                  },
+                },
+              ],
+            },
+            // 组件配置
+            {
+              type: 'group',
+              title: '数值',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'value',
+                  title: '当前值',
+                  setter: 'NumberSetter',
+                  extraProps: {
+                    defaultValue: 0,
+                  },
+                },
+                {
+                  name: 'min',
+                  title: '最小值',
+                  setter: 'NumberSetter',
+                  extraProps: {
+                    defaultValue: 0,
+                  },
+                },
+                {
+                  name: 'max',
+                  title: '最大值',
+                  setter: 'NumberSetter',
+                  extraProps: {
+                    defaultValue: 100,
+                  },
+                },
+                {
+                  name: 'unit',
+                  title: '单位',
+                  setter: 'StringSetter',
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '数值格式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'valuePrefix',
+                  title: '前缀',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'valueSuffix',
+                  title: '后缀',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'valueDecimals',
+                  title: '小数位数',
+                  setter: {
+                    componentName: 'NumberSetter',
+                    props: {
+                      suffix: '位',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 0,
+                  },
+                },
+                {
+                  name: 'valueSeparator',
+                  title: '千分位分隔',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: false,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '刻度',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'showScale',
+                  title: '显示刻度',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'divisions',
+                  title: '刻度数量',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 2,
+                      max: 20,
+                      step: 1,
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 10,
+                  },
+                },
+                {
+                  name: 'showLabels',
+                  title: '显示刻度值',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '样式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'pointerType',
+                  title: '指针类型',
+                  setter: {
+                    componentName: 'SegmentedSetter',
+                    props: {
+                      options: [
+                        { label: '针形', value: 'needle' },
+                        { label: '三角形', value: 'triangle' },
+                        { label: '矩形', value: 'rect' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'needle',
+                  },
+                },
+                {
+                  name: 'pointerColor',
+                  title: '指针颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: '#ffffff',
+                  },
+                },
+                {
+                  name: 'glowEffect',
+                  title: '发光效果',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: false,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'group',
+          key: 'data',
+          title: '数据',
+          items: [
+            {
+              name: 'dataBinding',
+              title: '数据绑定',
+              setter: 'DataBindingSetter',
+            },
+          ],
+        },
+        {
+          type: 'group',
+          key: 'advanced',
+          title: '高级',
+          items: [
+            {
+              name: 'condition',
+              title: '显隐控制',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+                supportVariable: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  component: {},
+  supports: {},
+  advanced: {},
+}
+
+export default configure

package/src/constants.ts

@@ -0,0 +1,37 @@
+/**
+ * 物料常量配置
+ * 统一管理全局变量名等配置，确保 meta.ts 和 rollup.config.js 使用相同的值
+ */
+
+/**
+ * UMD 全局变量基础名称
+ */
+export const COMPONENT_NAME = 'EasyEditorMaterialsGaugeChart'
+
+/**
+ * 包名
+ */
+export const PACKAGE_NAME = '@easy-editor/materials-dashboard-gauge-chart'
+
+/**
+ * 指针类型
+ */
+export const POINTER_TYPES = ['needle', 'triangle', 'rect'] as const
+
+/**
+ * 颜色区间类型
+ */
+export interface GaugeRange {
+  from: number
+  to: number
+  color: string
+}
+
+/**
+ * 默认颜色区间
+ */
+export const DEFAULT_RANGES: GaugeRange[] = [
+  { from: 0, to: 40, color: '#00ff88' },
+  { from: 40, to: 70, color: '#ffcc00' },
+  { from: 70, to: 100, color: '#ff4444' },
+]

package/src/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * GaugeChart Entry
+ * 仪表盘组件入口
+ */
+
+export { default as component } from './component'
+export { default as meta } from './meta'

package/src/meta.ts

@@ -0,0 +1,23 @@
+import type { ComponentMetadata } from '@easy-editor/core'
+import { MaterialGroup } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
+import configure from './configure'
+import snippets from './snippets'
+import pkg from '../package.json'
+
+const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '仪表盘',
+  group: MaterialGroup.CHART,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}
+
+export default meta

package/src/snippets.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from '@easy-editor/core'
+import { COMPONENT_NAME } from './constants'
+
+const snippets: Snippet[] = [
+  {
+    title: '仪表盘',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        value: 65,
+        min: 0,
+        max: 100,
+        showScale: true,
+        divisions: 10,
+        showLabels: true,
+        pointerType: 'needle',
+        pointerColor: '#ffffff',
+      },
+      $dashboard: {
+        rect: {
+          width: 220,
+          height: 140,
+        },
+      },
+    },
+  },
+  {
+    title: '发光仪表盘',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        value: 78,
+        min: 0,
+        max: 100,
+        unit: '%',
+        showScale: true,
+        divisions: 10,
+        showLabels: true,
+        pointerType: 'needle',
+        pointerColor: '#00ffff',
+        glowEffect: true,
+      },
+      $dashboard: {
+        rect: {
+          width: 220,
+          height: 140,
+        },
+      },
+    },
+  },
+]
+
+export default snippets

package/src/type.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS Modules Type Declarations
+ */
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

package/src/types.ts

@@ -0,0 +1,55 @@
+/**
+ * GaugeChart 类型定义
+ */
+
+import type { CSSProperties, Ref } from 'react'
+
+/**
+ * 颜色区间定义
+ */
+export interface GaugeRange {
+  from: number
+  to: number
+  color: string
+}
+
+/**
+ * GaugeChart 组件属性
+ */
+export interface GaugeChartProps {
+  ref?: Ref<HTMLDivElement>
+  value?: number
+  min?: number
+  max?: number
+  unit?: string
+  showScale?: boolean
+  divisions?: number
+  showLabels?: boolean
+  pointerType?: 'needle' | 'triangle' | 'rect'
+  pointerColor?: string
+  ranges?: GaugeRange[]
+  glowEffect?: boolean
+  style?: CSSProperties
+}
+
+/**
+ * 仪表盘配置参数
+ */
+export interface GaugeConfig {
+  size: number
+  center: number
+  outerRadius: number
+  innerRadius: number
+  scaleRadius: number
+  startAngle: number
+  endAngle: number
+  angleRange: number
+}
+
+/**
+ * 点坐标
+ */
+export interface Point {
+  x: number
+  y: number
+}

package/src/utils.ts

@@ -0,0 +1,57 @@
+/**
+ * GaugeChart SVG 辅助函数
+ */
+
+import type { Point } from './types'
+
+/**
+ * 将角度转换为弧度
+ */
+export const degToRad = (deg: number): number => (deg * Math.PI) / 180
+
+/**
+ * 根据角度计算圆上的点坐标
+ */
+export const polarToCartesian = (cx: number, cy: number, radius: number, angleDeg: number): Point => {
+  const rad = degToRad(angleDeg)
+  return {
+    x: cx + radius * Math.cos(rad),
+    y: cy + radius * Math.sin(rad),
+  }
+}
+
+/**
+ * 生成圆弧路径
+ */
+// biome-ignore lint: 参数过多是数学函数需要
+export const describeArc = (cx: number, cy: number, radius: number, startAngle: number, endAngle: number): string => {
+  const start = polarToCartesian(cx, cy, radius, endAngle)
+  const end = polarToCartesian(cx, cy, radius, startAngle)
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'
+  return ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y].join(' ')
+}
+
+/**
+ * 生成唯一 ID
+ */
+export const generateUniqueId = (prefix: string): string => `${prefix}-${Math.random().toString(36).substr(2, 9)}`
+
+/**
+ * 计算归一化值
+ */
+export const normalizeValue = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max)
+
+/**
+ * 计算值对应的角度
+ */
+// biome-ignore lint: 参数过多是数学函数需要
+export const valueToAngle = (
+  value: number,
+  min: number,
+  max: number,
+  startAngle: number,
+  angleRange: number,
+): number => {
+  const ratio = (value - min) / (max - min)
+  return startAngle - ratio * angleRange
+}