fix: 为interval添加最小高度配置

__tests__/plots/static/alphanbet-interval-min-height-transposed.ts

@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalMinHeightTransposed(): G2Spec {
+  return {
+    type: 'interval',
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: [
+      { genre: 'Sports', sold: 0 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+      encode: {
+          x: "genre",
+          y: "sold",
+          color: "genre"
+      },
+      axis: {
+          x: { animate: false },
+          y: { animate: false }
+      },
+      style: {
+        draggable: true,
+        droppable: true,
+        minHeight: 50
+      }
+  };
+}

__tests__/plots/static/alphanbet-interval-min-height.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalMinHeight(): G2Spec {
+  return {
+    type: 'interval',
+    data: [
+      { genre: 'Sports', sold: 0 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+      encode: {
+          x: "genre",
+          y: "sold",
+          color: "genre"
+      },
+      axis: {
+          x: { animate: false },
+          y: { animate: false }
+      },
+      style: {
+        draggable: true,
+        droppable: true,
+        minHeight: 50
+      }
+  };
+}

__tests__/plots/static/index.ts

@@ -4,6 +4,8 @@ export { alphabetIntervalMaxWidth } from './alphabet-interval-max-width';
 export { alphabetIntervalMinWidth } from './alphabet-interval-min-width';
 export { alphabetIntervalMaxWidthTransposed } from './alphabet-interval-max-width-transposed';
 export { alphabetIntervalMinWidthTransposed } from './alphabet-interval-min-width-transposed';
+export { alphabetIntervalMinHeight } from './alphanbet-interval-min-height'
+export { alphabetIntervalMinHeightTransposed } from './alphanbet-interval-min-height-transposed'
 export { alphabetIntervalTitle } from './alphabet-interval-title';
 export { alphabetIntervalLabelOverflowHide } from './alphabet-interval-label-overflow-hide';
 export { alphabetIntervalLabelContrastReverse } from './alphabet-interval-label-contrast-reverse';

site/docs/spec/mark/interval.zh.md

@@ -63,6 +63,7 @@ chart.render();
 | ---------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------- |
 | minWidth               | 柱子的最小宽度，单位为像素                                                                                       | `number`                                           | `-Infinity`  |
 | maxWidth               | 柱子的最大宽度，单位为像素                                                                                       | `number`                                           | `Infinity`   |
+| minHeight              | 柱子的最小高度，单位为像素                                                                                       | `number`                                           | `-Infinity`   |
 | radius                 | 外层矩形的四个圆角大小                                                                                        | `number` \| `Function<number>`                    | 0         |
 | radiusTopLeft          | 外层左上角的圆角                                                                                              | `number` \| `Function<number>`                    | 0         |
 | radiusTopRight         | 外层右上角的圆角                                                                                              | `number` \| `Function<number>`                    | 0         |

site/examples/general/interval/demo/column-minHeight.ts

@@ -0,0 +1,20 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({ container: 'container' });
+chart.data([
+  { genre: 'Sports', sold: 0 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+]);
+
+chart
+  .interval()
+  .encode('x', 'genre')
+  .encode('y', 'sold')
+  .encode('color', 'genre')
+  .axis({ x: { animate: false }, y: { animate: false } })
+  .style('draggable', true)
+  .style('droppable', true)
+  .style('minHeight', 50);

src/shape/interval/color.ts

@@ -16,6 +16,12 @@ export type ColorOptions = {
    * Maximum width of each interval.
    */
   maxWidth?: number;
+
+  /**
+   * Minimum height of each interval.
+   */
+  minHeight?: number;
+
   [key: string]: any;
 };
 
@@ -40,6 +46,7 @@ export function rect(
     radiusTopRight = radius,
     minWidth = -Infinity,
     maxWidth = Infinity,
+    minHeight = -Infinity,
     ...rest
   } = style;
   if (!isPolar(coordinate) && !isHelix(coordinate)) {
@@ -51,6 +58,7 @@ export function rect(
     // Deal with width or height is negative.
     const absX = width > 0 ? x : x + width;
     const absY = height > 0 ? y : y + height;
+
     const absWidth = Math.abs(width);
     const absHeight = Math.abs(height);
     const finalX = absX + insetLeft;
@@ -59,13 +67,13 @@ export function rect(
     const finalHeight = absHeight - (insetTop + insetBottom);
 
     const clampWidth = tpShape
-      ? finalWidth
+      ? clamp(finalWidth, minHeight, Infinity)
       : clamp(finalWidth, minWidth, maxWidth);
     const clampHeight = tpShape
       ? clamp(finalHeight, minWidth, maxWidth)
-      : finalHeight;
-    const clampX = finalX - (clampWidth - finalWidth) / 2;
-    const clampY = finalY - (clampHeight - finalHeight) / 2;
+      : clamp(finalHeight, minHeight, Infinity);
+    const clampX = tpShape ? finalX : finalX - (clampWidth - finalWidth) / 2;
+    const clampY = tpShape ? finalY - (clampHeight - finalHeight ) / 2 : finalY - (clampHeight - finalHeight);
 
     return select(document.createElement('rect', {}))
       .style('x', clampX)
@@ -145,6 +153,7 @@ export const Color: SC<ColorOptions> = (options, context) => {
       insetTop = inset,
       minWidth,
       maxWidth,
+      minHeight,
       ...rest
     } = style;
     const { color = defaultColor, opacity } = value;
@@ -179,6 +188,7 @@ export const Color: SC<ColorOptions> = (options, context) => {
       insetTop,
       minWidth,
       maxWidth,
+      minHeight
     };
 
     return (

src/shape/interval/rect.ts

@@ -10,6 +10,16 @@ export type RectOptions = {
    * Maximum width of each interval.
    */
   maxWidth?: number;
+
+  /**
+   * Minimum height of each interval.
+   */
+  minHeight?: number;
+
+  /**
+   * Minimum height of each interval.
+   */
+  maxHeight?: number;
 };
 
 /**