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

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

@@ -8,7 +8,7 @@ import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
 import { demoFunc } from './demo.js';
 import { donutStyles } from './styles.js';
 import { renderChartDonut } from './template.js';
-import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+import { getEchartsSeriesColors, getThemeColors, hexToRgba } from '../dees-chart-echarts-theme.js';
 
 export interface IDonutDataItem {
   name: string;
@@ -62,13 +62,32 @@ export class DeesChartDonut extends DeesChartEchartsBase {
   }
 
   protected buildOption(): Record<string, any> {
-    const colors = getThemeColors(this.goBright);
+    const themeColors = getThemeColors(this.goBright);
     const seriesColors = getEchartsSeriesColors(this.goBright);
-    const data = this.data.map((item, index) => ({
-      name: item.name,
-      value: item.value,
-      itemStyle: item.color ? { color: item.color } : { color: seriesColors[index % seriesColors.length] },
-    }));
+    const fillAlpha = this.goBright ? 0.15 : 0.2;
+
+    const legendData: Array<{ name: string; itemStyle: { color: string } }> = [];
+
+    const data = this.data.map((item, index) => {
+      const color = item.color || seriesColors[index % seriesColors.length];
+      legendData.push({ name: item.name, itemStyle: { color } });
+      return {
+        name: item.name,
+        value: item.value,
+        itemStyle: {
+          color: hexToRgba(color, fillAlpha),
+          borderColor: color,
+          borderWidth: 1,
+        },
+        emphasis: {
+          itemStyle: {
+            color: hexToRgba(color, fillAlpha + 0.15),
+            borderColor: color,
+            borderWidth: 1.5,
+          },
+        },
+      };
+    });
 
     const formatter = this.valueFormatter;
 
@@ -76,7 +95,9 @@ export class DeesChartDonut extends DeesChartEchartsBase {
       tooltip: {
         trigger: 'item',
         formatter: (params: any) => {
-          return `${params.marker} ${params.name}: <strong>${formatter(params.value)}</strong> (${params.percent}%)`;
+          const solidColor = params.data?.itemStyle?.borderColor || params.color;
+          const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${solidColor};"></span>`;
+          return `${marker}${params.name}: <strong>${formatter(params.value)}</strong> (${params.percent}%)`;
         },
       },
       legend: this.showLegend
@@ -87,6 +108,7 @@ export class DeesChartDonut extends DeesChartEchartsBase {
             itemWidth: 10,
             itemHeight: 10,
             itemGap: 12,
+            data: legendData,
             formatter: (name: string) => {
               const item = this.data.find((d) => d.name === name);
               return item ? `${name}  ${formatter(item.value)}` : name;
@@ -99,31 +121,19 @@ export class DeesChartDonut extends DeesChartEchartsBase {
           radius: [this.innerRadiusPercent, '85%'],
           center: this.showLegend ? ['35%', '50%'] : ['50%', '50%'],
           avoidLabelOverlap: true,
+          padAngle: 2,
           itemStyle: {
             borderRadius: 4,
-            borderColor: 'transparent',
-            borderWidth: 2,
           },
           label: this.showLabels
             ? {
                 show: true,
                 formatter: '{b}: {d}%',
                 fontSize: 11,
-                color: colors.textSecondary,
+                color: themeColors.textSecondary,
                 textBorderColor: 'transparent',
               }
             : { show: false },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-            },
-            label: {
-              show: true,
-              fontWeight: 'bold',
-            },
-          },
           data,
         },
       ],

ts_web/elements/00group-chart/dees-chart-donut/styles.ts

@@ -7,5 +7,8 @@ export const donutStyles = [
     :host {
       height: 360px;
     }
+    .chartContainer {
+      inset: 12px 0;
+    }
   `,
 ];