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

package/rollup.config.js

@@ -0,0 +1,212 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import postcss from 'rollup-plugin-postcss'
+import pkg from './package.json' with { type: 'json' }
+
+const GLOBAL_NAME = 'EasyEditorMaterialsTechRadarChart'
+
+// 外部依赖（不打包进组件）
+const external = ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+  '@easy-editor/core': 'EasyEditorCore',
+}
+
+const plugins = [
+  nodeResolve({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  }),
+  commonjs(),
+  json(),
+  postcss({
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+    autoModules: true,
+    minimize: true,
+    inject: true,
+  }),
+  babel({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-typescript',
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+  }),
+  cleanup({
+    comments: ['some', /PURE/],
+    extensions: ['.js', '.ts'],
+  }),
+]
+
+export default [
+  /* ---------------------------------- 元数据构建 --------------------------------- */
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (meta, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (meta) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (meta, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 组件构建 ---------------------------------- */
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (component, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (component) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (component, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 完整构建 ---------------------------------- */
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-tech-radar-chart v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 20, 40, 0.9) 0%,
+    rgba(0, 10, 20, 0.95) 100%
+  );
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}

package/src/component.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
+import * as echarts from 'echarts/core'
+import { RadarChart } from 'echarts/charts'
+import { TooltipComponent, LegendComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { EChartsOption } from 'echarts'
+import { DEFAULT_DATA, DEFAULT_SERIES, type RadarDataPoint } from './constants'
+import styles from './component.module.css'
+
+// 按需注册 ECharts 组件
+echarts.use([RadarChart, TooltipComponent, LegendComponent, CanvasRenderer])
+
+interface RadarSeries {
+  name: string
+  dataKey: string
+  color: string
+}
+
+interface RadarChartProps {
+  ref?: Ref<HTMLDivElement>
+  data?: RadarDataPoint[]
+  dimensionKey?: string
+  series?: RadarSeries[]
+  showGrid?: boolean
+  fillOpacity?: number
+  glowEffect?: boolean
+  showLegend?: boolean
+  showTooltip?: boolean
+  style?: CSSProperties
+}
+
+// 构建图表配置
+const buildOption = (
+  data: RadarDataPoint[],
+  dimensionKey: string,
+  series: RadarSeries[],
+  options: {
+    showGrid: boolean
+    fillOpacity: number
+    glowEffect: boolean
+    showLegend: boolean
+    showTooltip: boolean
+  },
+): EChartsOption => {
+  const { showGrid, fillOpacity, glowEffect, showLegend, showTooltip } = options
+
+  // 提取维度名称
+  const indicators = data.map(item => ({
+    name: item[dimensionKey] as string,
+    max: 100,
+  }))
+
+  // 构建 series 数据
+  const seriesData = series.map(s => ({
+    name: s.name,
+    value: data.map(item => item[s.dataKey] as number),
+    itemStyle: {
+      color: s.color,
+      shadowColor: glowEffect ? s.color : 'transparent',
+      shadowBlur: glowEffect ? 10 : 0,
+    },
+    lineStyle: {
+      color: s.color,
+      width: 2,
+      shadowColor: glowEffect ? s.color : 'transparent',
+      shadowBlur: glowEffect ? 10 : 0,
+    },
+    areaStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: `${s.color}${Math.round(fillOpacity * 255)
+            .toString(16)
+            .padStart(2, '0')}`,
+        },
+        { offset: 1, color: `${s.color}10` },
+      ]),
+    },
+  }))
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: showTooltip
+      ? {
+          trigger: 'item',
+          backgroundColor: 'rgba(0, 20, 40, 0.9)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+          },
+        }
+      : undefined,
+    legend: showLegend
+      ? {
+          show: true,
+          bottom: 10,
+          textStyle: {
+            color: '#8899aa',
+            fontSize: 11,
+          },
+        }
+      : undefined,
+    radar: {
+      indicator: indicators,
+      shape: 'polygon',
+      splitNumber: 5,
+      axisName: {
+        color: '#8899aa',
+        fontSize: 11,
+      },
+      splitLine: {
+        show: showGrid,
+        lineStyle: {
+          color: '#1a3a5c',
+          opacity: 0.6,
+        },
+      },
+      splitArea: {
+        show: false,
+      },
+      axisLine: {
+        show: showGrid,
+        lineStyle: {
+          color: '#1a3a5c',
+          opacity: 0.6,
+        },
+      },
+    },
+    series: [
+      {
+        type: 'radar',
+        data: seriesData,
+        symbol: 'circle',
+        symbolSize: 6,
+      },
+    ],
+  }
+}
+
+const RadarChartComponent = (props: RadarChartProps) => {
+  const {
+    ref,
+    data = DEFAULT_DATA,
+    dimensionKey = 'dimension',
+    series = DEFAULT_SERIES,
+    showGrid = true,
+    fillOpacity = 0.3,
+    glowEffect = true,
+    showLegend = true,
+    showTooltip = 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 option = buildOption(data, dimensionKey, series, {
+      showGrid,
+      fillOpacity,
+      glowEffect,
+      showLegend,
+      showTooltip,
+    })
+
+    chartInstance.current.setOption(option)
+
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstance.current?.resize()
+    })
+    resizeObserver.observe(chartRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      chartInstance.current?.dispose()
+    }
+  }, [data, dimensionKey, series, showGrid, fillOpacity, glowEffect, showLegend, showTooltip])
+
+  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 RadarChartComponent

package/src/configure.ts

@@ -0,0 +1,247 @@
+/**
+ * Radar 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: 'data',
+                  title: '数据',
+                  setter: 'JsonSetter',
+                },
+                {
+                  name: 'dimensionKey',
+                  title: '维度字段',
+                  setter: 'StringSetter',
+                  extraProps: {
+                    defaultValue: 'dimension',
+                  },
+                },
+                {
+                  name: 'series',
+                  title: '系列',
+                  setter: 'JsonSetter',
+                },
+              ],
+            },
+            {
+              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,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '样式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'showGrid',
+                  title: '显示网格',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'fillOpacity',
+                  title: '填充透明度',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 0.3,
+                  },
+                },
+                {
+                  name: 'showLegend',
+                  title: '显示图例',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'legendPosition',
+                  title: '图例位置',
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { label: '顶部', value: 'top' },
+                        { label: '底部', value: 'bottom' },
+                        { label: '左侧', value: 'left' },
+                        { label: '右侧', value: 'right' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'bottom',
+                  },
+                },
+                {
+                  name: 'glowEffect',
+                  title: '发光效果',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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