fix(chart): align ECharts components with theme tokens and load the full ECharts ESM bundle

ts_web/elements/00group-chart/dees-chart-radar/component.ts

@@ -8,7 +8,7 @@ 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';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
 
 export interface IRadarIndicator {
   name: string;
@@ -64,7 +64,7 @@ export class DeesChartRadar extends DeesChartEchartsBase {
   }
 
   protected buildOption(): Record<string, any> {
-    const isDark = !this.goBright;
+    const colors = getThemeColors(this.goBright);
     const seriesColors = getEchartsSeriesColors(this.goBright);
 
     const seriesData = this.series.map((s, index) => {
@@ -95,24 +95,22 @@ export class DeesChartRadar extends DeesChartEchartsBase {
         shape: 'polygon',
         splitNumber: 4,
         axisName: {
-          color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 35%)',
+          color: colors.textSecondary,
           fontSize: 11,
         },
         splitArea: {
           areaStyle: {
-            color: isDark
-              ? ['hsl(0 0% 7%)', 'hsl(0 0% 9%)']
-              : ['hsl(0 0% 97%)', 'hsl(0 0% 95%)'],
+            color: [colors.bgTertiary, colors.bgSecondary],
           },
         },
         splitLine: {
           lineStyle: {
-            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
+            color: colors.borderDefault,
           },
         },
         axisLine: {
           lineStyle: {
-            color: isDark ? 'hsl(0 0% 16%)' : 'hsl(0 0% 88%)',
+            color: colors.borderDefault,
           },
         },
       },