first commit

2026-02-06 20:21:10 +08:00
commit f9d7f980bb
3994 changed files with 1146030 additions and 0 deletions
@@ -0,0 +1,156 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import TimelineModel from './TimelineModel.js';
+import { DataFormatMixin } from '../../model/mixin/dataFormat.js';
+import { mixin } from 'zrender/lib/core/util.js';
+import { inheritDefaultOption } from '../../util/component.js';
+import tokens from '../../visual/tokens.js';
+var SliderTimelineModel = /** @class */function (_super) {
+  __extends(SliderTimelineModel, _super);
+  function SliderTimelineModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = SliderTimelineModel.type;
+    return _this;
+  }
+  SliderTimelineModel.type = 'timeline.slider';
+  /**
+   * @protected
+   */
+  SliderTimelineModel.defaultOption = inheritDefaultOption(TimelineModel.defaultOption, {
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderColor: tokens.color.border,
+    borderWidth: 0,
+    orient: 'horizontal',
+    inverse: false,
+    tooltip: {
+      trigger: 'item' // data item may also have tootip attr.
+    },
+    symbol: 'circle',
+    symbolSize: 12,
+    lineStyle: {
+      show: true,
+      width: 2,
+      color: tokens.color.accent10
+    },
+    label: {
+      position: 'auto',
+      // When using number, label position is not
+      // restricted by viewRect.
+      // positive: right/bottom, negative: left/top
+      show: true,
+      interval: 'auto',
+      rotate: 0,
+      // formatter: null,
+      // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+      color: tokens.color.tertiary
+    },
+    itemStyle: {
+      color: tokens.color.accent20,
+      borderWidth: 0
+    },
+    checkpointStyle: {
+      symbol: 'circle',
+      symbolSize: 15,
+      color: tokens.color.accent50,
+      borderColor: tokens.color.accent50,
+      borderWidth: 0,
+      shadowBlur: 0,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      // borderColor: 'rgba(194,53,49, 0.5)',
+      animation: true,
+      animationDuration: 300,
+      animationEasing: 'quinticInOut'
+    },
+    controlStyle: {
+      show: true,
+      showPlayBtn: true,
+      showPrevBtn: true,
+      showNextBtn: true,
+      itemSize: 24,
+      itemGap: 12,
+      position: 'left',
+      playIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10.6699C11.5 9.90014 12.3333 9.41887 13 9.80371L20.5 14.1338C21.1667 14.5187 21.1667 15.4813 20.5 15.8662L13 20.1963C12.3333 20.5811 11.5 20.0999 11.5 19.3301V10.6699Z',
+      stopIcon: 'path://M15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0ZM15 3C8.37258 3 3 8.37258 3 15C3 21.6274 8.37258 27 15 27C21.6274 27 27 21.6274 27 15C27 8.37258 21.6274 3 15 3ZM11.5 10C12.3284 10 13 10.6716 13 11.5V18.5C13 19.3284 12.3284 20 11.5 20C10.6716 20 10 19.3284 10 18.5V11.5C10 10.6716 10.6716 10 11.5 10ZM18.5 10C19.3284 10 20 10.6716 20 11.5V18.5C20 19.3284 19.3284 20 18.5 20C17.6716 20 17 19.3284 17 18.5V11.5C17 10.6716 17.6716 10 18.5 10Z',
+      // eslint-disable-next-line max-len
+      nextIcon: 'path://M0.838834 18.7383C0.253048 18.1525 0.253048 17.2028 0.838834 16.617L7.55635 9.89949L0.838834 3.18198C0.253048 2.59619 0.253048 1.64645 0.838834 1.06066C1.42462 0.474874 2.37437 0.474874 2.96015 1.06066L10.7383 8.83883L10.8412 8.95277C11.2897 9.50267 11.2897 10.2963 10.8412 10.8462L10.7383 10.9602L2.96015 18.7383C2.37437 19.3241 1.42462 19.3241 0.838834 18.7383Z',
+      // eslint-disable-next-line max-len
+      prevIcon: 'path://M10.9602 1.06066C11.5459 1.64645 11.5459 2.59619 10.9602 3.18198L4.24264 9.89949L10.9602 16.617C11.5459 17.2028 11.5459 18.1525 10.9602 18.7383C10.3744 19.3241 9.42462 19.3241 8.83883 18.7383L1.06066 10.9602L0.957771 10.8462C0.509245 10.2963 0.509245 9.50267 0.957771 8.95277L1.06066 8.83883L8.83883 1.06066C9.42462 0.474874 10.3744 0.474874 10.9602 1.06066Z',
+      prevBtnSize: 18,
+      nextBtnSize: 18,
+      color: tokens.color.accent50,
+      borderColor: tokens.color.accent50,
+      borderWidth: 0
+    },
+    emphasis: {
+      label: {
+        show: true,
+        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+        color: tokens.color.accent60
+      },
+      itemStyle: {
+        color: tokens.color.accent60,
+        borderColor: tokens.color.accent60
+      },
+      controlStyle: {
+        color: tokens.color.accent70,
+        borderColor: tokens.color.accent70
+      }
+    },
+    progress: {
+      lineStyle: {
+        color: tokens.color.accent30
+      },
+      itemStyle: {
+        color: tokens.color.accent40
+      }
+    },
+    data: []
+  });
+  return SliderTimelineModel;
+}(TimelineModel);
+mixin(SliderTimelineModel, DataFormatMixin.prototype);
+export default SliderTimelineModel;
@@ -0,0 +1,650 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import BoundingRect from 'zrender/lib/core/BoundingRect.js';
+import * as matrix from 'zrender/lib/core/matrix.js';
+import * as graphic from '../../util/graphic.js';
+import { createTextStyle } from '../../label/labelStyle.js';
+import * as layout from '../../util/layout.js';
+import TimelineView from './TimelineView.js';
+import TimelineAxis from './TimelineAxis.js';
+import { createSymbol, normalizeSymbolOffset, normalizeSymbolSize } from '../../util/symbol.js';
+import * as numberUtil from '../../util/number.js';
+import { merge, each, extend, isString, bind, defaults, retrieve2 } from 'zrender/lib/core/util.js';
+import OrdinalScale from '../../scale/Ordinal.js';
+import TimeScale from '../../scale/Time.js';
+import IntervalScale from '../../scale/Interval.js';
+import { parsePercent } from 'zrender/lib/contain/text.js';
+import { makeInner } from '../../util/model.js';
+import { getECData } from '../../util/innerStore.js';
+import { enableHoverEmphasis } from '../../util/states.js';
+import { createTooltipMarkup } from '../tooltip/tooltipMarkup.js';
+var PI = Math.PI;
+var labelDataIndexStore = makeInner();
+var SliderTimelineView = /** @class */function (_super) {
+  __extends(SliderTimelineView, _super);
+  function SliderTimelineView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = SliderTimelineView.type;
+    return _this;
+  }
+  SliderTimelineView.prototype.init = function (ecModel, api) {
+    this.api = api;
+  };
+  /**
+   * @override
+   */
+  SliderTimelineView.prototype.render = function (timelineModel, ecModel, api) {
+    this.model = timelineModel;
+    this.api = api;
+    this.ecModel = ecModel;
+    this.group.removeAll();
+    if (timelineModel.get('show', true)) {
+      var layoutInfo_1 = this._layout(timelineModel, api);
+      var mainGroup_1 = this._createGroup('_mainGroup');
+      var labelGroup = this._createGroup('_labelGroup');
+      var axis_1 = this._axis = this._createAxis(layoutInfo_1, timelineModel);
+      timelineModel.formatTooltip = function (dataIndex) {
+        var name = axis_1.scale.getLabel({
+          value: dataIndex
+        });
+        return createTooltipMarkup('nameValue', {
+          noName: true,
+          value: name
+        });
+      };
+      each(['AxisLine', 'AxisTick', 'Control', 'CurrentPointer'], function (name) {
+        this['_render' + name](layoutInfo_1, mainGroup_1, axis_1, timelineModel);
+      }, this);
+      this._renderAxisLabel(layoutInfo_1, labelGroup, axis_1, timelineModel);
+      this._position(layoutInfo_1, timelineModel);
+    }
+    this._doPlayStop();
+    this._updateTicksStatus();
+  };
+  /**
+   * @override
+   */
+  SliderTimelineView.prototype.remove = function () {
+    this._clearTimer();
+    this.group.removeAll();
+  };
+  /**
+   * @override
+   */
+  SliderTimelineView.prototype.dispose = function () {
+    this._clearTimer();
+  };
+  SliderTimelineView.prototype._layout = function (timelineModel, api) {
+    var labelPosOpt = timelineModel.get(['label', 'position']);
+    var orient = timelineModel.get('orient');
+    var viewRect = getViewRect(timelineModel, api);
+    var parsedLabelPos;
+    // Auto label offset.
+    if (labelPosOpt == null || labelPosOpt === 'auto') {
+      parsedLabelPos = orient === 'horizontal' ? viewRect.y + viewRect.height / 2 < api.getHeight() / 2 ? '-' : '+' : viewRect.x + viewRect.width / 2 < api.getWidth() / 2 ? '+' : '-';
+    } else if (isString(labelPosOpt)) {
+      parsedLabelPos = {
+        horizontal: {
+          top: '-',
+          bottom: '+'
+        },
+        vertical: {
+          left: '-',
+          right: '+'
+        }
+      }[orient][labelPosOpt];
+    } else {
+      // is number
+      parsedLabelPos = labelPosOpt;
+    }
+    var labelAlignMap = {
+      horizontal: 'center',
+      vertical: parsedLabelPos >= 0 || parsedLabelPos === '+' ? 'left' : 'right'
+    };
+    var labelBaselineMap = {
+      horizontal: parsedLabelPos >= 0 || parsedLabelPos === '+' ? 'top' : 'bottom',
+      vertical: 'middle'
+    };
+    var rotationMap = {
+      horizontal: 0,
+      vertical: PI / 2
+    };
+    // Position
+    var mainLength = orient === 'vertical' ? viewRect.height : viewRect.width;
+    var controlModel = timelineModel.getModel('controlStyle');
+    var showControl = controlModel.get('show', true);
+    var controlSize = showControl ? controlModel.get('itemSize') : 0;
+    var controlGap = showControl ? controlModel.get('itemGap') : 0;
+    var sizePlusGap = controlSize + controlGap;
+    // Special label rotate.
+    var labelRotation = timelineModel.get(['label', 'rotate']) || 0;
+    labelRotation = labelRotation * PI / 180; // To radian.
+    var playPosition;
+    var prevBtnPosition;
+    var nextBtnPosition;
+    var controlPosition = controlModel.get('position', true);
+    var showPlayBtn = showControl && controlModel.get('showPlayBtn', true);
+    var showPrevBtn = showControl && controlModel.get('showPrevBtn', true);
+    var showNextBtn = showControl && controlModel.get('showNextBtn', true);
+    var xLeft = 0;
+    var xRight = mainLength;
+    // position[0] means left, position[1] means middle.
+    if (controlPosition === 'left' || controlPosition === 'bottom') {
+      showPlayBtn && (playPosition = [0, 0], xLeft += sizePlusGap);
+      showPrevBtn && (prevBtnPosition = [xLeft, 0], xLeft += sizePlusGap);
+      showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+    } else {
+      // 'top' 'right'
+      showPlayBtn && (playPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+      showPrevBtn && (prevBtnPosition = [0, 0], xLeft += sizePlusGap);
+      showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+    }
+    var axisExtent = [xLeft, xRight];
+    if (timelineModel.get('inverse')) {
+      axisExtent.reverse();
+    }
+    return {
+      viewRect: viewRect,
+      mainLength: mainLength,
+      orient: orient,
+      rotation: rotationMap[orient],
+      labelRotation: labelRotation,
+      labelPosOpt: parsedLabelPos,
+      labelAlign: timelineModel.get(['label', 'align']) || labelAlignMap[orient],
+      labelBaseline: timelineModel.get(['label', 'verticalAlign']) || timelineModel.get(['label', 'baseline']) || labelBaselineMap[orient],
+      // Based on mainGroup.
+      playPosition: playPosition,
+      prevBtnPosition: prevBtnPosition,
+      nextBtnPosition: nextBtnPosition,
+      axisExtent: axisExtent,
+      controlSize: controlSize,
+      controlGap: controlGap
+    };
+  };
+  SliderTimelineView.prototype._position = function (layoutInfo, timelineModel) {
+    // Position is be called finally, because bounding rect is needed for
+    // adapt content to fill viewRect (auto adapt offset).
+    // Timeline may be not all in the viewRect when 'offset' is specified
+    // as a number, because it is more appropriate that label aligns at
+    // 'offset' but not the other edge defined by viewRect.
+    var mainGroup = this._mainGroup;
+    var labelGroup = this._labelGroup;
+    var viewRect = layoutInfo.viewRect;
+    if (layoutInfo.orient === 'vertical') {
+      // transform to horizontal, inverse rotate by left-top point.
+      var m = matrix.create();
+      var rotateOriginX = viewRect.x;
+      var rotateOriginY = viewRect.y + viewRect.height;
+      matrix.translate(m, m, [-rotateOriginX, -rotateOriginY]);
+      matrix.rotate(m, m, -PI / 2);
+      matrix.translate(m, m, [rotateOriginX, rotateOriginY]);
+      viewRect = viewRect.clone();
+      viewRect.applyTransform(m);
+    }
+    var viewBound = getBound(viewRect);
+    var mainBound = getBound(mainGroup.getBoundingRect());
+    var labelBound = getBound(labelGroup.getBoundingRect());
+    var mainPosition = [mainGroup.x, mainGroup.y];
+    var labelsPosition = [labelGroup.x, labelGroup.y];
+    labelsPosition[0] = mainPosition[0] = viewBound[0][0];
+    var labelPosOpt = layoutInfo.labelPosOpt;
+    if (labelPosOpt == null || isString(labelPosOpt)) {
+      // '+' or '-'
+      var mainBoundIdx = labelPosOpt === '+' ? 0 : 1;
+      toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
+      toBound(labelsPosition, labelBound, viewBound, 1, 1 - mainBoundIdx);
+    } else {
+      var mainBoundIdx = labelPosOpt >= 0 ? 0 : 1;
+      toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
+      labelsPosition[1] = mainPosition[1] + labelPosOpt;
+    }
+    mainGroup.setPosition(mainPosition);
+    labelGroup.setPosition(labelsPosition);
+    mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
+    setOrigin(mainGroup);
+    setOrigin(labelGroup);
+    function setOrigin(targetGroup) {
+      targetGroup.originX = viewBound[0][0] - targetGroup.x;
+      targetGroup.originY = viewBound[1][0] - targetGroup.y;
+    }
+    function getBound(rect) {
+      // [[xmin, xmax], [ymin, ymax]]
+      return [[rect.x, rect.x + rect.width], [rect.y, rect.y + rect.height]];
+    }
+    function toBound(fromPos, from, to, dimIdx, boundIdx) {
+      fromPos[dimIdx] += to[dimIdx][boundIdx] - from[dimIdx][boundIdx];
+    }
+  };
+  SliderTimelineView.prototype._createAxis = function (layoutInfo, timelineModel) {
+    var data = timelineModel.getData();
+    var axisType = timelineModel.get('axisType');
+    var scale = createScaleByModel(timelineModel, axisType);
+    // Customize scale. The `tickValue` is `dataIndex`.
+    scale.getTicks = function () {
+      return data.mapArray(['value'], function (value) {
+        return {
+          value: value
+        };
+      });
+    };
+    var dataExtent = data.getDataExtent('value');
+    scale.setExtent(dataExtent[0], dataExtent[1]);
+    scale.calcNiceTicks();
+    var axis = new TimelineAxis('value', scale, layoutInfo.axisExtent, axisType);
+    axis.model = timelineModel;
+    return axis;
+  };
+  SliderTimelineView.prototype._createGroup = function (key) {
+    var newGroup = this[key] = new graphic.Group();
+    this.group.add(newGroup);
+    return newGroup;
+  };
+  SliderTimelineView.prototype._renderAxisLine = function (layoutInfo, group, axis, timelineModel) {
+    var axisExtent = axis.getExtent();
+    if (!timelineModel.get(['lineStyle', 'show'])) {
+      return;
+    }
+    var line = new graphic.Line({
+      shape: {
+        x1: axisExtent[0],
+        y1: 0,
+        x2: axisExtent[1],
+        y2: 0
+      },
+      style: extend({
+        lineCap: 'round'
+      }, timelineModel.getModel('lineStyle').getLineStyle()),
+      silent: true,
+      z2: 1
+    });
+    group.add(line);
+    var progressLine = this._progressLine = new graphic.Line({
+      shape: {
+        x1: axisExtent[0],
+        x2: this._currentPointer ? this._currentPointer.x : axisExtent[0],
+        y1: 0,
+        y2: 0
+      },
+      style: defaults({
+        lineCap: 'round',
+        lineWidth: line.style.lineWidth
+      }, timelineModel.getModel(['progress', 'lineStyle']).getLineStyle()),
+      silent: true,
+      z2: 1
+    });
+    group.add(progressLine);
+  };
+  SliderTimelineView.prototype._renderAxisTick = function (layoutInfo, group, axis, timelineModel) {
+    var _this = this;
+    var data = timelineModel.getData();
+    // Show all ticks, despite ignoring strategy.
+    var ticks = axis.scale.getTicks();
+    this._tickSymbols = [];
+    // The value is dataIndex, see the customized scale.
+    each(ticks, function (tick) {
+      var tickCoord = axis.dataToCoord(tick.value);
+      var itemModel = data.getItemModel(tick.value);
+      var itemStyleModel = itemModel.getModel('itemStyle');
+      var hoverStyleModel = itemModel.getModel(['emphasis', 'itemStyle']);
+      var progressStyleModel = itemModel.getModel(['progress', 'itemStyle']);
+      var symbolOpt = {
+        x: tickCoord,
+        y: 0,
+        onclick: bind(_this._changeTimeline, _this, tick.value)
+      };
+      var el = giveSymbol(itemModel, itemStyleModel, group, symbolOpt);
+      el.ensureState('emphasis').style = hoverStyleModel.getItemStyle();
+      el.ensureState('progress').style = progressStyleModel.getItemStyle();
+      enableHoverEmphasis(el);
+      var ecData = getECData(el);
+      if (itemModel.get('tooltip')) {
+        ecData.dataIndex = tick.value;
+        ecData.dataModel = timelineModel;
+      } else {
+        ecData.dataIndex = ecData.dataModel = null;
+      }
+      _this._tickSymbols.push(el);
+    });
+  };
+  SliderTimelineView.prototype._renderAxisLabel = function (layoutInfo, group, axis, timelineModel) {
+    var _this = this;
+    var labelModel = axis.getLabelModel();
+    if (!labelModel.get('show')) {
+      return;
+    }
+    var data = timelineModel.getData();
+    var labels = axis.getViewLabels();
+    this._tickLabels = [];
+    each(labels, function (labelItem) {
+      // The tickValue is dataIndex, see the customized scale.
+      var dataIndex = labelItem.tickValue;
+      var itemModel = data.getItemModel(dataIndex);
+      var normalLabelModel = itemModel.getModel('label');
+      var hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
+      var progressLabelModel = itemModel.getModel(['progress', 'label']);
+      var tickCoord = axis.dataToCoord(labelItem.tickValue);
+      var textEl = new graphic.Text({
+        x: tickCoord,
+        y: 0,
+        rotation: layoutInfo.labelRotation - layoutInfo.rotation,
+        onclick: bind(_this._changeTimeline, _this, dataIndex),
+        silent: false,
+        style: createTextStyle(normalLabelModel, {
+          text: labelItem.formattedLabel,
+          align: layoutInfo.labelAlign,
+          verticalAlign: layoutInfo.labelBaseline
+        })
+      });
+      textEl.ensureState('emphasis').style = createTextStyle(hoverLabelModel);
+      textEl.ensureState('progress').style = createTextStyle(progressLabelModel);
+      group.add(textEl);
+      enableHoverEmphasis(textEl);
+      labelDataIndexStore(textEl).dataIndex = dataIndex;
+      _this._tickLabels.push(textEl);
+    });
+  };
+  SliderTimelineView.prototype._renderControl = function (layoutInfo, group, axis, timelineModel) {
+    var controlSize = layoutInfo.controlSize;
+    var rotation = layoutInfo.rotation;
+    var itemStyle = timelineModel.getModel('controlStyle').getItemStyle();
+    var hoverStyle = timelineModel.getModel(['emphasis', 'controlStyle']).getItemStyle();
+    var playState = timelineModel.getPlayState();
+    var inverse = timelineModel.get('inverse', true);
+    makeBtn(layoutInfo.nextBtnPosition, 'next', bind(this._changeTimeline, this, inverse ? '-' : '+'));
+    makeBtn(layoutInfo.prevBtnPosition, 'prev', bind(this._changeTimeline, this, inverse ? '+' : '-'));
+    makeBtn(layoutInfo.playPosition, playState ? 'stop' : 'play', bind(this._handlePlayClick, this, !playState), true);
+    function makeBtn(position, iconName, onclick, willRotate) {
+      if (!position) {
+        return;
+      }
+      var iconSize = parsePercent(retrieve2(timelineModel.get(['controlStyle', iconName + 'BtnSize']), controlSize), controlSize);
+      var rect = [0, -iconSize / 2, iconSize, iconSize];
+      var btn = makeControlIcon(timelineModel, iconName + 'Icon', rect, {
+        x: position[0],
+        y: position[1],
+        originX: controlSize / 2,
+        originY: 0,
+        rotation: willRotate ? -rotation : 0,
+        rectHover: true,
+        style: itemStyle,
+        onclick: onclick
+      });
+      btn.ensureState('emphasis').style = hoverStyle;
+      group.add(btn);
+      enableHoverEmphasis(btn);
+    }
+  };
+  SliderTimelineView.prototype._renderCurrentPointer = function (layoutInfo, group, axis, timelineModel) {
+    var data = timelineModel.getData();
+    var currentIndex = timelineModel.getCurrentIndex();
+    var pointerModel = data.getItemModel(currentIndex).getModel('checkpointStyle');
+    var me = this;
+    var callback = {
+      onCreate: function (pointer) {
+        pointer.draggable = true;
+        pointer.drift = bind(me._handlePointerDrag, me);
+        pointer.ondragend = bind(me._handlePointerDragend, me);
+        pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel, true);
+      },
+      onUpdate: function (pointer) {
+        pointerMoveTo(pointer, me._progressLine, currentIndex, axis, timelineModel);
+      }
+    };
+    // Reuse when exists, for animation and drag.
+    this._currentPointer = giveSymbol(pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback);
+  };
+  SliderTimelineView.prototype._handlePlayClick = function (nextState) {
+    this._clearTimer();
+    this.api.dispatchAction({
+      type: 'timelinePlayChange',
+      playState: nextState,
+      from: this.uid
+    });
+  };
+  SliderTimelineView.prototype._handlePointerDrag = function (dx, dy, e) {
+    this._clearTimer();
+    this._pointerChangeTimeline([e.offsetX, e.offsetY]);
+  };
+  SliderTimelineView.prototype._handlePointerDragend = function (e) {
+    this._pointerChangeTimeline([e.offsetX, e.offsetY], true);
+  };
+  SliderTimelineView.prototype._pointerChangeTimeline = function (mousePos, trigger) {
+    var toCoord = this._toAxisCoord(mousePos)[0];
+    var axis = this._axis;
+    var axisExtent = numberUtil.asc(axis.getExtent().slice());
+    toCoord > axisExtent[1] && (toCoord = axisExtent[1]);
+    toCoord < axisExtent[0] && (toCoord = axisExtent[0]);
+    this._currentPointer.x = toCoord;
+    this._currentPointer.markRedraw();
+    var progressLine = this._progressLine;
+    if (progressLine) {
+      progressLine.shape.x2 = toCoord;
+      progressLine.dirty();
+    }
+    var targetDataIndex = this._findNearestTick(toCoord);
+    var timelineModel = this.model;
+    if (trigger || targetDataIndex !== timelineModel.getCurrentIndex() && timelineModel.get('realtime')) {
+      this._changeTimeline(targetDataIndex);
+    }
+  };
+  SliderTimelineView.prototype._doPlayStop = function () {
+    var _this = this;
+    this._clearTimer();
+    if (this.model.getPlayState()) {
+      this._timer = setTimeout(function () {
+        // Do not cache
+        var timelineModel = _this.model;
+        _this._changeTimeline(timelineModel.getCurrentIndex() + (timelineModel.get('rewind', true) ? -1 : 1));
+      }, this.model.get('playInterval'));
+    }
+  };
+  SliderTimelineView.prototype._toAxisCoord = function (vertex) {
+    var trans = this._mainGroup.getLocalTransform();
+    return graphic.applyTransform(vertex, trans, true);
+  };
+  SliderTimelineView.prototype._findNearestTick = function (axisCoord) {
+    var data = this.model.getData();
+    var dist = Infinity;
+    var targetDataIndex;
+    var axis = this._axis;
+    data.each(['value'], function (value, dataIndex) {
+      var coord = axis.dataToCoord(value);
+      var d = Math.abs(coord - axisCoord);
+      if (d < dist) {
+        dist = d;
+        targetDataIndex = dataIndex;
+      }
+    });
+    return targetDataIndex;
+  };
+  SliderTimelineView.prototype._clearTimer = function () {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  };
+  SliderTimelineView.prototype._changeTimeline = function (nextIndex) {
+    var currentIndex = this.model.getCurrentIndex();
+    if (nextIndex === '+') {
+      nextIndex = currentIndex + 1;
+    } else if (nextIndex === '-') {
+      nextIndex = currentIndex - 1;
+    }
+    this.api.dispatchAction({
+      type: 'timelineChange',
+      currentIndex: nextIndex,
+      from: this.uid
+    });
+  };
+  SliderTimelineView.prototype._updateTicksStatus = function () {
+    var currentIndex = this.model.getCurrentIndex();
+    var tickSymbols = this._tickSymbols;
+    var tickLabels = this._tickLabels;
+    if (tickSymbols) {
+      for (var i = 0; i < tickSymbols.length; i++) {
+        tickSymbols && tickSymbols[i] && tickSymbols[i].toggleState('progress', i < currentIndex);
+      }
+    }
+    if (tickLabels) {
+      for (var i = 0; i < tickLabels.length; i++) {
+        tickLabels && tickLabels[i] && tickLabels[i].toggleState('progress', labelDataIndexStore(tickLabels[i]).dataIndex <= currentIndex);
+      }
+    }
+  };
+  SliderTimelineView.type = 'timeline.slider';
+  return SliderTimelineView;
+}(TimelineView);
+function createScaleByModel(model, axisType) {
+  axisType = axisType || model.get('type');
+  if (axisType) {
+    switch (axisType) {
+      // Buildin scale
+      case 'category':
+        return new OrdinalScale({
+          ordinalMeta: model.getCategories(),
+          extent: [Infinity, -Infinity]
+        });
+      case 'time':
+        return new TimeScale({
+          locale: model.ecModel.getLocaleModel(),
+          useUTC: model.ecModel.get('useUTC')
+        });
+      default:
+        // default to be value
+        return new IntervalScale();
+    }
+  }
+}
+function getViewRect(model, api) {
+  return layout.getLayoutRect(model.getBoxLayoutParams(), layout.createBoxLayoutReference(model, api).refContainer, model.get('padding'));
+}
+function makeControlIcon(timelineModel, objPath, rect, opts) {
+  var style = opts.style;
+  var icon = graphic.createIcon(timelineModel.get(['controlStyle', objPath]), opts || {}, new BoundingRect(rect[0], rect[1], rect[2], rect[3]));
+  // TODO createIcon won't use style in opt.
+  if (style) {
+    icon.setStyle(style);
+  }
+  return icon;
+}
+/**
+ * Create symbol or update symbol
+ * opt: basic position and event handlers
+ */
+function giveSymbol(hostModel, itemStyleModel, group, opt, symbol, callback) {
+  var color = itemStyleModel.get('color');
+  if (!symbol) {
+    var symbolType = hostModel.get('symbol');
+    symbol = createSymbol(symbolType, -1, -1, 2, 2, color);
+    symbol.setStyle('strokeNoScale', true);
+    group.add(symbol);
+    callback && callback.onCreate(symbol);
+  } else {
+    symbol.setColor(color);
+    group.add(symbol); // Group may be new, also need to add.
+    callback && callback.onUpdate(symbol);
+  }
+  // Style
+  var itemStyle = itemStyleModel.getItemStyle(['color']);
+  symbol.setStyle(itemStyle);
+  // Transform and events.
+  opt = merge({
+    rectHover: true,
+    z2: 100
+  }, opt, true);
+  var symbolSize = normalizeSymbolSize(hostModel.get('symbolSize'));
+  opt.scaleX = symbolSize[0] / 2;
+  opt.scaleY = symbolSize[1] / 2;
+  var symbolOffset = normalizeSymbolOffset(hostModel.get('symbolOffset'), symbolSize);
+  if (symbolOffset) {
+    opt.x = (opt.x || 0) + symbolOffset[0];
+    opt.y = (opt.y || 0) + symbolOffset[1];
+  }
+  var symbolRotate = hostModel.get('symbolRotate');
+  opt.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
+  symbol.attr(opt);
+  // FIXME
+  // (1) When symbol.style.strokeNoScale is true and updateTransform is not performed,
+  // getBoundingRect will return wrong result.
+  // (This is supposed to be resolved in zrender, but it is a little difficult to
+  // leverage performance and auto updateTransform)
+  // (2) All of ancesters of symbol do not scale, so we can just updateTransform symbol.
+  symbol.updateTransform();
+  return symbol;
+}
+function pointerMoveTo(pointer, progressLine, dataIndex, axis, timelineModel, noAnimation) {
+  if (pointer.dragging) {
+    return;
+  }
+  var pointerModel = timelineModel.getModel('checkpointStyle');
+  var toCoord = axis.dataToCoord(timelineModel.getData().get('value', dataIndex));
+  if (noAnimation || !pointerModel.get('animation', true)) {
+    pointer.attr({
+      x: toCoord,
+      y: 0
+    });
+    progressLine && progressLine.attr({
+      shape: {
+        x2: toCoord
+      }
+    });
+  } else {
+    var animationCfg = {
+      duration: pointerModel.get('animationDuration', true),
+      easing: pointerModel.get('animationEasing', true)
+    };
+    pointer.stopAnimation(null, true);
+    pointer.animateTo({
+      x: toCoord,
+      y: 0
+    }, animationCfg);
+    progressLine && progressLine.animateTo({
+      shape: {
+        x2: toCoord
+      }
+    }, animationCfg);
+  }
+}
+export default SliderTimelineView;
@@ -0,0 +1,71 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import Axis from '../../coord/Axis.js';
+/**
+ * Extend axis 2d
+ */
+var TimelineAxis = /** @class */function (_super) {
+  __extends(TimelineAxis, _super);
+  function TimelineAxis(dim, scale, coordExtent, axisType) {
+    var _this = _super.call(this, dim, scale, coordExtent) || this;
+    _this.type = axisType || 'value';
+    return _this;
+  }
+  /**
+   * @override
+   */
+  TimelineAxis.prototype.getLabelModel = function () {
+    // Force override
+    return this.model.getModel('label');
+  };
+  /**
+   * @override
+   */
+  TimelineAxis.prototype.isHorizontal = function () {
+    return this.model.get('orient') === 'horizontal';
+  };
+  return TimelineAxis;
+}(Axis);
+export default TimelineAxis;
@@ -0,0 +1,189 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import ComponentModel from '../../model/Component.js';
+import SeriesData from '../../data/SeriesData.js';
+import { each, isObject, clone } from 'zrender/lib/core/util.js';
+import { convertOptionIdName, getDataItemValue } from '../../util/model.js';
+import tokens from '../../visual/tokens.js';
+var TimelineModel = /** @class */function (_super) {
+  __extends(TimelineModel, _super);
+  function TimelineModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = TimelineModel.type;
+    _this.layoutMode = 'box';
+    return _this;
+  }
+  /**
+   * @override
+   */
+  TimelineModel.prototype.init = function (option, parentModel, ecModel) {
+    this.mergeDefaultAndTheme(option, ecModel);
+    this._initData();
+  };
+  /**
+   * @override
+   */
+  TimelineModel.prototype.mergeOption = function (option) {
+    _super.prototype.mergeOption.apply(this, arguments);
+    this._initData();
+  };
+  TimelineModel.prototype.setCurrentIndex = function (currentIndex) {
+    if (currentIndex == null) {
+      currentIndex = this.option.currentIndex;
+    }
+    var count = this._data.count();
+    if (this.option.loop) {
+      currentIndex = (currentIndex % count + count) % count;
+    } else {
+      currentIndex >= count && (currentIndex = count - 1);
+      currentIndex < 0 && (currentIndex = 0);
+    }
+    this.option.currentIndex = currentIndex;
+  };
+  /**
+   * @return {number} currentIndex
+   */
+  TimelineModel.prototype.getCurrentIndex = function () {
+    return this.option.currentIndex;
+  };
+  /**
+   * @return {boolean}
+   */
+  TimelineModel.prototype.isIndexMax = function () {
+    return this.getCurrentIndex() >= this._data.count() - 1;
+  };
+  /**
+   * @param {boolean} state true: play, false: stop
+   */
+  TimelineModel.prototype.setPlayState = function (state) {
+    this.option.autoPlay = !!state;
+  };
+  /**
+   * @return {boolean} true: play, false: stop
+   */
+  TimelineModel.prototype.getPlayState = function () {
+    return !!this.option.autoPlay;
+  };
+  /**
+   * @private
+   */
+  TimelineModel.prototype._initData = function () {
+    var thisOption = this.option;
+    var dataArr = thisOption.data || [];
+    var axisType = thisOption.axisType;
+    var names = this._names = [];
+    var processedDataArr;
+    if (axisType === 'category') {
+      processedDataArr = [];
+      each(dataArr, function (item, index) {
+        var value = convertOptionIdName(getDataItemValue(item), '');
+        var newItem;
+        if (isObject(item)) {
+          newItem = clone(item);
+          newItem.value = index;
+        } else {
+          newItem = index;
+        }
+        processedDataArr.push(newItem);
+        names.push(value);
+      });
+    } else {
+      processedDataArr = dataArr;
+    }
+    var dimType = {
+      category: 'ordinal',
+      time: 'time',
+      value: 'number'
+    }[axisType] || 'number';
+    var data = this._data = new SeriesData([{
+      name: 'value',
+      type: dimType
+    }], this);
+    data.initData(processedDataArr, names);
+  };
+  TimelineModel.prototype.getData = function () {
+    return this._data;
+  };
+  /**
+   * @public
+   * @return {Array.<string>} categoreis
+   */
+  TimelineModel.prototype.getCategories = function () {
+    if (this.get('axisType') === 'category') {
+      return this._names.slice();
+    }
+  };
+  TimelineModel.type = 'timeline';
+  /**
+   * @protected
+   */
+  TimelineModel.defaultOption = {
+    // zlevel: 0,                  // 一级层叠
+    z: 4,
+    show: true,
+    axisType: 'time',
+    realtime: true,
+    left: '20%',
+    top: null,
+    right: '20%',
+    bottom: 0,
+    width: null,
+    height: 40,
+    padding: tokens.size.m,
+    controlPosition: 'left',
+    autoPlay: false,
+    rewind: false,
+    loop: true,
+    playInterval: 2000,
+    currentIndex: 0,
+    itemStyle: {},
+    label: {
+      color: tokens.color.secondary
+    },
+    data: []
+  };
+  return TimelineModel;
+}(ComponentModel);
+export default TimelineModel;
@@ -0,0 +1,56 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import ComponentView from '../../view/Component.js';
+var TimelineView = /** @class */function (_super) {
+  __extends(TimelineView, _super);
+  function TimelineView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = TimelineView.type;
+    return _this;
+  }
+  TimelineView.type = 'timeline';
+  return TimelineView;
+}(ComponentView);
+export default TimelineView;
@@ -0,0 +1,39 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+import SliderTimelineModel from './SliderTimelineModel.js';
+import SliderTimelineView from './SliderTimelineView.js';
+import { installTimelineAction } from './timelineAction.js';
+import preprocessor from './preprocessor.js';
+export function install(registers) {
+  registers.registerComponentModel(SliderTimelineModel);
+  registers.registerComponentView(SliderTimelineView);
+  registers.registerSubTypeDefaulter('timeline', function () {
+    // Only slider now.
+    return 'slider';
+  });
+  installTimelineAction(registers);
+  registers.registerPreprocessor(preprocessor);
+}
@@ -0,0 +1,113 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+// @ts-nocheck
+import * as zrUtil from 'zrender/lib/core/util.js';
+export default function timelinePreprocessor(option) {
+  var timelineOpt = option && option.timeline;
+  if (!zrUtil.isArray(timelineOpt)) {
+    timelineOpt = timelineOpt ? [timelineOpt] : [];
+  }
+  zrUtil.each(timelineOpt, function (opt) {
+    if (!opt) {
+      return;
+    }
+    compatibleEC2(opt);
+  });
+}
+function compatibleEC2(opt) {
+  var type = opt.type;
+  var ec2Types = {
+    'number': 'value',
+    'time': 'time'
+  };
+  // Compatible with ec2
+  if (ec2Types[type]) {
+    opt.axisType = ec2Types[type];
+    delete opt.type;
+  }
+  transferItem(opt);
+  if (has(opt, 'controlPosition')) {
+    var controlStyle = opt.controlStyle || (opt.controlStyle = {});
+    if (!has(controlStyle, 'position')) {
+      controlStyle.position = opt.controlPosition;
+    }
+    if (controlStyle.position === 'none' && !has(controlStyle, 'show')) {
+      controlStyle.show = false;
+      delete controlStyle.position;
+    }
+    delete opt.controlPosition;
+  }
+  zrUtil.each(opt.data || [], function (dataItem) {
+    if (zrUtil.isObject(dataItem) && !zrUtil.isArray(dataItem)) {
+      if (!has(dataItem, 'value') && has(dataItem, 'name')) {
+        // In ec2, using name as value.
+        dataItem.value = dataItem.name;
+      }
+      transferItem(dataItem);
+    }
+  });
+}
+function transferItem(opt) {
+  var itemStyle = opt.itemStyle || (opt.itemStyle = {});
+  var itemStyleEmphasis = itemStyle.emphasis || (itemStyle.emphasis = {});
+  // Transfer label out
+  var label = opt.label || opt.label || {};
+  var labelNormal = label.normal || (label.normal = {});
+  var excludeLabelAttr = {
+    normal: 1,
+    emphasis: 1
+  };
+  zrUtil.each(label, function (value, name) {
+    if (!excludeLabelAttr[name] && !has(labelNormal, name)) {
+      labelNormal[name] = value;
+    }
+  });
+  if (itemStyleEmphasis.label && !has(label, 'emphasis')) {
+    label.emphasis = itemStyleEmphasis.label;
+    delete itemStyleEmphasis.label;
+  }
+}
+function has(obj, attr) {
+  return obj.hasOwnProperty(attr);
+}
@@ -0,0 +1,82 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { defaults } from 'zrender/lib/core/util.js';
+export function installTimelineAction(registers) {
+  registers.registerAction({
+    type: 'timelineChange',
+    event: 'timelineChanged',
+    update: 'prepareAndUpdate'
+  }, function (payload, ecModel, api) {
+    var timelineModel = ecModel.getComponent('timeline');
+    if (timelineModel && payload.currentIndex != null) {
+      timelineModel.setCurrentIndex(payload.currentIndex);
+      if (!timelineModel.get('loop', true) && timelineModel.isIndexMax() && timelineModel.getPlayState()) {
+        timelineModel.setPlayState(false);
+        // The timeline has played to the end, trigger event
+        api.dispatchAction({
+          type: 'timelinePlayChange',
+          playState: false,
+          from: payload.from
+        });
+      }
+    }
+    // Set normalized currentIndex to payload.
+    ecModel.resetOption('timeline', {
+      replaceMerge: timelineModel.get('replaceMerge', true)
+    });
+    return defaults({
+      currentIndex: timelineModel.option.currentIndex
+    }, payload);
+  });
+  registers.registerAction({
+    type: 'timelinePlayChange',
+    event: 'timelinePlayChanged',
+    update: 'update'
+  }, function (payload, ecModel) {
+    var timelineModel = ecModel.getComponent('timeline');
+    if (timelineModel && payload.playState != null) {
+      timelineModel.setPlayState(payload.playState);
+    }
+  });
+}