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

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

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
 import { demoFunc } from './demo.js';
 import { barStyles } from './styles.js';
 import { renderChartBar } from './template.js';
-import { getEchartsSeriesColors } from '../dees-chart-echarts-theme.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
 
 export interface IBarSeriesItem {
   name: string;
@@ -66,25 +66,25 @@ export class DeesChartBar extends DeesChartEchartsBase {
   }
 
   protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
     const seriesColors = getEchartsSeriesColors(this.goBright);
-    const isDark = !this.goBright;
     const formatter = this.valueFormatter;
 
     const categoryAxis: Record<string, any> = {
       type: 'category',
       data: this.categories,
-      axisLine: { lineStyle: { color: isDark ? 'hsl(0 0% 20%)' : 'hsl(0 0% 85%)' } },
-      axisLabel: { color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 40%)' },
+      axisLine: { lineStyle: { color: colors.borderStrong } },
+      axisLabel: { color: colors.textMuted },
     };
 
     const valueAxis: Record<string, any> = {
       type: 'value',
       axisLine: { show: false },
       axisLabel: {
-        color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 40%)',
+        color: colors.textMuted,
         formatter: (val: number) => formatter(val),
       },
-      splitLine: { lineStyle: { color: isDark ? 'hsl(0 0% 14%)' : 'hsl(0 0% 92%)' } },
+      splitLine: { lineStyle: { color: colors.borderSubtle } },
     };
 
     const seriesData = this.series.map((s, index) => ({