fix: change mark default stroke color to the series color

common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: change mark default stroke color to the series color",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/component/legend/discrete/legend.ts

@@ -181,6 +181,7 @@ export class DiscreteLegend extends BaseLegend {
     const originData = (this._legendData.getLatestData() || []).map((datum: any) => {
       const fill = datum.style('fill');
       const stroke = datum.style('stroke');
+      const lineWidth = datum.style('lineWidth');
       const symbolType = datum.style('symbolType');
       const fillOpacity = datum.style('fillOpacity');
       const strokeOpacity = datum.style('strokeOpacity');
@@ -195,7 +196,7 @@ export class DiscreteLegend extends BaseLegend {
         shape: {
           fill,
           symbolType: symbolType ?? datum.shapeType ?? 'circle',
-          stroke: fill === stroke ? null : stroke,
+          stroke: lineWidth === 0 || fill === stroke ? null : stroke,
           fillOpacity: isValidNumber(fillOpacity) ? fillOpacity : 1,
           strokeOpacity: isValidNumber(strokeOpacity) ? strokeOpacity : 1,
           opacity: isValidNumber(opacity) ? opacity : 1,

packages/vchart/src/constant/index.ts

@@ -14,11 +14,12 @@ export enum AttributeLevel {
   Default = 0,
   Theme = 1,
   Chart = 2,
-  Series = 3,
-  Mark = 4,
-  User_Chart = 5,
-  User_Series = 6,
-  User_Mark = 7,
+  Base_Series = 3, // general operation in base series
+  Series = 4, // specified operation in derived series
+  Mark = 5,
+  User_Chart = 6,
+  User_Series = 7,
+  User_Mark = 8,
   Built_In = 99
 }
 

packages/vchart/src/mark/path.ts

@@ -13,6 +13,7 @@ export class PathMark extends BaseMark<IPathMarkSpec> implements IPathMark {
   protected _getDefaultStyle() {
     const defaultStyle: IMarkStyle<IPathMarkSpec> = {
       ...super._getDefaultStyle(),
+      lineWidth: 0,
       path: ''
     };
     return defaultStyle;

packages/vchart/src/mark/polygon/polygon.ts

@@ -1,12 +1,20 @@
 /* eslint-disable no-duplicate-imports */
 import type { IPolygonMarkSpec } from '../../typings/visual';
 import { BasePolygonMark } from './base-polygon';
-import type { IMarkRaw } from '../interface';
+import type { IMarkRaw, IMarkStyle } from '../interface';
 import { MarkTypeEnum } from '../interface';
 
 export type IPolygonMark = IMarkRaw<IPolygonMarkSpec>;
 
 export class PolygonMark extends BasePolygonMark<IPolygonMarkSpec> implements IPolygonMark {
   static readonly type = MarkTypeEnum.polygon;
   readonly type = PolygonMark.type;
+
+  protected _getDefaultStyle() {
+    const defaultStyle: IMarkStyle<IPolygonMarkSpec> = {
+      ...super._getDefaultStyle(),
+      lineWidth: 0
+    };
+    return defaultStyle;
+  }
 }

packages/vchart/src/series/base/base-series.ts

@@ -690,11 +690,11 @@ export abstract class BaseSeries<T extends ISeriesSpec> extends BaseModel implem
     // 此时mark相关的统计数据收集完成
     this._rawDataStatistics?.reRunAllTransform();
     this.setSeriesField(this._spec.seriesField);
-    // set mark stroke color follow fill
+    // set mark stroke color follow series color
     // only set normal state in the level lower than level Series
     this.getMarks().forEach(m => {
-      if (m.stateStyle.normal?.fill?.style) {
-        m.setAttribute('stroke', m.stateStyle.normal.fill.style, 'normal', AttributeLevel.Chart);
+      if (m.stateStyle?.normal?.lineWidth) {
+        m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Base_Series);
       }
     });
   }