update

2026-04-04 11:05:01 +00:00
parent 4dba14060e
commit ff32470d8a
29 changed files with 1431 additions and 2 deletions
--- a/ts_web/elements/00group-chart/dees-chart-radar/component.ts
+++ b/ts_web/elements/00group-chart/dees-chart-radar/component.ts
@@ -0,0 +1,132 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { radarStyles } from './styles.js';
+import { renderChartRadar } from './template.js';
+import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
+
+export interface IRadarIndicator {
+  name: string;
+  max: number;
+}
+
+export interface IRadarSeriesItem {
+  name: string;
+  values: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-radar': DeesChartRadar;
+  }
+}
+
+@customElement('dees-chart-radar')
+export class DeesChartRadar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor indicators: IRadarIndicator[] = [];
+
+  @property({ type: Array })
+  accessor series: IRadarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor fillArea: boolean = true;
+
+  public static styles = radarStyles;
+
+  public render(): TemplateResult {
+    return renderChartRadar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('indicators') ||
+        changedProperties.has('series') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('fillArea'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const isDark = !this.goBright;
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      return {
+        name: s.name,
+        value: s.values,
+        itemStyle: { color },
+        lineStyle: { color, width: 2 },
+        areaStyle: this.fillArea ? { color, opacity: 0.15 } : undefined,
+        symbol: 'circle',
+        symbolSize: 6,
+      };
+    });
+
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        : { show: false },
+      radar: {
+        indicator: this.indicators.map((ind) => ({
+          name: ind.name,
+          max: ind.max,
+        })),
+        shape: 'polygon',
+        splitNumber: 4,
+        axisName: {
+          color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 35%)',
+          fontSize: 11,
+        },
+        splitArea: {
+          areaStyle: {
+            color: isDark
+              ? ['hsl(0 0% 7%)', 'hsl(0 0% 9%)']
+              : ['hsl(0 0% 97%)', 'hsl(0 0% 95%)'],
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
+          },
+        },
+      },
+      series: [
+        {
+          type: 'radar',
+          data: seriesData,
+          emphasis: {
+            lineStyle: {
+              width: 3,
+            },
+          },
+        },
+      ],
+    };
+  }
+}