feat: 数据元素 marker 背景色支持自定义 (#1560)

antvis · Aug 10, 2022 · c7c4f7d · c7c4f7d
1 parent 7406ce7
commit c7c4f7d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/f2/src/components/tooltip/tooltipView.tsx b/packages/f2/src/components/tooltip/tooltipView.tsx
@@ -14,6 +14,11 @@ const defaultStyle = {
     lineWidth: '2px',
   },
   showTooltipMarker: false,
+  markerBackgroundStyle: {
+    fill: '#CCD6EC',
+    opacity: 0.3,
+    padding: '6px',
+  },
   tooltipMarkerStyle: {
     fill: '#fff',
     lineWidth: '3px',
@@ -87,9 +92,9 @@ function directionEnabled(mode: string, dir: string) {
 }
 
 const RenderItemMarker = (props) => {
-  const { records, coord, context } = props;
+  const { records, coord, context, markerBackgroundStyle } = props;
   const point = coord.convertPoint({ x: 1, y: 1 });
-  const padding = context.px2hd('6px');
+  const padding = context.px2hd(markerBackgroundStyle.padding || '6px');
   const xPoints = [
     ...records.map((record) => record.xMin),
     ...records.map((record) => record.xMax),
@@ -122,8 +127,7 @@ const RenderItemMarker = (props) => {
         y,
         width,
         height,
-        fill: '#CCD6EC',
-        opacity: 0.3,
+        ...markerBackgroundStyle
       }}
     />
   );
@@ -243,6 +247,7 @@ export default class TooltipView extends Component {
       // showTitle,
       // titleStyle,
       showTooltipMarker = defaultStyle.showTooltipMarker,
+      markerBackgroundStyle = defaultStyle.markerBackgroundStyle,
       showItemMarker = defaultStyle.showItemMarker,
       itemMarkerStyle: customItemMarkerStyle,
       nameStyle,
@@ -377,7 +382,7 @@ export default class TooltipView extends Component {
             </group>
           )}
           {showTooltipMarker ? (
-            <RenderItemMarker coord={coord} context={context} records={records} />
+            <RenderItemMarker coord={coord} context={context} records={records} markerBackgroundStyle={markerBackgroundStyle} />
           ) : null}
           {/* 辅助线 */}
           {showCrosshairs ? (

diff --git a/packages/f2/test/chart/__image_snapshots__/landscape-test-tsx-横屏-横屏显示-1-snap.png b/packages/f2/test/chart/__image_snapshots__/landscape-test-tsx-横屏-横屏显示-1-snap.png
diff --git a/packages/f2/test/chart/landscape.test.tsx b/packages/f2/test/chart/landscape.test.tsx
@@ -30,7 +30,7 @@ describe('横屏', () => {
           <Axis field="genre" />
           <Axis field="sold" />
           <Interval x="genre" y="sold" color="genre" />
-          <Tooltip snap showTooltipMarker />
+          <Tooltip snap showTooltipMarker markerBackgroundStyle={{ fill: 'l(90) 0:#ffffff 0.5:#7ec2f3 1:#1890ff', opacity: .3 }} />
         </Chart>
       </Canvas>
     );