feat(WIP): axis with break

src/component/axis/AxisBuilder.ts

@@ -36,6 +36,7 @@
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import OrdinalScale from '../../scale/Ordinal';
 import { prepareLayoutList, hideOverlap } from '../../label/labelLayoutHelper';
+import ExtensionAPI from '../../core/ExtensionAPI';
 
 const PI = Math.PI;
 
@@ -50,6 +51,8 @@
     value?: string | number
     dataIndex?: number
     tickIndex?: number
+    breakStart?: number
+    breakEnd?: number
 } & {
     [key in AxisIndexKey]?: number
 };
@@ -133,9 +136,14 @@
     readonly group = new graphic.Group();
 
     private _transformGroup: graphic.Group;
+    private _api: ExtensionAPI;
 
-    constructor(axisModel: AxisBaseModel, opt?: AxisBuilderCfg) {
-
+    constructor(
+        axisModel: AxisBaseModel,
+        api: ExtensionAPI,
+        opt?: AxisBuilderCfg
+    ) {
+        this._api = api;
         this.opt = opt;
 
         this.axisModel = axisModel;
@@ -174,7 +182,7 @@
     }
 
     add(name: keyof typeof builders) {
-        builders[name](this.opt, this.axisModel, this.group, this._transformGroup);
+        builders[name](this.opt, this.axisModel, this.group, this._transformGroup, this._api);
     }
 
     getGroup() {
@@ -236,7 +244,8 @@
         opt: AxisBuilderCfg,
         axisModel: AxisBaseModel,
         group: graphic.Group,
-        transformGroup: graphic.Group
+        transformGroup: graphic.Group,
+        api: ExtensionAPI
     ):void
 }
 
@@ -343,9 +352,10 @@
         }
     },
 
-    axisTickLabel(opt, axisModel, group, transformGroup) {
+    // @ts-ignore
+    axisTickLabel(opt, axisModel, group, transformGroup, api) {
         const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
-        const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);
+        const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt, api);
 
         fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
 
@@ -731,7 +741,8 @@
     group: graphic.Group,
     transformGroup: graphic.Group,
     axisModel: AxisBaseModel,
-    opt: AxisBuilderCfg
+    opt: AxisBuilderCfg,
+    api: ExtensionAPI
 ) {
     const axis = axisModel.axis;
     const show = retrieve(opt.axisLabelShow, axisModel.get(['axisLabel', 'show']));
@@ -843,11 +854,24 @@
             eventData.targetType = 'axisLabel';
             eventData.value = rawLabel;
             eventData.tickIndex = index;
+            eventData.breakStart = labelItem.breakStart;
+            eventData.breakEnd = labelItem.breakEnd;
             if (axis.type === 'category') {
                 eventData.dataIndex = tickValue;
             }
 
             getECData(textEl).eventData = eventData;
+
+            if (labelItem.breakStart != null) {
+                textEl.on('click', params => {
+                    axis.scale.expandBreak(labelItem.breakStart, labelItem.breakEnd);
+                    api.dispatchAction({
+                        type: 'axisBreakExpand',
+                        breakStart: labelItem.breakStart,
+                        breakEnd: labelItem.breakEnd,
+                    });
+                })
+            }
         }
 
         // FIXME

src/component/axis/CartesianAxisView.ts

@@ -29,12 +29,13 @@
 import GridModel from '../../coord/cartesian/GridModel';
 import { Payload } from '../../util/types';
 import { isIntervalOrLogScale } from '../../scale/helper';
