office-viewer 0.3.11 → 0.3.13

package/esm/node_modules/echarts/lib/component/axis/CartesianAxisView.js

@@ -0,0 +1,191 @@
+import { __extends } from 'tslib';
+import { extend, each, isArray, defaults } from '../../../../zrender/lib/core/util.js';
+import { groupTransition, subPixelOptimizeLine } from '../../util/graphic.js';
+import AxisBuilder from './AxisBuilder.js';
+import AxisView from './AxisView.js';
+import { layout } from '../../coord/cartesian/cartesianAxisHelper.js';
+import { rectCoordAxisHandleRemove, rectCoordAxisBuildSplitArea } from './axisSplitHelper.js';
+import { isIntervalOrLogScale } from '../../scale/helper.js';
+import Group from '../../../../zrender/lib/graphic/Group.js';
+import Line from '../../../../zrender/lib/graphic/shape/Line.js';
+
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
+var CartesianAxisView = /** @class */function (_super) {
+  __extends(CartesianAxisView, _super);
+  function CartesianAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = CartesianAxisView.type;
+    _this.axisPointerClass = 'CartesianAxisPointer';
+    return _this;
+  }
+  /**
+   * @override
+   */
+  CartesianAxisView.prototype.render = function (axisModel, ecModel, api, payload) {
+    this.group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new Group();
+    this.group.add(this._axisGroup);
+    if (!axisModel.get('show')) {
+      return;
+    }
+    var gridModel = axisModel.getCoordSysModel();
+    var layout$1 = layout(gridModel, axisModel);
+    var axisBuilder = new AxisBuilder(axisModel, extend({
+      handleAutoShown: function (elementType) {
+        var cartesians = gridModel.coordinateSystem.getCartesians();
+        for (var i = 0; i < cartesians.length; i++) {
+          if (isIntervalOrLogScale(cartesians[i].getOtherAxis(axisModel.axis).scale)) {
+            // Still show axis tick or axisLine if other axis is value / log
+            return true;
+          }
+        }
+        // Not show axisTick or axisLine if other axis is category / time
+        return false;
+      }
+    }, layout$1));
+    each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+    this._axisGroup.add(axisBuilder.getGroup());
+    each(selfBuilderAttrs, function (name) {
+      if (axisModel.get([name, 'show'])) {
+        axisElementBuilders[name](this, this._axisGroup, axisModel, gridModel);
+      }
+    }, this);
+    // THIS is a special case for bar racing chart.
+    // Update the axis label from the natural initial layout to
+    // sorted layout should has no animation.
+    var isInitialSortFromBarRacing = payload && payload.type === 'changeAxisOrder' && payload.isInitSort;
+    if (!isInitialSortFromBarRacing) {
+      groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+    }
+    _super.prototype.render.call(this, axisModel, ecModel, api, payload);
+  };
+  CartesianAxisView.prototype.remove = function () {
+    rectCoordAxisHandleRemove(this);
+  };
+  CartesianAxisView.type = 'cartesianAxis';
+  return CartesianAxisView;
+}(AxisView);
+var axisElementBuilders = {
+  splitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+    if (axis.scale.isBlank()) {
+      return;
+    }
+    var splitLineModel = axisModel.getModel('splitLine');
+    var lineStyleModel = splitLineModel.getModel('lineStyle');
+    var lineColors = lineStyleModel.get('color');
+    lineColors = isArray(lineColors) ? lineColors : [lineColors];
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var lineCount = 0;
+    var ticksCoords = axis.getTicksCoords({
+      tickModel: splitLineModel
+    });
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+      if (isHorizontal) {
+        p1[0] = tickCoord;
+        p1[1] = gridRect.y;
+        p2[0] = tickCoord;
+        p2[1] = gridRect.y + gridRect.height;
+      } else {
+        p1[0] = gridRect.x;
+        p1[1] = tickCoord;
+        p2[0] = gridRect.x + gridRect.width;
+        p2[1] = tickCoord;
+      }
+      var colorIndex = lineCount++ % lineColors.length;
+      var tickValue = ticksCoords[i].tickValue;
+      var line = new Line({
+        anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+        autoBatch: true,
+        shape: {
+          x1: p1[0],
+          y1: p1[1],
+          x2: p2[0],
+          y2: p2[1]
+        },
+        style: defaults({
+          stroke: lineColors[colorIndex]
+        }, lineStyle),
+        silent: true
+      });
+      subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+      axisGroup.add(line);
+    }
+  },
+  minorSplitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+    var minorSplitLineModel = axisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var minorTicksCoords = axis.getMinorTicksCoords();
+    if (!minorTicksCoords.length) {
+      return;
+    }
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
+        if (isHorizontal) {
+          p1[0] = tickCoord;
+          p1[1] = gridRect.y;
+          p2[0] = tickCoord;
+          p2[1] = gridRect.y + gridRect.height;
+        } else {
+          p1[0] = gridRect.x;
+          p1[1] = tickCoord;
+          p2[0] = gridRect.x + gridRect.width;
+          p2[1] = tickCoord;
+        }
+        var line = new Line({
+          anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
+          autoBatch: true,
+          shape: {
+            x1: p1[0],
+            y1: p1[1],
+            x2: p2[0],
+            y2: p2[1]
+          },
+          style: lineStyle,
+          silent: true
+        });
+        subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+        axisGroup.add(line);
+      }
+    }
+  },
+  splitArea: function (axisView, axisGroup, axisModel, gridModel) {
+    rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel);
+  }
+};
+var CartesianXAxisView = /** @class */function (_super) {
+  __extends(CartesianXAxisView, _super);
+  function CartesianXAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+  CartesianXAxisView.type = 'xAxis';
+  return CartesianXAxisView;
+}(CartesianAxisView);
+var CartesianYAxisView = /** @class */function (_super) {
+  __extends(CartesianYAxisView, _super);
+  function CartesianYAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+  CartesianYAxisView.type = 'yAxis';
+  return CartesianYAxisView;
+}(CartesianAxisView);
+
+export { CartesianXAxisView, CartesianYAxisView, CartesianAxisView as default };

