fix(axis): fix axis label may have inappropriate precision or take too much unexpected space when alignTicks is enabled

package.json

@@ -59,6 +59,9 @@
     "test:dts": "npm install --prefix ./test/types && node build/testDts.js",
     "test:dts:fast": "node build/testDts.js",
     "mktest": "node test/build/mktest.js",
+    "mktest2": "node test/build/mktest.js --with-inputs-common",
+    "mktest3": "node test/build/mktest.js --with-inputs-all",
+    "mktest:canvas:debug": "node test/build/mktest.js --with-canvas-debug",
     "mktest:help": "node test/build/mktest.js -h",
     "checktype": "tsc --noEmit",
     "checkheader": "node build/checkHeader.js",

src/chart/bar/BarSeries.ts

@@ -37,6 +37,10 @@ import { inheritDefaultOption } from '../../util/component';
 import SeriesData from '../../data/SeriesData';
 import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
 import tokens from '../../visual/tokens';
+import { preparePipelineContext } from '../../util/model';
+import type { Pipeline } from '../../core/Scheduler';
+import type ChartView from '../../view/Chart';
+import { SERIES_TYPE_BAR } from '../../layout/barCommon';
 
 type PolarBarLabelPositionExtra = 'start' | 'insideStart' | 'middle' | 'end' | 'insideEnd';
 export type PolarBarLabelPosition = SeriesLabelOption['position'] | PolarBarLabelPositionExtra;
@@ -94,7 +98,7 @@ export interface BarSeriesOption
 }
 
 class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
-    static type = 'series.bar';
+    static type = 'series.' + SERIES_TYPE_BAR;
     type = BarSeriesModel.type;
 
     static dependencies = ['grid', 'polar'];
@@ -119,16 +123,18 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
     }
 
     /**
-     * @override
+     * @implement
      */
