From 64b2c76cf219ffaf1c0a57411e8d420442165c7c Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Wed, 20 Mar 2024 17:45:57 +0800 Subject: [PATCH 01/10] fix: `lineWidth` is invalid in rect-type-crosshair --- packages/vchart/src/component/crosshair/base.ts | 9 ++------- .../src/theme/builtin/common/component/crosshair.ts | 4 +++- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/vchart/src/component/crosshair/base.ts b/packages/vchart/src/component/crosshair/base.ts index 8e33568761..e7cb245615 100644 --- a/packages/vchart/src/component/crosshair/base.ts +++ b/packages/vchart/src/component/crosshair/base.ts @@ -375,17 +375,12 @@ export abstract class BaseCrossHair ({ type: 'rect', visible: true, style: { + lineWidth: 0, + stroke: { type: 'palette', key: 'markLineStrokeColor' }, fill: { type: 'palette', key: 'axisGridColor' }, opacity: 0.7, - lineDash: [] + lineDash: [2, 3] } } as ICrosshairRectSpec, label: getLabelSpec() From 6b87fbb24664c421c5527939cc0739fbf16d4c3f Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Wed, 20 Mar 2024 17:47:27 +0800 Subject: [PATCH 02/10] chore: update changelog --- .../fix-crosshair-line-width_2024-03-20-09-47.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-crosshair-line-width_2024-03-20-09-47.json diff --git a/common/changes/@visactor/vchart/fix-crosshair-line-width_2024-03-20-09-47.json b/common/changes/@visactor/vchart/fix-crosshair-line-width_2024-03-20-09-47.json new file mode 100644 index 0000000000..c477e705a2 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-crosshair-line-width_2024-03-20-09-47.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: `lineWidth` is invalid in rect-type-crosshair, related #2432", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file From 5cf7bfe5bda01db70698112b46bfaedc39fb63ba Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Wed, 20 Mar 2024 18:41:51 +0800 Subject: [PATCH 03/10] fix: update opacity of crosshair --- .../vchart/src/theme/builtin/common/component/crosshair.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index a52ff2298b..62b3b3e5b2 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -37,8 +37,9 @@ const getBandField = (): ICrosshairCategoryFieldSpec => ({ style: { lineWidth: 0, stroke: { type: 'palette', key: 'markLineStrokeColor' }, + strokeOpacity: 0.7, fill: { type: 'palette', key: 'axisGridColor' }, - opacity: 0.7, + fillOpacity: 0.7, lineDash: [2, 3] } } as ICrosshairRectSpec, @@ -52,8 +53,9 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ visible: true, style: { stroke: { type: 'palette', key: 'markLineStrokeColor' }, + strokeOpacity: 0.7, fill: { type: 'palette', key: 'axisGridColor' }, - opacity: 0.7, + fillOpacity: 0.7, lineDash: [2, 3] } } as ICrosshairLineSpec, From 84259e647c6878ef13407fb553586ffba9dbe475 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Wed, 20 Mar 2024 19:09:34 +0800 Subject: [PATCH 04/10] fix: update opacity of crosshair --- .../src/theme/builtin/common/component/crosshair.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index 62b3b3e5b2..0900750d79 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -35,9 +35,8 @@ const getBandField = (): ICrosshairCategoryFieldSpec => ({ type: 'rect', visible: true, style: { - lineWidth: 0, stroke: { type: 'palette', key: 'markLineStrokeColor' }, - strokeOpacity: 0.7, + strokeOpacity: 0, fill: { type: 'palette', key: 'axisGridColor' }, fillOpacity: 0.7, lineDash: [2, 3] @@ -55,7 +54,7 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ stroke: { type: 'palette', key: 'markLineStrokeColor' }, strokeOpacity: 0.7, fill: { type: 'palette', key: 'axisGridColor' }, - fillOpacity: 0.7, + fillOpacity: 0, lineDash: [2, 3] } } as ICrosshairLineSpec, @@ -65,5 +64,7 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ export const crosshair: ICrosshairTheme = { trigger: 'hover', bandField: getBandField(), - linearField: getLinearField() + linearField: getLinearField(), + categoryField: getBandField(), + valueField: getLinearField() }; From 993d38e6a2a02d7765fb21219b7640bd0e8a3170 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Wed, 20 Mar 2024 19:49:03 +0800 Subject: [PATCH 05/10] fix: update opacity of crosshair --- .../theme/builtin/common/component/crosshair.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index 0900750d79..6949bc534f 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -35,10 +35,10 @@ const getBandField = (): ICrosshairCategoryFieldSpec => ({ type: 'rect', visible: true, style: { - stroke: { type: 'palette', key: 'markLineStrokeColor' }, - strokeOpacity: 0, - fill: { type: 'palette', key: 'axisGridColor' }, - fillOpacity: 0.7, + fill: { type: 'palette', key: 'axisGridColor', a: 0.7 }, + lineWidth: 0, // 默认不显示边线 + // 此处设置 stroke 和 lineDash 是为了用户想要 line 形式的 crosshair 时，可以直接复用颜色和配置 + stroke: { type: 'palette', key: 'markLineStrokeColor', a: 0.7 }, lineDash: [2, 3] } } as ICrosshairRectSpec, @@ -51,11 +51,10 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ type: 'line', visible: true, style: { - stroke: { type: 'palette', key: 'markLineStrokeColor' }, - strokeOpacity: 0.7, - fill: { type: 'palette', key: 'axisGridColor' }, - fillOpacity: 0, - lineDash: [2, 3] + stroke: { type: 'palette', key: 'markLineStrokeColor', a: 0.7 }, + lineDash: [2, 3], + // 此处设置 fill 是为了用户想要 rect 形式的 crosshair 时，可以直接复用颜色 + fill: { type: 'palette', key: 'axisGridColor', a: 0.7 } } } as ICrosshairLineSpec, label: getLabelSpec() From c8c77ba20f8dbda7c094b6747df6239f15371069 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Thu, 21 Mar 2024 15:30:51 +0800 Subject: [PATCH 06/10] fix: update opacity of crosshair --- packages/vchart/src/component/crosshair/base.ts | 9 ++++++++- .../src/theme/builtin/common/component/crosshair.ts | 10 ++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/vchart/src/component/crosshair/base.ts b/packages/vchart/src/component/crosshair/base.ts index e7cb245615..224a615b6f 100644 --- a/packages/vchart/src/component/crosshair/base.ts +++ b/packages/vchart/src/component/crosshair/base.ts @@ -376,11 +376,18 @@ export abstract class BaseCrossHair ({ type: 'rect', visible: true, style: { - fill: { type: 'palette', key: 'axisGridColor', a: 0.7 }, + fill: { type: 'palette', key: 'axisGridColor' }, + opacity: 0.7, lineWidth: 0, // 默认不显示边线 // 此处设置 stroke 和 lineDash 是为了用户想要 line 形式的 crosshair 时，可以直接复用颜色和配置 - stroke: { type: 'palette', key: 'markLineStrokeColor', a: 0.7 }, + stroke: { type: 'palette', key: 'markLineStrokeColor' }, lineDash: [2, 3] } } as ICrosshairRectSpec, @@ -51,10 +52,11 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ type: 'line', visible: true, style: { - stroke: { type: 'palette', key: 'markLineStrokeColor', a: 0.7 }, + stroke: { type: 'palette', key: 'markLineStrokeColor' }, + opacity: 0.7, lineDash: [2, 3], // 此处设置 fill 是为了用户想要 rect 形式的 crosshair 时，可以直接复用颜色 - fill: { type: 'palette', key: 'axisGridColor', a: 0.7 } + fill: { type: 'palette', key: 'axisGridColor' } } } as ICrosshairLineSpec, label: getLabelSpec() From 21e45b4911243d6d4b72146a455b5f56ae44c921 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Fri, 22 Mar 2024 04:34:01 +0800 Subject: [PATCH 07/10] fix: update crosshair theme --- .../vchart/src/theme/builtin/common/component/crosshair.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index 8448c537f8..9a915d3062 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -54,9 +54,7 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ style: { stroke: { type: 'palette', key: 'markLineStrokeColor' }, opacity: 0.7, - lineDash: [2, 3], - // 此处设置 fill 是为了用户想要 rect 形式的 crosshair 时，可以直接复用颜色 - fill: { type: 'palette', key: 'axisGridColor' } + lineDash: [2, 3] } } as ICrosshairLineSpec, label: getLabelSpec() From d0c2b2c876c4f18d0afbb889aecaffd105d266b2 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Fri, 22 Mar 2024 11:33:19 +0800 Subject: [PATCH 08/10] fix: update crosshair theme --- packages/vchart/src/theme/builtin/common/component/crosshair.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index 9a915d3062..17184e7001 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -53,6 +53,7 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ visible: true, style: { stroke: { type: 'palette', key: 'markLineStrokeColor' }, + fill: { type: 'palette', key: 'axisGridColor' }, opacity: 0.7, lineDash: [2, 3] } From 935017f6f740a2b4a95ac3b362699069729d0d77 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Fri, 22 Mar 2024 11:43:35 +0800 Subject: [PATCH 09/10] fix: update crosshair theme --- .../vchart/src/theme/builtin/common/component/crosshair.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index 17184e7001..c5fa241f0d 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -64,7 +64,5 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ export const crosshair: ICrosshairTheme = { trigger: 'hover', bandField: getBandField(), - linearField: getLinearField(), - categoryField: getBandField(), - valueField: getLinearField() + linearField: getLinearField() }; From 8a0bbc2b0a52164b05fdf6d6b1df97339f1590a6 Mon Sep 17 00:00:00 2001 From: Howard Zhang Date: Fri, 22 Mar 2024 16:18:49 +0800 Subject: [PATCH 10/10] fix: update crosshair theme --- packages/vchart/src/theme/builtin/common/component/crosshair.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts index c5fa241f0d..bd407551d7 100644 --- a/packages/vchart/src/theme/builtin/common/component/crosshair.ts +++ b/packages/vchart/src/theme/builtin/common/component/crosshair.ts @@ -53,7 +53,7 @@ const getLinearField = (): ICrosshairValueFieldSpec => ({ visible: true, style: { stroke: { type: 'palette', key: 'markLineStrokeColor' }, - fill: { type: 'palette', key: 'axisGridColor' }, + fill: 'transparent', opacity: 0.7, lineDash: [2, 3] }