package/esm/node_modules/echarts/lib/component/axis/ParallelAxisView.js

@@ -0,0 +1,135 @@
+import { __extends } from 'tslib';
+import { bind, extend, each, map } from '../../../../zrender/lib/core/util.js';
+import AxisBuilder from './AxisBuilder.js';
+import BrushController from '../helper/BrushController.js';
+import { makeRectPanelClipPath, makeRectIsTargetByCursor, makeLinearBrushOtherExtent } from '../helper/brushHelper.js';
+import { groupTransition } from '../../util/graphic.js';
+import ComponentView from '../../view/Component.js';
+import Group from '../../../../zrender/lib/graphic/Group.js';
+import BoundingRect from '../../../../zrender/lib/core/BoundingRect.js';
+
+var elementList = ['axisLine', 'axisTickLabel', 'axisName'];
+var ParallelAxisView = /** @class */function (_super) {
+  __extends(ParallelAxisView, _super);
+  function ParallelAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = ParallelAxisView.type;
+    return _this;
+  }
+  ParallelAxisView.prototype.init = function (ecModel, api) {
+    _super.prototype.init.apply(this, arguments);
+    (this._brushController = new BrushController(api.getZr())).on('brush', bind(this._onBrush, this));
+  };
+  ParallelAxisView.prototype.render = function (axisModel, ecModel, api, payload) {
+    if (fromAxisAreaSelect(axisModel, ecModel, payload)) {
+      return;
+    }
+    this.axisModel = axisModel;
+    this.api = api;
+    this.group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new Group();
+    this.group.add(this._axisGroup);
+    if (!axisModel.get('show')) {
+      return;
+    }
+    var coordSysModel = getCoordSysModel(axisModel, ecModel);
+    var coordSys = coordSysModel.coordinateSystem;
+    var areaSelectStyle = axisModel.getAreaSelectStyle();
+    var areaWidth = areaSelectStyle.width;
+    var dim = axisModel.axis.dim;
+    var axisLayout = coordSys.getAxisLayout(dim);
+    var builderOpt = extend({
+      strokeContainThreshold: areaWidth
+    }, axisLayout);
+    var axisBuilder = new AxisBuilder(axisModel, builderOpt);
+    each(elementList, axisBuilder.add, axisBuilder);
+    this._axisGroup.add(axisBuilder.getGroup());
+    this._refreshBrushController(builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api);
+    groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+  };
+  // /**
+  //  * @override
+  //  */
+  // updateVisual(axisModel, ecModel, api, payload) {
+  //     this._brushController && this._brushController
+  //         .updateCovers(getCoverInfoList(axisModel));
+  // }
+  ParallelAxisView.prototype._refreshBrushController = function (builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api) {
+    // After filtering, axis may change, select area needs to be update.
+    var extent = axisModel.axis.getExtent();
+    var extentLen = extent[1] - extent[0];
+    var extra = Math.min(30, Math.abs(extentLen) * 0.1); // Arbitrary value.
+    // width/height might be negative, which will be
+    // normalized in BoundingRect.
+    var rect = BoundingRect.create({
+      x: extent[0],
+      y: -areaWidth / 2,
+      width: extentLen,
+      height: areaWidth
+    });
+    rect.x -= extra;
+    rect.width += 2 * extra;
+    this._brushController.mount({
+      enableGlobalPan: true,
+      rotation: builderOpt.rotation,
+      x: builderOpt.position[0],
+      y: builderOpt.position[1]
+    }).setPanels([{
+      panelId: 'pl',
+      clipPath: makeRectPanelClipPath(rect),
+      isTargetByCursor: makeRectIsTargetByCursor(rect, api, coordSysModel),
+      getLinearBrushOtherExtent: makeLinearBrushOtherExtent(rect, 0)
+    }]).enableBrush({
+      brushType: 'lineX',
+      brushStyle: areaSelectStyle,
+      removeOnClick: true
+    }).updateCovers(getCoverInfoList(axisModel));
+  };
+  ParallelAxisView.prototype._onBrush = function (eventParam) {
+    var coverInfoList = eventParam.areas;
+    // Do not cache these object, because the mey be changed.
+    var axisModel = this.axisModel;
+    var axis = axisModel.axis;
+    var intervals = map(coverInfoList, function (coverInfo) {
+      return [axis.coordToData(coverInfo.range[0], true), axis.coordToData(coverInfo.range[1], true)];
+    });
+    // If realtime is true, action is not dispatched on drag end, because
+    // the drag end emits the same params with the last drag move event,
+    // and may have some delay when using touch pad.
+    if (!axisModel.option.realtime === eventParam.isEnd || eventParam.removeOnClick) {
+      // jshint ignore:line
+      this.api.dispatchAction({
+        type: 'axisAreaSelect',
+        parallelAxisId: axisModel.id,
+        intervals: intervals
+      });
+    }
+  };
+  ParallelAxisView.prototype.dispose = function () {
+    this._brushController.dispose();
+  };
+  ParallelAxisView.type = 'parallelAxis';
+  return ParallelAxisView;
+}(ComponentView);
+function fromAxisAreaSelect(axisModel, ecModel, payload) {
+  return payload && payload.type === 'axisAreaSelect' && ecModel.findComponents({
+    mainType: 'parallelAxis',
+    query: payload
+  })[0] === axisModel;
+}
+function getCoverInfoList(axisModel) {
+  var axis = axisModel.axis;
+  return map(axisModel.activeIntervals, function (interval) {
+    return {
+      brushType: 'lineX',
+      panelId: 'pl',
+      range: [axis.dataToCoord(interval[0], true), axis.dataToCoord(interval[1], true)]
+    };
+  });
+}
+function getCoordSysModel(axisModel, ecModel) {
+  return ecModel.getComponent('parallel', axisModel.get('parallelIndex'));
+}
+
+export { ParallelAxisView as default };