-    getProgressiveThreshold() {
+    __preparePipelineContext(
+        view: ChartView,
+        pipeline: Pick<Pipeline, 'progressiveEnabled' | 'threshold'>
+    ) {
+        const context = preparePipelineContext(this, view, pipeline);
         // Do not support progressive in normal mode.
-        let progressiveThreshold = this.get('progressiveThreshold');
-        const largeThreshold = this.get('largeThreshold');
-        if (largeThreshold > progressiveThreshold) {
-            progressiveThreshold = largeThreshold;
+        if (context.progressiveRender) {
+            context.large = true;
         }
-        return progressiveThreshold;
+        return context;
     }
 
     brushSelector(dataIndex: number, data: SeriesData, selectors: BrushCommonSelectorsForSeries): boolean {

src/chart/bar/BarView.ts

@@ -69,6 +69,8 @@ import {createSectorCalculateTextPosition, SectorTextPosition, setSectorTextRota
 import { saveOldStyle } from '../../animation/basicTransition';
 import Element from 'zrender/src/Element';
 import { getSectorCornerRadius } from '../helper/sectorHelper';
+import { getIncrementalId } from '../../util/model';
+import { SERIES_TYPE_BAR } from '../../layout/barCommon';
 
 const mathMax = Math.max;
 const mathMin = Math.min;
@@ -92,32 +94,10 @@ type RealtimeSortConfig = {
 // Return a number, based on which the ordinal sorted.
 type OrderMapping = (dataIndex: number) => number;
 
-function getClipArea(coord: CoordSysOfBar, data: SeriesData, strictClip?: boolean) {
-    const coordSysClipArea = coord.getArea && coord.getArea();
-    if (isCoordinateSystemType<Cartesian2D>(coord, 'cartesian2d')) {
-        const baseAxis = coord.getBaseAxis();
-        // When boundaryGap is false or using time axis. bar may exceed the grid.
-        // We should not clip this part.
-        // See test/bar2.html
-        if (!strictClip && (baseAxis.type !== 'category' || !baseAxis.onBand)) {
-            const expandWidth = data.getLayout('bandWidth');
-            if (baseAxis.isHorizontal()) {
-                (coordSysClipArea as CartesianCoordArea).x -= expandWidth;
-                (coordSysClipArea as CartesianCoordArea).width += expandWidth * 2;
-            }
-            else {
-                (coordSysClipArea as CartesianCoordArea).y -= expandWidth;
-                (coordSysClipArea as CartesianCoordArea).height += expandWidth * 2;
-            }
-        }
-    }
-
-    return coordSysClipArea as PolarCoordArea | CartesianCoordArea;
-}
 
 class BarView extends ChartView {
-    static type = 'bar' as const;
-    type = BarView.type;
+    static readonly type = SERIES_TYPE_BAR;
+    readonly type = SERIES_TYPE_BAR;
 
     private _data: SeriesData;
 
@@ -172,7 +152,7 @@ class BarView extends ChartView {
     }
 
     incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
-        // Reset
+        // Reset for eachRendered
         this._progressiveEls = [];
         // Do not support progressive in normal mode.
         this._incrementalRenderLarge(params, seriesModel);
@@ -220,12 +200,13 @@ class BarView extends ChartView {
         }
 
         const needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
-        const strictClip = seriesModel.get('clip', true);
-        const coordSysClipArea = getClipArea(coord, data, strictClip);
+        // Both `cartesian2d` and `polar` has `getArea()`.
+        const coordSysClipArea = coord.getArea();
         // If there is clipPath created in large mode. Remove it.
         group.removeClipPath();
         // We don't use clipPath in normal mode because we needs a perfect animation
         // And don't want the label are clipped.
+        // Instead, `Clipper` is used in normal mode.
 
         const roundCap = seriesModel.get('roundCap', true);
 
@@ -695,12 +676,12 @@ class BarView extends ChartView {
 }
 
 interface Clipper {
-    (coordSysBoundingRect: PolarCoordArea | CartesianCoordArea, layout: RectLayout | SectorLayout): boolean
+    (coordSysClipArea: PolarCoordArea | CartesianCoordArea, layout: RectLayout | SectorLayout): boolean
 }
 const clip: {
     [key in 'cartesian2d' | 'polar']: Clipper
 } = {
-    cartesian2d(coordSysBoundingRect: CartesianCoordArea, layout: Rect['shape']) {
+    cartesian2d(coordSysClipArea: CartesianCoordArea, layout: Rect['shape']) {
         const signWidth = layout.width < 0 ? -1 : 1;
         const signHeight = layout.height < 0 ? -1 : 1;
         // Needs positive width and height
@@ -713,11 +694,11 @@ const clip: {
             layout.height = -layout.height;
         }
 
-        const coordSysX2 = coordSysBoundingRect.x + coordSysBoundingRect.width;
-        const coordSysY2 = coordSysBoundingRect.y + coordSysBoundingRect.height;
-        const x = mathMax(layout.x, coordSysBoundingRect.x);
+        const coordSysX2 = coordSysClipArea.x + coordSysClipArea.width;
+        const coordSysY2 = coordSysClipArea.y + coordSysClipArea.height;
+        const x = mathMax(layout.x, coordSysClipArea.x);
         const x2 = mathMin(layout.x + layout.width, coordSysX2);
-        const y = mathMax(layout.y, coordSysBoundingRect.y);
+        const y = mathMax(layout.y, coordSysClipArea.y);
         const y2 = mathMin(layout.y + layout.height, coordSysY2);
 
         const xClipped = x2 < x;
@@ -1168,13 +1149,14 @@ function createLarge(
 
     const backgroundModel = seriesModel.getModel('backgroundStyle');
     const bgPoints = data.getLayout('largeBackgroundPoints');
+    const incrementalId = incremental ? getIncrementalId(seriesModel) : 0;
 
     if (bgPoints) {
         const bgEl = new LargePath({
             shape: {
                 points: bgPoints
             },
-            incremental: !!incremental,
+            incremental: incrementalId,
             silent: true,
             z2: 0
         });
@@ -1189,7 +1171,7 @@ function createLarge(
 
     const el = new LargePath({
         shape: {points: data.getLayout('largePoints')},
-        incremental: !!incremental,
+        incremental: incrementalId,
         ignoreCoarsePointer: true,
         z2: 1
     });
@@ -1198,7 +1180,7 @@ function createLarge(
     el.barWidth = barWidth;
     group.add(el);
     el.useStyle(data.getVisual('style'));
-    // Stroke is rendered first to avoid overlapping with fill
+    // Stroke is rendered first to avoid overlapping with fill. See #20465
     el.style.stroke = null;
     // Enable tooltip and user mouse/touch event handlers.
     getECData(el).seriesIndex = seriesModel.seriesIndex;

src/chart/bar/BaseBarSeries.ts

@@ -33,6 +33,9 @@ import SeriesData from '../../data/SeriesData';
 import {dimPermutations} from '../../component/marker/MarkAreaView';
 import { each } from 'zrender/src/core/util';
 import type Axis2D from '../../coord/cartesian/Axis2D';
+import type Model from '../../model/Model';
+import { CategoryAxisBaseOption } from '../../coord/axisCommonTypes';
+import type Axis from '../../coord/Axis';
 
 
 export interface BaseBarSeriesOption<StateOption, ExtraStateOption extends StatesMixinBase = DefaultStatesMixin>
@@ -106,7 +109,8 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
                     // If axis type is category, use tick coords instead
                     if (axis.type === 'category' && dims != null) {
                         const tickCoords = axis.getTicksCoords();
-                        const alignTicksWithLabel = axis.getTickModel().get('alignWithLabel');
+                        const alignTicksWithLabel = (axis.getTickModel() as Model<CategoryAxisBaseOption['axisTick']>)
+                            .get('alignWithLabel');
 
                         let targetTickId = clampData[idx];
                         // The index of rightmost tick of markArea is 1 larger than x1/y1 index
@@ -186,6 +190,13 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
         return [NaN, NaN];
     }
 
+    /**
+     * @implements
+     */
+    __requireStartValue(axis: Axis): boolean {
+        return this.getBaseAxis() !== axis;
+    }
+
     static defaultOption: BaseBarSeriesOption<unknown, unknown> = {
         // zlevel: 0,
         z: 2,

src/chart/bar/PictorialBarSeries.ts

@@ -33,6 +33,7 @@ import {
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { inheritDefaultOption } from '../../util/component';
 import tokens from '../../visual/tokens';
+import { SERIES_TYPE_PICTORIAL_BAR } from '../../layout/barCommon';
 
 export interface PictorialBarStateOption {
     itemStyle?: ItemStyleOption
@@ -126,7 +127,7 @@ export interface PictorialBarSeriesOption
 }
 
 class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOption> {
-    static type = 'series.pictorialBar';
+    static type = 'series.' + SERIES_TYPE_PICTORIAL_BAR;
     type = PictorialBarSeriesModel.type;
 
     static dependencies = ['grid'];

src/chart/bar/PictorialBarView.ts

@@ -39,6 +39,7 @@ import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import ZRImage from 'zrender/src/graphic/Image';
 import { getECData } from '../../util/innerStore';
 import { createClipPath } from '../helper/createClipPathFromCoordSys';
+import { SERIES_TYPE_PICTORIAL_BAR } from '../../layout/barCommon';
 
 const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
 
@@ -127,8 +128,8 @@ interface PictorialBarElement extends graphic.Group {
 }
 
 class PictorialBarView extends ChartView {
-    static type = 'pictorialBar';
-    readonly type = PictorialBarView.type;
+    static readonly type = SERIES_TYPE_PICTORIAL_BAR;
+    readonly type = SERIES_TYPE_PICTORIAL_BAR;
 
     private _data: SeriesData;
 

src/chart/bar/install.ts

@@ -18,27 +18,33 @@
 */
 
 import { EChartsExtensionInstallRegisters } from '../../extension';
-import * as zrUtil from 'zrender/src/core/util';
-import {layout, createProgressiveLayout} from '../../layout/barGrid';
+import {
+    createCrossSeriesLayoutHandler, createProgressiveLayout, registerBarGridAxisHandlers
+} from '../../layout/barGrid';
 import dataSample from '../../processor/dataSample';
 
 import BarSeries from './BarSeries';
 import BarView from './BarView';
 import CartesianAxisModel from '../../coord/cartesian/AxisModel';
+import { SERIES_TYPE_BAR } from '../../layout/barCommon';
 
 export function install(registers: EChartsExtensionInstallRegisters) {
 
     registers.registerChartView(BarView);
     registers.registerSeriesModel(BarSeries);
 
-    registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));
+    registers.registerLayout(
+        registers.PRIORITY.VISUAL.LAYOUT, createCrossSeriesLayoutHandler(SERIES_TYPE_BAR)
+    );
     // Do layout after other overall layout, which can prepare some information.
-    registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));
+    registers.registerLayout(
+        registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout(SERIES_TYPE_BAR)
+    );
 
     // Down sample after filter
     registers.registerProcessor(
         registers.PRIORITY.PROCESSOR.STATISTIC,
-        dataSample('bar')
+        dataSample(SERIES_TYPE_BAR)
     );
 
     /**
@@ -67,4 +73,5 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         );
     });
 
+    registerBarGridAxisHandlers(registers);
 }

src/chart/bar/installPictorialBar.ts

@@ -20,14 +20,22 @@
 import { EChartsExtensionInstallRegisters } from '../../extension';
 import PictorialBarView from './PictorialBarView';
 import PictorialBarSeriesModel from './PictorialBarSeries';
-import { createProgressiveLayout, layout } from '../../layout/barGrid';
-import { curry } from 'zrender/src/core/util';
+import {
+    createProgressiveLayout, createCrossSeriesLayoutHandler, registerBarGridAxisHandlers
+} from '../../layout/barGrid';
+import { SERIES_TYPE_PICTORIAL_BAR } from '../../layout/barCommon';
 
 export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerChartView(PictorialBarView);
     registers.registerSeriesModel(PictorialBarSeriesModel);
 
-    registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, curry(layout, 'pictorialBar'));
+    registers.registerLayout(
+        registers.PRIORITY.VISUAL.LAYOUT, createCrossSeriesLayoutHandler(SERIES_TYPE_PICTORIAL_BAR)
+    );
     // Do layout after other overall layout, which can prepare some information.
-    registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('pictorialBar'));
+    registers.registerLayout(
+        registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout(SERIES_TYPE_PICTORIAL_BAR)
+    );
+
+    registerBarGridAxisHandlers(registers);
 }

src/chart/boxplot/BoxplotSeries.ts

@@ -65,6 +65,7 @@ export interface BoxplotSeriesOption
     coordinateSystem?: 'cartesian2d'
 
     layout?: LayoutOrient
+    clip?: boolean;
     /**
      * [min, max] can be percent of band width.
      */
@@ -73,9 +74,11 @@ export interface BoxplotSeriesOption
     data?: (BoxplotDataValue | BoxplotDataItemOption)[]
 }
 
+export const SERIES_TYPE_BOXPLOT = 'boxplot';
+
 class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
 
-    static readonly type = 'series.boxplot';
+    static readonly type = 'series.' + SERIES_TYPE_BOXPLOT;
     readonly type = BoxplotSeriesModel.type;
 
     static readonly dependencies = ['xAxis', 'yAxis', 'grid'];
@@ -109,6 +112,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
         legendHoverLink: true,
 
         layout: null,
+        clip: true,
         boxWidth: [7, 50],
 
         itemStyle: {