Merge pull request #19197 from apache/feat-pictorialBar-clip

feat(pictorialBar): support clip for pictorialBar series

Author: linghaoSu

src/chart/bar/PictorialBarSeries.ts

@@ -119,6 +119,8 @@ export interface PictorialBarSeriesOption
     coordinateSystem?: 'cartesian2d'
 
     data?: (PictorialBarDataItemOption | OptionDataValue | OptionDataValue[])[]
+
+    clip?: boolean
 }
 
 class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOption> {
@@ -150,6 +152,10 @@ class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOptio
 
         barGap: '-100%',      // In most case, overlap is needed.
 
+        // Pictorial bar do not clip by default because in many cases
+        // xAxis and yAxis are not displayed and it's expected not to clip
+        clip: false,
+
         // z can be set in data item, which is z2 actually.
 
         // Disable progressive

src/chart/bar/PictorialBarView.ts

@@ -38,6 +38,7 @@ import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import ZRImage from 'zrender/src/graphic/Image';
 import { getECData } from '../../util/innerStore';
+import { createClipPath } from '../helper/createClipPathFromCoordSys';
 
 const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
 
@@ -214,6 +215,17 @@ class PictorialBarView extends ChartView {
             })
             .execute();
 
+        // Do clipping
+        const clipPath = seriesModel.get('clip', true)
+            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
+            : null;
+        if (clipPath) {
+            group.setClipPath(clipPath);
+        }
+        else {
+            group.removeClipPath();
+        }
+
         this._data = data;
 
         return this.group;
@@ -915,6 +927,7 @@ function updateCommon(
 
     const barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
     const barRect = bar.__pictorialBarRect;
+    barRect.ignoreClip = true;
 
     setLabelStyle(
         barRect, getLabelStatesModels(itemModel),