Merge pull request #19459 from apache/feat/break-axis

feat: axis with break

Author: Ovilia

package.json

@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.6.1"
+    "zrender": "github:ecomfe/zrender#v6"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/chart/bar/BarView.ts

@@ -240,6 +240,9 @@ class BarView extends ChartView {
 
         function createBackground(dataIndex: number) {
             const bgLayout = getLayout[coord.type](data, dataIndex);
+            if (!bgLayout) {
+                return null;
+            }
             const bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
             bgEl.useStyle(backgroundModel.getItemStyle());
             // Only cartesian2d support borderRadius.
@@ -256,6 +259,9 @@ class BarView extends ChartView {
             .add(function (dataIndex) {
                 const itemModel = data.getItemModel<BarDataItemOption>(dataIndex);
                 const layout = getLayout[coord.type](data, dataIndex, itemModel);
+                if (!layout) {
+                    return;
+                }
 
                 if (drawBackground) {
                     createBackground(dataIndex);
@@ -327,6 +333,9 @@ class BarView extends ChartView {
             .update(function (newIndex, oldIndex) {
                 const itemModel = data.getItemModel<BarDataItemOption>(newIndex);
                 const layout = getLayout[coord.type](data, newIndex, itemModel);
+                if (!layout) {
+                    return;
+                }
 
                 if (drawBackground) {
                     let bgEl: Rect | Sector;
@@ -927,6 +936,10 @@ const getLayout: {
     // when calculating bar background layout.
     cartesian2d(data, dataIndex, itemModel?): RectLayout {
         const layout = data.getItemLayout(dataIndex) as RectLayout;
+        if (!layout) {
+            return null;
+        }
+
         const fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0;
 
         // fix layout with lineWidth

src/chart/pie/labelLayout.ts

@@ -327,7 +327,7 @@ function constrainTextWidth(
 
         const newRect = label.getBoundingRect();
         textRect.width = newRect.width;
-        const margin = (label.style.margin || 0) + 2.1;
+        const margin = ((label.style.margin as number) || 0) + 2.1;
         textRect.height = newRect.height + margin;
         textRect.y -= (textRect.height - oldHeight) / 2;
     }
@@ -501,7 +501,7 @@ export default function pieLabelLayout(
             const textRect = label.getBoundingRect().clone();
             textRect.applyTransform(label.getComputedTransform());
             // Text has a default 1px stroke. Exclude this.
-            const margin = (label.style.margin || 0) + 2.1;
+            const margin = ((label.style.margin as number) || 0) + 2.1;
             textRect.y -= margin / 2;
             textRect.height += margin;
 

src/component/axis/AngleAxisView.ts

@@ -93,7 +93,7 @@ class AngleAxisView extends AxisView {
         const polar = angleAxis.polar;
         const radiusExtent = polar.getRadiusAxis().getExtent();
 
-        const ticksAngles = angleAxis.getTicksCoords();
+        const ticksAngles = angleAxis.getTicksCoords({breakTicks: 'none'});
         const minorTickAngles = angleAxis.getMinorTicksCoords();
 
         const labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem: TickLabel) {