diff --git a/common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json b/common/changes/@visactor/vchart/fix-173-mark-stroke-follow-series_2023-07-12-09-27.json new file mode 100644 index 0000000000..e859c87ca0 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/vchart/src/component/legend/discrete/legend.ts b/packages/vchart/src/component/legend/discrete/legend.ts index 0376230321..37cf732f16 100644 --- a/packages/vchart/src/component/legend/discrete/legend.ts +++ b/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, diff --git a/packages/vchart/src/constant/index.ts b/packages/vchart/src/constant/index.ts index 792df4f110..4809cfa305 100644 --- a/packages/vchart/src/constant/index.ts +++ b/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 } diff --git a/packages/vchart/src/mark/path.ts b/packages/vchart/src/mark/path.ts index 055f32fb3a..ce8dde3eef 100644 --- a/packages/vchart/src/mark/path.ts +++ b/packages/vchart/src/mark/path.ts @@ -13,6 +13,7 @@ export class PathMark extends BaseMark implements IPathMark { protected _getDefaultStyle() { const defaultStyle: IMarkStyle = { ...super._getDefaultStyle(), + lineWidth: 0, path: '' }; return defaultStyle; diff --git a/packages/vchart/src/mark/polygon/polygon.ts b/packages/vchart/src/mark/polygon/polygon.ts index f7e6e6d2ad..53ed45f90b 100644 --- a/packages/vchart/src/mark/polygon/polygon.ts +++ b/packages/vchart/src/mark/polygon/polygon.ts @@ -1,7 +1,7 @@ /* 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; @@ -9,4 +9,12 @@ export type IPolygonMark = IMarkRaw; export class PolygonMark extends BasePolygonMark implements IPolygonMark { static readonly type = MarkTypeEnum.polygon; readonly type = PolygonMark.type; + + protected _getDefaultStyle() { + const defaultStyle: IMarkStyle = { + ...super._getDefaultStyle(), + lineWidth: 0 + }; + return defaultStyle; + } } diff --git a/packages/vchart/src/series/base/base-series.ts b/packages/vchart/src/series/base/base-series.ts index 564d58b6eb..d4bd812c61 100644 --- a/packages/vchart/src/series/base/base-series.ts +++ b/packages/vchart/src/series/base/base-series.ts @@ -690,11 +690,11 @@ export abstract class BaseSeries 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); } }); }