package/esm/node_modules/echarts/lib/component/axis/RadiusAxisView.js

@@ -0,0 +1,169 @@
+import { __extends } from 'tslib';
+import { each, defaults } from '../../../../zrender/lib/core/util.js';
+import * as graphic from '../../util/graphic.js';
+import { groupTransition, mergePath } from '../../util/graphic.js';
+import AxisBuilder from './AxisBuilder.js';
+import AxisView from './AxisView.js';
+import Group from '../../../../zrender/lib/graphic/Group.js';
+import Circle from '../../../../zrender/lib/graphic/shape/Circle.js';
+import Sector from '../../../../zrender/lib/graphic/shape/Sector.js';
+
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+var selfBuilderAttrs = ['splitLine', 'splitArea', 'minorSplitLine'];
+var RadiusAxisView = /** @class */function (_super) {
+  __extends(RadiusAxisView, _super);
+  function RadiusAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = RadiusAxisView.type;
+    _this.axisPointerClass = 'PolarAxisPointer';
+    return _this;
+  }
+  RadiusAxisView.prototype.render = function (radiusAxisModel, ecModel) {
+    this.group.removeAll();
+    if (!radiusAxisModel.get('show')) {
+      return;
+    }
+    var oldAxisGroup = this._axisGroup;
+    var newAxisGroup = this._axisGroup = new Group();
+    this.group.add(newAxisGroup);
+    var radiusAxis = radiusAxisModel.axis;
+    var polar = radiusAxis.polar;
+    var angleAxis = polar.getAngleAxis();
+    var ticksCoords = radiusAxis.getTicksCoords();
+    var minorTicksCoords = radiusAxis.getMinorTicksCoords();
+    var axisAngle = angleAxis.getExtent()[0];
+    var radiusExtent = radiusAxis.getExtent();
+    var layout = layoutAxis(polar, radiusAxisModel, axisAngle);
+    var axisBuilder = new AxisBuilder(radiusAxisModel, layout);
+    each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+    newAxisGroup.add(axisBuilder.getGroup());
+    groupTransition(oldAxisGroup, newAxisGroup, radiusAxisModel);
+    each(selfBuilderAttrs, function (name) {
+      if (radiusAxisModel.get([name, 'show']) && !radiusAxis.scale.isBlank()) {
+        axisElementBuilders[name](this.group, radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords);
+      }
+    }, this);
+  };
+  RadiusAxisView.type = 'radiusAxis';
+  return RadiusAxisView;
+}(AxisView);
+var axisElementBuilders = {
+  splitLine: function (group, radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
+    var splitLineModel = radiusAxisModel.getModel('splitLine');
+    var lineStyleModel = splitLineModel.getModel('lineStyle');
+    var lineColors = lineStyleModel.get('color');
+    var lineCount = 0;
+    var angleAxis = polar.getAngleAxis();
+    var RADIAN = Math.PI / 180;
+    var angleExtent = angleAxis.getExtent();
+    var shapeType = Math.abs(angleExtent[1] - angleExtent[0]) === 360 ? 'Circle' : 'Arc';
+    lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+    var splitLines = [];
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var colorIndex = lineCount++ % lineColors.length;
+      splitLines[colorIndex] = splitLines[colorIndex] || [];
+      splitLines[colorIndex].push(new graphic[shapeType]({
+        shape: {
+          cx: polar.cx,
+          cy: polar.cy,
+          // ensure circle radius >= 0
+          r: Math.max(ticksCoords[i].coord, 0),
+          startAngle: -angleExtent[0] * RADIAN,
+          endAngle: -angleExtent[1] * RADIAN,
+          clockwise: angleAxis.inverse
+        }
+      }));
+    }
+    // Simple optimization
+    // Batching the lines if color are the same
+    for (var i = 0; i < splitLines.length; i++) {
+      group.add(mergePath(splitLines[i], {
+        style: defaults({
+          stroke: lineColors[i % lineColors.length],
+          fill: null
+        }, lineStyleModel.getLineStyle()),
+        silent: true
+      }));
+    }
+  },
+  minorSplitLine: function (group, radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords) {
+    if (!minorTicksCoords.length) {
+      return;
+    }
+    var minorSplitLineModel = radiusAxisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var lines = [];
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        lines.push(new Circle({
+          shape: {
+            cx: polar.cx,
+            cy: polar.cy,
+            r: minorTicksCoords[i][k].coord
+          }
+        }));
+      }
+    }
+    group.add(mergePath(lines, {
+      style: defaults({
+        fill: null
+      }, lineStyleModel.getLineStyle()),
+      silent: true
+    }));
+  },
+  splitArea: function (group, radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
+    if (!ticksCoords.length) {
+      return;
+    }
+    var splitAreaModel = radiusAxisModel.getModel('splitArea');
+    var areaStyleModel = splitAreaModel.getModel('areaStyle');
+    var areaColors = areaStyleModel.get('color');
+    var lineCount = 0;
+    areaColors = areaColors instanceof Array ? areaColors : [areaColors];
+    var splitAreas = [];
+    var prevRadius = ticksCoords[0].coord;
+    for (var i = 1; i < ticksCoords.length; i++) {
+      var colorIndex = lineCount++ % areaColors.length;
+      splitAreas[colorIndex] = splitAreas[colorIndex] || [];
+      splitAreas[colorIndex].push(new Sector({
+        shape: {
+          cx: polar.cx,
+          cy: polar.cy,
+          r0: prevRadius,
+          r: ticksCoords[i].coord,
+          startAngle: 0,
+          endAngle: Math.PI * 2
+        },
+        silent: true
+      }));
+      prevRadius = ticksCoords[i].coord;
+    }
+    // Simple optimization
+    // Batching the lines if color are the same
+    for (var i = 0; i < splitAreas.length; i++) {
+      group.add(mergePath(splitAreas[i], {
+        style: defaults({
+          fill: areaColors[i % areaColors.length]
+        }, areaStyleModel.getAreaStyle()),
+        silent: true
+      }));
+    }
+  }
+};
+/**
+ * @inner
+ */
+function layoutAxis(polar, radiusAxisModel, axisAngle) {
+  return {
+    position: [polar.cx, polar.cy],
+    rotation: axisAngle / 180 * Math.PI,
+    labelDirection: -1,
+    tickDirection: -1,
+    nameDirection: 1,
+    labelRotate: radiusAxisModel.getModel('axisLabel').get('rotate'),
+    // Over splitLine and splitArea
+    z2: 1
+  };
+}
+
+export { RadiusAxisView as default };

