Merge pull request #2433 from VisActor/fix/crosshair-line-width

fix: `lineWidth` is invalid in rect-type-crosshair
VisActor · Mar 22, 2024 · aeaf0f9 · aeaf0f9
2 parents 86fe405 + 8a0bbc2
commit aeaf0f9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
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
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: `lineWidth` is invalid in rect-type-crosshair, related #2432",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/src/component/crosshair/base.ts b/packages/vchart/src/component/crosshair/base.ts
@@ -375,10 +375,12 @@ export abstract class BaseCrossHair<T extends ICartesianCrosshairSpec | IPolarCr
       hair.style = { visible: false };
     } else {
       const style = line.style || {};
-      const { strokeOpacity, fillOpacity, opacity, stroke, fill, lineWidth, ...restStyle } = style as any;
+      const { stroke, fill, lineWidth } = style as any;
+      const { strokeOpacity, fillOpacity, opacity, ...restStyle } = style as any;
       const isLineType = hair.type === 'line';
       let finalOpacity = isLineType ? strokeOpacity : fillOpacity;
       if (isNumber(opacity)) {
+        // FIXME: 之前的兼容逻辑，去掉可能会影响现有 crosshair 的展示效果
         finalOpacity = (finalOpacity ?? 1) * opacity;
       }
       hair.style = {

diff --git a/packages/vchart/src/theme/builtin/common/component/crosshair.ts b/packages/vchart/src/theme/builtin/common/component/crosshair.ts
@@ -37,7 +37,10 @@ const getBandField = (): ICrosshairCategoryFieldSpec => ({
     style: {
       fill: { type: 'palette', key: 'axisGridColor' },
       opacity: 0.7,
-      lineDash: []
+      lineWidth: 0, // 默认不显示边线
+      // 此处设置 stroke 和 lineDash 是为了用户想要 line 形式的 crosshair 时，可以直接复用颜色和配置
+      stroke: { type: 'palette', key: 'markLineStrokeColor' },
+      lineDash: [2, 3]
     }
   } as ICrosshairRectSpec,
   label: getLabelSpec()
@@ -50,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]
     }