+import { rectCoordAxisAddBreakBackground, rectCoordAxisBuildBreakArea, rectCoordAxisBuildClipPath } from './axisBreakAreaHelper';
 
 const axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
 ] as const;
 const selfBuilderAttrs = [
-    'splitArea', 'splitLine', 'minorSplitLine'
+    'splitArea', 'splitLine', 'minorSplitLine', 'breakArea'
 ] as const;
 
 class CartesianAxisView extends AxisView {
@@ -66,7 +67,7 @@
 
         const layout = cartesianAxisHelper.layout(gridModel, axisModel);
 
-        const axisBuilder = new AxisBuilder(axisModel, zrUtil.extend({
+        const axisBuilder = new AxisBuilder(axisModel, api, zrUtil.extend({
             handleAutoShown(elementType) {
                 const cartesians = gridModel.coordinateSystem.getCartesians();
                 for (let i = 0; i < cartesians.length; i++) {
@@ -86,7 +87,7 @@
 
         zrUtil.each(selfBuilderAttrs, function (name) {
             if (axisModel.get([name, 'show'])) {
-                axisElementBuilders[name](this, this._axisGroup, axisModel, gridModel);
+                axisElementBuilders[name](this, this._axisGroup, axisModel, gridModel, api);
             }
         }, this);
 
@@ -108,7 +109,13 @@
 }
 
 interface AxisElementBuilder {
-    (axisView: CartesianAxisView, axisGroup: graphic.Group, axisModel: CartesianAxisModel, gridModel: GridModel): void
+    (
+        axisView: CartesianAxisView,
+        axisGroup: graphic.Group,
+        axisModel: CartesianAxisModel,
+        gridModel: GridModel,
+        api: ExtensionAPI
+    ): void
 }
 
 const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBuilder> = {
@@ -231,6 +238,11 @@
 
     splitArea(axisView, axisGroup, axisModel, gridModel) {
         rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel);
+    },
+
+    // @ts-ignore
+    breakArea(axisView, axisGroup, axisModel, gridModel, api) {
+        rectCoordAxisBuildBreakArea(axisGroup, axisModel, gridModel, api);
     }
 };
 

src/component/axis/ParallelAxisView.ts

@@ -92,7 +92,7 @@ class ParallelAxisView extends ComponentView {
             axisLayout
         );
 
-        const axisBuilder = new AxisBuilder(axisModel, builderOpt);
+        const axisBuilder = new AxisBuilder(axisModel, api, builderOpt);
 
         zrUtil.each(elementList, axisBuilder.add, axisBuilder);
 

src/component/axis/RadiusAxisView.ts

@@ -25,6 +25,7 @@ import { RadiusAxisModel } from '../../coord/polar/AxisModel';
 import Polar from '../../coord/polar/Polar';
 import RadiusAxis from '../../coord/polar/RadiusAxis';
 import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../core/ExtensionAPI';
 
 const axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
@@ -44,7 +45,7 @@ class RadiusAxisView extends AxisView {
 
     private _axisGroup: graphic.Group;
 
-    render(radiusAxisModel: RadiusAxisModel, ecModel: GlobalModel) {
+    render(radiusAxisModel: RadiusAxisModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this.group.removeAll();
         if (!radiusAxisModel.get('show')) {
             return;
@@ -63,7 +64,7 @@ class RadiusAxisView extends AxisView {
         const radiusExtent = radiusAxis.getExtent();
 
         const layout = layoutAxis(polar, radiusAxisModel, axisAngle);
-        const axisBuilder = new AxisBuilder(radiusAxisModel, layout);
+        const axisBuilder = new AxisBuilder(radiusAxisModel, api, layout);
         zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
         newAxisGroup.add(axisBuilder.getGroup());
 

src/component/axis/SingleAxisView.ts

@@ -54,7 +54,7 @@ class SingleAxisView extends AxisView {
 
         const layout = singleAxisHelper.layout(axisModel);
 
-        const axisBuilder = new AxisBuilder(axisModel, layout);
+        const axisBuilder = new AxisBuilder(axisModel, api, layout);
 
         zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
 

src/component/axis/axisAction.ts

@@ -0,0 +1,24 @@
+import { noop } from 'zrender/src/core/util';
+import { EChartsExtensionInstallRegisters } from '../../extension';
+import { Payload } from '../../util/types';
+import GlobalModel from '../../model/Global';
+
+export function installAxisAction(registers: EChartsExtensionInstallRegisters) {
+    registers.registerAction({
+        type: 'axisBreakExpand',
+        update: 'update'
+    }, noop);
+}
+
+export const axisBreakActionInfo = {
+    type: 'axisBreakExpand',
+    event: 'axisBreakChanged',
+    update: 'update'
+};
+
+export const axisBreakActionHander = function (payload: Payload, ecModel: GlobalModel) {
+    // ecModel.eachComponent((componentType, model) => {
+    //     if (componentType.toLocaleLowerCase().indexOf('axis') >= 0) {
+    //     }
+    // });
+};