package/esm/node_modules/echarts/lib/component/axis/SingleAxisView.js

@@ -0,0 +1,107 @@
+import { __extends } from 'tslib';
+import { each, defaults } from '../../../../zrender/lib/core/util.js';
+import AxisBuilder from './AxisBuilder.js';
+import { groupTransition, subPixelOptimizeLine, mergePath } from '../../util/graphic.js';
+import { layout } from '../../coord/single/singleAxisHelper.js';
+import AxisView from './AxisView.js';
+import { rectCoordAxisHandleRemove, rectCoordAxisBuildSplitArea } from './axisSplitHelper.js';
+import Group from '../../../../zrender/lib/graphic/Group.js';
+import Line from '../../../../zrender/lib/graphic/shape/Line.js';
+
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+var selfBuilderAttrs = ['splitArea', 'splitLine'];
+var SingleAxisView = /** @class */function (_super) {
+  __extends(SingleAxisView, _super);
+  function SingleAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = SingleAxisView.type;
+    _this.axisPointerClass = 'SingleAxisPointer';
+    return _this;
+  }
+  SingleAxisView.prototype.render = function (axisModel, ecModel, api, payload) {
+    var group = this.group;
+    group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new Group();
+    var layout$1 = layout(axisModel);
+    var axisBuilder = new AxisBuilder(axisModel, layout$1);
+    each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+    group.add(this._axisGroup);
+    group.add(axisBuilder.getGroup());
+    each(selfBuilderAttrs, function (name) {
+      if (axisModel.get([name, 'show'])) {
+        axisElementBuilders[name](this, this.group, this._axisGroup, axisModel);
+      }
+    }, this);
+    groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+    _super.prototype.render.call(this, axisModel, ecModel, api, payload);
+  };
+  SingleAxisView.prototype.remove = function () {
+    rectCoordAxisHandleRemove(this);
+  };
+  SingleAxisView.type = 'singleAxis';
+  return SingleAxisView;
+}(AxisView);
+var axisElementBuilders = {
+  splitLine: function (axisView, group, axisGroup, axisModel) {
+    var axis = axisModel.axis;
+    if (axis.scale.isBlank()) {
+      return;
+    }
+    var splitLineModel = axisModel.getModel('splitLine');
+    var lineStyleModel = splitLineModel.getModel('lineStyle');
+    var lineColors = lineStyleModel.get('color');
+    lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+    var lineWidth = lineStyleModel.get('width');
+    var gridRect = axisModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var splitLines = [];
+    var lineCount = 0;
+    var ticksCoords = axis.getTicksCoords({
+      tickModel: splitLineModel
+    });
+    var p1 = [];
+    var p2 = [];
+    for (var i = 0; i < ticksCoords.length; ++i) {
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+      if (isHorizontal) {
+        p1[0] = tickCoord;
+        p1[1] = gridRect.y;
+        p2[0] = tickCoord;
+        p2[1] = gridRect.y + gridRect.height;
+      } else {
+        p1[0] = gridRect.x;
+        p1[1] = tickCoord;
+        p2[0] = gridRect.x + gridRect.width;
+        p2[1] = tickCoord;
+      }
+      var line = new Line({
+        shape: {
+          x1: p1[0],
+          y1: p1[1],
+          x2: p2[0],
+          y2: p2[1]
+        },
+        silent: true
+      });
+      subPixelOptimizeLine(line.shape, lineWidth);
+      var colorIndex = lineCount++ % lineColors.length;
+      splitLines[colorIndex] = splitLines[colorIndex] || [];
+      splitLines[colorIndex].push(line);
+    }
+    var lineStyle = lineStyleModel.getLineStyle(['color']);
+    for (var i = 0; i < splitLines.length; ++i) {
+      group.add(mergePath(splitLines[i], {
+        style: defaults({
+          stroke: lineColors[i % lineColors.length]
+        }, lineStyle),
+        silent: true
+      }));
+    }
+  },
+  splitArea: function (axisView, group, axisGroup, axisModel) {
+    rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, axisModel);
+  }
+};
+
+export { SingleAxisView as default };

