fix(chart): refine ECharts series styling and legend color handling across bar, donut, and radar charts

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, getThemeColors } from '../dees-chart-echarts-theme.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
 
 export interface IBarSeriesItem {
   name: string;
@@ -87,28 +87,42 @@ export class DeesChartBar extends DeesChartEchartsBase {
       splitLine: { lineStyle: { color: colors.borderSubtle } },
     };
 
-    const seriesData = this.series.map((s, index) => ({
-      name: s.name,
-      type: 'bar' as const,
-      data: s.data,
-      stack: this.stacked ? 'total' : undefined,
-      itemStyle: {
-        color: s.color || seriesColors[index % seriesColors.length],
-        borderRadius: this.stacked ? [0, 0, 0, 0] : this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
-      },
-      barMaxWidth: 40,
-      emphasis: {
+    const fillAlpha = this.goBright ? 0.15 : 0.25;
+    const borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+    const noBorderRadius = [0, 0, 0, 0];
+
+    const legendData: Array<{ name: string; itemStyle: { color: string } }> = [];
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      legendData.push({ name: s.name, itemStyle: { color } });
+      return {
+        name: s.name,
+        type: 'bar' as const,
+        data: s.data,
+        stack: this.stacked ? 'total' : undefined,
         itemStyle: {
-          shadowBlur: 6,
-          shadowColor: 'rgba(0, 0, 0, 0.15)',
+          color: hexToRgba(color, fillAlpha),
+          borderColor: color,
+          borderWidth: 1,
+          borderRadius: this.stacked ? noBorderRadius : borderRadius,
         },
-      },
-    }));
+        barMaxWidth: 40,
+        barGap: '20%',
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color, fillAlpha + 0.15),
+            borderColor: color,
+            borderWidth: 1.5,
+          },
+        },
+      };
+    });
 
     // For stacked bars, round the top corners of the last visible series
     if (this.stacked && seriesData.length > 0) {
       const last = seriesData[seriesData.length - 1];
-      last.itemStyle.borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+      last.itemStyle.borderRadius = borderRadius;
     }
 
     return {
@@ -119,13 +133,15 @@ export class DeesChartBar extends DeesChartEchartsBase {
           const items = Array.isArray(params) ? params : [params];
           let result = `<strong>${items[0].axisValueLabel}</strong><br/>`;
           for (const p of items) {
-            result += `${p.marker} ${p.seriesName}: <strong>${formatter(p.value)}</strong><br/>`;
+            const solidColor = p.borderColor || p.color;
+            const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+            result += `${marker}${p.seriesName}: <strong>${formatter(p.value)}</strong><br/>`;
           }
           return result;
         },
       },
       legend: this.showLegend && this.series.length > 1
-        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10, data: legendData }
         : { show: false },
       grid: {
         left: 16,