package/esm/node_modules/echarts/lib/component/axis/axisSplitHelper.js

@@ -0,0 +1,85 @@
+import { createHashMap, isArray, defaults } from '../../../../zrender/lib/core/util.js';
+import '../../util/graphic.js';
+import { makeInner } from '../../util/model.js';
+import Rect from '../../../../zrender/lib/graphic/shape/Rect.js';
+
+var inner = makeInner();
+function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+  var axis = axisModel.axis;
+  if (axis.scale.isBlank()) {
+    return;
+  }
+  // TODO: TYPE
+  var splitAreaModel = axisModel.getModel('splitArea');
+  var areaStyleModel = splitAreaModel.getModel('areaStyle');
+  var areaColors = areaStyleModel.get('color');
+  var gridRect = gridModel.coordinateSystem.getRect();
+  var ticksCoords = axis.getTicksCoords({
+    tickModel: splitAreaModel,
+    clamp: true
+  });
+  if (!ticksCoords.length) {
+    return;
+  }
+  // For Making appropriate splitArea animation, the color and anid
+  // should be corresponding to previous one if possible.
+  var areaColorsLen = areaColors.length;
+  var lastSplitAreaColors = inner(axisView).splitAreaColors;
+  var newSplitAreaColors = createHashMap();
+  var colorIndex = 0;
+  if (lastSplitAreaColors) {
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+      if (cIndex != null) {
+        colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+        break;
+      }
+    }
+  }
+  var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+  var areaStyle = areaStyleModel.getAreaStyle();
+  areaColors = isArray(areaColors) ? areaColors : [areaColors];
+  for (var i = 1; i < ticksCoords.length; i++) {
+    var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+    var x = void 0;
+    var y = void 0;
+    var width = void 0;
+    var height = void 0;
+    if (axis.isHorizontal()) {
+      x = prev;
+      y = gridRect.y;
+      width = tickCoord - x;
+      height = gridRect.height;
+      prev = x + width;
+    } else {
+      x = gridRect.x;
+      y = prev;
+      width = gridRect.width;
+      height = tickCoord - y;
+      prev = y + height;
+    }
+    var tickValue = ticksCoords[i - 1].tickValue;
+    tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+    axisGroup.add(new Rect({
+      anid: tickValue != null ? 'area_' + tickValue : null,
+      shape: {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      style: defaults({
+        fill: areaColors[colorIndex]
+      }, areaStyle),
+      autoBatch: true,
+      silent: true
+    }));
+    colorIndex = (colorIndex + 1) % areaColorsLen;
+  }
+  inner(axisView).splitAreaColors = newSplitAreaColors;
+}
+function rectCoordAxisHandleRemove(axisView) {
+  inner(axisView).splitAreaColors = null;
+}
+
+export { rectCoordAxisBuildSplitArea, rectCoordAxisHandleRemove };