diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..c7c1623bc4e62ad9df052d2f3e0867577f9b2dc1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "./node_modules/typescript/lib"
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fb9a8abbaf20883a9643fa29e0372b6d9386ceaa..94dc28426c9c44b2dfd1180986d11926888cde92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -742,6 +742,12 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "typescript": {
+          "version": "3.7.5",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+          "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+          "dev": true
         }
       }
     },
@@ -6985,37 +6991,6 @@
         "resolve": "^1.1.6"
       }
     },
-    "rollup-plugin-progress": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-progress/-/rollup-plugin-progress-1.1.1.tgz",
-      "integrity": "sha512-RIs2bnk/O2fylGN0F2w38U4PhAGIt8/N2noZ3i2tDOF0qg0PPZLKMMFp24MQUyND/w9nu61DRSanwpXOoJhxIA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.2"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "rollup-plugin-typescript2": {
       "version": "0.25.3",
       "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.25.3.tgz",
@@ -8023,9 +7998,9 @@
       }
     },
     "typescript": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.4.tgz",
-      "integrity": "sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
       "dev": true
     },
     "uglify-js": {
diff --git a/package.json b/package.json
index 10ccec391720efbf1abf5a06b133cc38691b0970..e5dd48732a8e56c6635b80ffd93f7e04f423a4fb 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,6 @@
     "serve-handler": "6.1.1",
     "slugify": "1.3.4",
     "socket.io": "2.2.0",
-    "typescript": "3.7.4"
+    "typescript": "^3.8.3"
   }
 }
diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts
index c4cd150b87a99378d9460b72a65f3cb6f5e5c812..8ef83342a88069cd9da06dafd446920e3b90484d 100644
--- a/src/chart/bar/BarSeries.ts
+++ b/src/chart/bar/BarSeries.ts
@@ -17,32 +17,92 @@
 * under the License.
 */
 
-// @ts-nocheck
+import BaseBarSeriesModel, {BaseBarSeriesOption} from './BaseBarSeries';
+import SeriesModel from '../../model/Series';
+import { ItemStyleOption, OptionDataValue, LabelOption } from '../../util/types';
+import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
+import type Polar from '../../coord/polar/Polar';
 
-import BaseBarSeries from './BaseBarSeries';
+type BarDataValue = OptionDataValue | OptionDataValue[]
 
-export default BaseBarSeries.extend({
+export interface BarItemStyleOption extends ItemStyleOption {
+    /**
+     * Border radius is not supported for bar on polar
+     */
+    barBorderRadius?: number | number[]
+}
+export interface BarDataItemOption {
+    name?: string
+
+    value?: BarDataValue
+
+    itemStyle?: BarItemStyleOption
+    label?: LabelOption
+
+    cursor?: string
+
+    emphasis?: {
+        itemStyle?: BarItemStyleOption
+        label?: LabelOption
+    }
+}
+
+export interface BarSeriesOption extends BaseBarSeriesOption {
+    coordinateSystem?: 'cartesian2d' | 'polar'
+
+    clip?: boolean
+
+    stack?: string
+
+    /**
+     * If use caps on two sides of bars
+     * Only available on tangential polar bar
+     */
+    roundCap?: boolean
+
+    showBackground?: boolean
 
-    type: 'series.bar',
+    backgroundStyle?: ItemStyleOption & {
+        borderRadius?: number | number[]
+    }
+
+    data?: (BarDataItemOption | BarDataValue)[]
+
+    label?: LabelOption
+
+    itemStyle?: BarItemStyleOption
+
+    emphasis?: {
+        label?: LabelOption
+        itemStyle?: BarItemStyleOption
+    }
+
+}
 
-    dependencies: ['grid', 'polar'],
+class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
+    static type = 'series.bar'
+    type = BarSeriesModel.type
 
-    brushSelector: 'rect',
+    static dependencies = ['grid', 'polar']
+
+    readonly brushSelector = 'rect'
+
+    coordinateSystem: Cartesian2D | Polar
 
     /**
      * @override
      */
-    getProgressive: function () {
+    getProgressive() {
         // Do not support progressive in normal mode.
         return this.get('large')
             ? this.get('progressive')
             : false;
-    },
+    }
 
     /**
      * @override
      */
-    getProgressiveThreshold: function () {
+    getProgressiveThreshold() {
         // Do not support progressive in normal mode.
         var progressiveThreshold = this.get('progressiveThreshold');
         var largeThreshold = this.get('largeThreshold');
@@ -50,15 +110,13 @@ export default BaseBarSeries.extend({
             progressiveThreshold = largeThreshold;
         }
         return progressiveThreshold;
-    },
+    }
 
-    defaultOption: {
+    static defaultOption: BarSeriesOption = {
         // If clipped
         // Only available on cartesian2d
         clip: true,
 
-        // If use caps on two sides of bars
-        // Only available on tangential polar bar
         roundCap: false,
 
         showBackground: false,
@@ -75,4 +133,9 @@ export default BaseBarSeries.extend({
             opacity: 1
         }
     }
-});
+
+}
+
+SeriesModel.registerClass(BarSeriesModel);
+
+export default BarSeriesModel;
\ No newline at end of file
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 23a5d64ded038b50edd3b6fce0f9d48c3ee58dfe..20d8c8f1d104799ef7e0a81630125d3134643a4d 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -17,31 +17,47 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import {__DEV__} from '../../config';
-import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import {setLabel} from './helper';
-import Model from '../../model/Model';
-import barItemStyle from './barItemStyle';
-import Path from 'zrender/src/graphic/Path';
+import {getBarItemStyle} from './barItemStyle';
+import Path, { PathProps } from 'zrender/src/graphic/Path';
 import Group from 'zrender/src/container/Group';
 import {throttle} from '../../util/throttle';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
 import Sausage from '../../util/shape/sausage';
+import ChartView from '../../view/Chart';
+import List from '../../data/List';
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import { StageHandlerProgressParams, ECElement, ZRElementEvent } from '../../util/types';
+import BarSeriesModel, { BarSeriesOption, BarDataItemOption } from './BarSeries';
+import type Axis2D from '../../coord/cartesian/Axis2D';
+import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
+import type { RectLike } from 'zrender/src/core/BoundingRect';
+import type Model from '../../model/Model';
+
+const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
+const _eventPos = [0, 0];
+
+const mathMax = Math.max;
+const mathMin = Math.min;
+
+type CoordSysOfBar = BarSeriesModel['coordinateSystem'];
+type RectShape = graphic.Rect['shape']
+type SectorShape = graphic.Sector['shape']
+
+type SectorLayout = SectorShape;
+type RectLayout = RectShape;
+
+function isCartesian2D(coord: CoordSysOfBar): coord is Cartesian2D {
+    return coord.type === 'cartesian2d';
+}
 
-var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'barBorderWidth'];
-var _eventPos = [0, 0];
-
-// FIXME
-// Just for compatible with ec2.
-zrUtil.extend(Model.prototype, barItemStyle);
-
-function getClipArea(coord, data) {
-    var coordSysClipArea = coord.getArea && coord.getArea();
-    if (coord.type === 'cartesian2d') {
+function getClipArea(coord: CoordSysOfBar, data: List) {
+    if (isCartesian2D(coord)) {
+        var coordSysClipArea = coord.getArea && coord.getArea();
         var baseAxis = coord.getBaseAxis();
         // When boundaryGap is false or using time axis. bar may exceed the grid.
         // We should not clip this part.
@@ -62,11 +78,20 @@ function getClipArea(coord, data) {
     return coordSysClipArea;
 }
 
-export default echarts.extendChartView({
 
-    type: 'bar',
+class BarView extends ChartView {
+    static type = 'bar' as const
+    type = BarView.type
+
+    _data: List
+
+    _isLargeDraw: boolean
+
+    _backgroundGroup: graphic.Group
+
+    _backgroundEls: (graphic.Rect | graphic.Sector)[]
 
-    render: function (seriesModel, ecModel, api) {
+    render(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this._updateDrawMode(seriesModel);
 
         var coordinateSystemType = seriesModel.get('coordinateSystem');
@@ -83,37 +108,38 @@ export default echarts.extendChartView({
         }
 
         return this.group;
-    },
+    }
 
-    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+    incrementalPrepareRender(seriesModel: BarSeriesModel) {
         this._clear();
         this._updateDrawMode(seriesModel);
-    },
+    }
 
-    incrementalRender: function (params, seriesModel, ecModel, api) {
+    incrementalRender(
+        params: StageHandlerProgressParams, seriesModel: BarSeriesModel) {
         // Do not support progressive in normal mode.
         this._incrementalRenderLarge(params, seriesModel);
-    },
+    }
 
-    _updateDrawMode: function (seriesModel) {
+    _updateDrawMode(seriesModel: BarSeriesModel) {
         var isLargeDraw = seriesModel.pipelineContext.large;
-        if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
+        if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
             this._isLargeDraw = isLargeDraw;
             this._clear();
         }
-    },
+    }
 
-    _renderNormal: function (seriesModel, ecModel, api) {
+    _renderNormal(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         var group = this.group;
         var data = seriesModel.getData();
         var oldData = this._data;
 
         var coord = seriesModel.coordinateSystem;
         var baseAxis = coord.getBaseAxis();
-        var isHorizontalOrRadial;
+        var isHorizontalOrRadial: boolean;
 
         if (coord.type === 'cartesian2d') {
-            isHorizontalOrRadial = baseAxis.isHorizontal();
+            isHorizontalOrRadial = (baseAxis as Axis2D).isHorizontal();
         }
         else if (coord.type === 'polar') {
             isHorizontalOrRadial = baseAxis.dim === 'angle';
@@ -133,8 +159,8 @@ export default echarts.extendChartView({
         var drawBackground = seriesModel.get('showBackground', true);
         var backgroundModel = seriesModel.getModel('backgroundStyle');
 
-        var bgEls = [];
-        var oldBgEls = this._backgroundEls || [];
+        var bgEls: BarView['_backgroundEls'] = [];
+        var oldBgEls = this._backgroundEls;
 
         data.diff(oldData)
             .add(function (dataIndex) {
@@ -142,8 +168,10 @@ export default echarts.extendChartView({
                 var layout = getLayout[coord.type](data, dataIndex, itemModel);
 
                 if (drawBackground) {
-                    var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, layout);
-                    bgEl.useStyle(backgroundModel.getBarItemStyle());
+                    var bgEl = createBackgroundEl(
+                        coord, isHorizontalOrRadial, layout
+                    );
+                    bgEl.useStyle(getBarItemStyle(backgroundModel));
                     bgEls[dataIndex] = bgEl;
                 }
 
@@ -178,14 +206,16 @@ export default echarts.extendChartView({
 
                 if (drawBackground) {
                     var bgEl = oldBgEls[oldIndex];
-                    bgEl.useStyle(backgroundModel.getBarItemStyle());
+                    bgEl.useStyle(getBarItemStyle(backgroundModel));
                     bgEls[newIndex] = bgEl;
 
                     var shape = createBackgroundShape(isHorizontalOrRadial, layout, coord);
-                    graphic.updateProps(bgEl, { shape: shape }, animationModel, newIndex);
+                    graphic.updateProps(
+                        bgEl as graphic.Path, { shape: shape }, animationModel, newIndex
+                    );
                 }
 
-                var el = oldData.getItemGraphicEl(oldIndex);
+                var el = oldData.getItemGraphicEl(oldIndex) as graphic.Rect | graphic.Sector;
                 if (!data.hasValue(newIndex)) {
                     group.remove(el);
                     return;
@@ -200,7 +230,9 @@ export default echarts.extendChartView({
                 }
 
                 if (el) {
-                    graphic.updateProps(el, {shape: layout}, animationModel, newIndex);
+                    graphic.updateProps(el as graphic.Path, {
+                        shape: layout
+                    }, animationModel, newIndex);
                 }
                 else {
                     el = elementCreator[coord.type](
@@ -220,10 +252,10 @@ export default echarts.extendChartView({
             .remove(function (dataIndex) {
                 var el = oldData.getItemGraphicEl(dataIndex);
                 if (coord.type === 'cartesian2d') {
-                    el && removeRect(dataIndex, animationModel, el);
+                    el && removeRect(dataIndex, animationModel, el as graphic.Rect);
                 }
                 else {
-                    el && removeSector(dataIndex, animationModel, el);
+                    el && removeSector(dataIndex, animationModel, el as graphic.Sector);
                 }
             })
             .execute();
@@ -238,9 +270,9 @@ export default echarts.extendChartView({
         this._backgroundEls = bgEls;
 
         this._data = data;
-    },
+    }
 
-    _renderLarge: function (seriesModel, ecModel, api) {
+    _renderLarge(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this._clear();
         createLarge(seriesModel, this.group);
 
@@ -254,32 +286,30 @@ export default echarts.extendChartView({
         else {
             this.group.removeClipPath();
         }
-    },
+    }
 
-    _incrementalRenderLarge: function (params, seriesModel) {
+    _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel) {
         this._removeBackground();
         createLarge(seriesModel, this.group, true);
-    },
-
-    dispose: zrUtil.noop,
+    }
 
-    remove: function (ecModel) {
+    remove(ecModel?: GlobalModel) {
         this._clear(ecModel);
-    },
+    }
 
-    _clear: function (ecModel) {
+    _clear(ecModel?: GlobalModel) {
         var group = this.group;
         var data = this._data;
         if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
             this._removeBackground();
             this._backgroundEls = [];
 
-            data.eachItemGraphicEl(function (el) {
+            data.eachItemGraphicEl(function (el: ECElement & (graphic.Sector | graphic.Rect)) {
                 if (el.type === 'sector') {
-                    removeSector(el.dataIndex, ecModel, el);
+                    removeSector(el.dataIndex, ecModel, el as (graphic.Sector));
                 }
                 else {
-                    removeRect(el.dataIndex, ecModel, el);
+                    removeRect(el.dataIndex, ecModel, el as (graphic.Rect));
                 }
             });
         }
@@ -287,20 +317,21 @@ export default echarts.extendChartView({
             group.removeAll();
         }
         this._data = null;
-    },
+    }
 
-    _removeBackground: function () {
+    _removeBackground() {
         this.group.remove(this._backgroundGroup);
         this._backgroundGroup = null;
     }
+}
 
-});
-
-var mathMax = Math.max;
-var mathMin = Math.min;
-
-var clip = {
-    cartesian2d: function (coordSysBoundingRect, layout) {
+interface Clipper {
+    (coordSysBoundingRect: RectLike, layout: RectLayout | SectorLayout): boolean
+}
+var clip: {
+    [key in 'cartesian2d' | 'polar']: Clipper
+} = {
+    cartesian2d(coordSysBoundingRect: RectLike, layout: graphic.Rect['shape']) {
         var signWidth = layout.width < 0 ? -1 : 1;
         var signHeight = layout.height < 0 ? -1 : 1;
         // Needs positive width and height
@@ -338,15 +369,24 @@ var clip = {
         return clipped;
     },
 
-    polar: function (coordSysClipArea) {
+    polar() {
         return false;
     }
 };
 
-var elementCreator = {
+interface ElementCreator {
+    (
+        dataIndex: number, layout: RectLayout | SectorLayout, isHorizontalOrRadial: boolean,
+        animationModel: BarSeriesModel, isUpdate: boolean, roundCap?: boolean
+    ): graphic.Sector | graphic.Rect
+}
+
+var elementCreator: {
+    [key in 'polar' | 'cartesian2d']: ElementCreator
+} = {
 
-    cartesian2d: function (
-        dataIndex, layout, isHorizontal,
+    cartesian2d(
+        dataIndex, layout: RectLayout, isHorizontal,
         animationModel, isUpdate
     ) {
         var rect = new graphic.Rect({
@@ -359,8 +399,8 @@ var elementCreator = {
         // Animation
         if (animationModel) {
             var rectShape = rect.shape;
-            var animateProperty = isHorizontal ? 'height' : 'width';
-            var animateTarget = {};
+            var animateProperty = isHorizontal ? 'height' : 'width' as 'width' | 'height';
+            var animateTarget = {} as RectShape;
             rectShape[animateProperty] = 0;
             animateTarget[animateProperty] = layout[animateProperty];
             graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
@@ -371,8 +411,8 @@ var elementCreator = {
         return rect;
     },
 
-    polar: function (
-        dataIndex, layout, isRadial,
+    polar(
+        dataIndex: number, layout: SectorLayout, isRadial: boolean,
         animationModel, isUpdate, roundCap
     ) {
         // Keep the same logic with bar in catesion: use end value to control
@@ -393,8 +433,8 @@ var elementCreator = {
         // Animation
         if (animationModel) {
             var sectorShape = sector.shape;
-            var animateProperty = isRadial ? 'r' : 'endAngle';
-            var animateTarget = {};
+            var animateProperty = isRadial ? 'r' : 'endAngle' as 'r' | 'endAngle';
+            var animateTarget = {} as SectorShape;
             sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
             animateTarget[animateProperty] = layout[animateProperty];
             graphic[isUpdate ? 'updateProps' : 'initProps'](sector, {
@@ -406,7 +446,11 @@ var elementCreator = {
     }
 };
 
-function removeRect(dataIndex, animationModel, el) {
+function removeRect(
+    dataIndex: number,
+    animationModel: BarSeriesModel | GlobalModel,
+    el: graphic.Rect
+) {
     // Not show text when animating
     el.style.text = null;
     graphic.updateProps(el, {
@@ -418,7 +462,11 @@ function removeRect(dataIndex, animationModel, el) {
     });
 }
 
-function removeSector(dataIndex, animationModel, el) {
+function removeSector(
+    dataIndex: number,
+    animationModel: BarSeriesModel | GlobalModel,
+    el: graphic.Sector
+) {
     // Not show text when animating
     el.style.text = null;
     graphic.updateProps(el, {
@@ -430,9 +478,14 @@ function removeSector(dataIndex, animationModel, el) {
     });
 }
 
-var getLayout = {
-    cartesian2d: function (data, dataIndex, itemModel) {
-        var layout = data.getItemLayout(dataIndex);
+interface GetLayout {
+    (data: List, dataIndex: number, itemModel: Model<BarDataItemOption>): RectLayout | SectorLayout
+}
+var getLayout: {
+    [key in 'cartesian2d' | 'polar']: GetLayout
+} = {
+    cartesian2d(data, dataIndex, itemModel): RectLayout {
+        var layout = data.getItemLayout(dataIndex) as RectLayout;
         var fixedLineWidth = getLineWidth(itemModel, layout);
 
         // fix layout with lineWidth
@@ -446,7 +499,7 @@ var getLayout = {
         };
     },
 
-    polar: function (data, dataIndex, itemModel) {
+    polar(data, dataIndex, itemModel): SectorLayout {
         var layout = data.getItemLayout(dataIndex);
         return {
             cx: layout.cx,
@@ -455,24 +508,30 @@ var getLayout = {
             r: layout.r,
             startAngle: layout.startAngle,
             endAngle: layout.endAngle
-        };
+        } as SectorLayout;
     }
 };
 
-function isZeroOnPolar(layout) {
+function isZeroOnPolar(layout: SectorLayout) {
     return layout.startAngle != null
         && layout.endAngle != null
         && layout.startAngle === layout.endAngle;
 }
 
 function updateStyle(
-    el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar
+    el: graphic.Sector | graphic.Rect,
+    data: List, dataIndex: number,
+    itemModel: Model<BarDataItemOption>,
+    layout: RectLayout | SectorLayout,
+    seriesModel: BarSeriesModel,
+    isHorizontal: boolean,
+    isPolar: boolean
 ) {
     var color = data.getItemVisual(dataIndex, 'color');
     var opacity = data.getItemVisual(dataIndex, 'opacity');
     var stroke = data.getVisual('borderColor');
     var itemStyleModel = itemModel.getModel('itemStyle');
-    var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();
+    var hoverStyle = getBarItemStyle(itemModel.getModel(['emphasis', 'itemStyle']));
 
     if (!isPolar) {
         el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
@@ -480,34 +539,37 @@ function updateStyle(
 
     el.useStyle(zrUtil.defaults(
         {
-            stroke: isZeroOnPolar(layout) ? 'none' : stroke,
-            fill: isZeroOnPolar(layout) ? 'none' : color,
+            stroke: isZeroOnPolar(layout as SectorLayout) ? 'none' : stroke,
+            fill: isZeroOnPolar(layout as SectorLayout) ? 'none' : color,
             opacity: opacity
         },
-        itemStyleModel.getBarItemStyle()
+        getBarItemStyle(itemStyleModel)
     ));
 
     var cursorStyle = itemModel.getShallow('cursor');
     cursorStyle && el.attr('cursor', cursorStyle);
 
-    var labelPositionOutside = isHorizontal
-        ? (layout.height > 0 ? 'bottom' : 'top')
-        : (layout.width > 0 ? 'left' : 'right');
-
     if (!isPolar) {
+        var labelPositionOutside = isHorizontal
+            ? ((layout as RectLayout).height > 0 ? 'bottom' : 'top')
+            : ((layout as RectLayout).width > 0 ? 'left' : 'right');
+
         setLabel(
             el.style, hoverStyle, itemModel, color,
             seriesModel, dataIndex, labelPositionOutside
         );
     }
-    if (isZeroOnPolar(layout)) {
+    if (isZeroOnPolar(layout as SectorLayout)) {
         hoverStyle.fill = hoverStyle.stroke = 'none';
     }
     graphic.setHoverStyle(el, hoverStyle);
 }
 
 // In case width or height are too small.
-function getLineWidth(itemModel, rawLayout) {
+function getLineWidth(
+    itemModel: Model<BarSeriesOption>,
+    rawLayout: RectLayout
+) {
     var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
     // width or height may be NaN for empty data
     var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
@@ -515,19 +577,32 @@ function getLineWidth(itemModel, rawLayout) {
     return Math.min(lineWidth, width, height);
 }
 
+class LagePathShape {
+    points: ArrayLike<number>
+}
+interface LargePathProps extends PathProps {
+    shape?: LagePathShape
+}
+class LargePath extends Path {
+    type = 'largeBar'
 
-var LargePath = Path.extend({
+    shape: LagePathShape
 
-    type: 'largeBar',
+    __startPoint: number[]
+    __baseDimIdx: number
+    __largeDataIndices: ArrayLike<number>
+    __barWidth: number
 
-    shape: {points: []},
+    constructor(opts?: LargePathProps) {
+        super(opts, null, new LagePathShape());
+    }
 
-    buildPath: function (ctx, shape) {
+    buildPath(ctx: CanvasRenderingContext2D, shape: LagePathShape) {
         // Drawing lines is more efficient than drawing
         // a whole line or drawing rects.
-        var points = shape.points;
-        var startPoint = this.__startPoint;
-        var baseDimIdx = this.__baseDimIdx;
+        const points = shape.points;
+        const startPoint = this.__startPoint;
+        const baseDimIdx = this.__baseDimIdx;
 
         for (var i = 0; i < points.length; i += 2) {
             startPoint[baseDimIdx] = points[i + baseDimIdx];
@@ -535,9 +610,13 @@ var LargePath = Path.extend({
             ctx.lineTo(points[i], points[i + 1]);
         }
     }
-});
+}
 
-function createLarge(seriesModel, group, incremental) {
+function createLarge(
+    seriesModel: BarSeriesModel,
+    group: Group,
+    incremental?: boolean
+) {
     // TODO support polar
     var data = seriesModel.getData();
     var startPoint = [];
@@ -551,37 +630,37 @@ function createLarge(seriesModel, group, incremental) {
     var drawBackground = seriesModel.get('showBackground', true);
 
     if (drawBackground) {
-        var points = data.getLayout('largeBackgroundPoints');
-        var backgroundStartPoint = [];
+        const points = data.getLayout('largeBackgroundPoints');
+        const backgroundStartPoint: number[] = [];
         backgroundStartPoint[1 - baseDimIdx] = data.getLayout('backgroundStart');
 
-        var bgEl = new LargePath({
+        const bgEl = new LargePath({
             shape: {points: points},
             incremental: !!incremental,
-            __startPoint: backgroundStartPoint,
-            __baseDimIdx: baseDimIdx,
-            __largeDataIndices: largeDataIndices,
-            __barWidth: barWidth,
             silent: true,
             z2: 0
         });
+        bgEl.__startPoint = backgroundStartPoint;
+        bgEl.__baseDimIdx = baseDimIdx;
+        bgEl.__largeDataIndices = largeDataIndices;
+        bgEl.__barWidth = barWidth;
         setLargeBackgroundStyle(bgEl, backgroundModel, data);
         group.add(bgEl);
     }
 
     var el = new LargePath({
         shape: {points: data.getLayout('largePoints')},
-        incremental: !!incremental,
-        __startPoint: startPoint,
-        __baseDimIdx: baseDimIdx,
-        __largeDataIndices: largeDataIndices,
-        __barWidth: barWidth
+        incremental: !!incremental
     });
+    el.__startPoint = startPoint;
+    el.__baseDimIdx = baseDimIdx;
+    el.__largeDataIndices = largeDataIndices;
+    el.__barWidth = barWidth;
     group.add(el);
     setLargeStyle(el, seriesModel, data);
 
     // Enable tooltip and user mouse/touch event handlers.
-    el.seriesIndex = seriesModel.seriesIndex;
+    (el as ECElement).seriesIndex = seriesModel.seriesIndex;
 
     if (!seriesModel.get('silent')) {
         el.on('mousedown', largePathUpdateDataIndex);
@@ -590,13 +669,13 @@ function createLarge(seriesModel, group, incremental) {
 }
 
 // Use throttle to avoid frequently traverse to find dataIndex.
-var largePathUpdateDataIndex = throttle(function (event) {
+var largePathUpdateDataIndex = throttle(function (this: LargePath, event: ZRElementEvent) {
     var largePath = this;
     var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
-    largePath.dataIndex = dataIndex >= 0 ? dataIndex : null;
+    (largePath as ECElement).dataIndex = dataIndex >= 0 ? dataIndex : null;
 }, 30, false);
 
-function largePathFindDataIndex(largePath, x, y) {
+function largePathFindDataIndex(largePath: LargePath, x: number, y: number) {
     var baseDimIdx = largePath.__baseDimIdx;
     var valueDimIdx = 1 - baseDimIdx;
     var points = largePath.shape.points;
@@ -630,7 +709,11 @@ function largePathFindDataIndex(largePath, x, y) {
     return -1;
 }
 
-function setLargeStyle(el, seriesModel, data) {
+function setLargeStyle(
+    el: LargePath,
+    seriesModel: BarSeriesModel,
+    data: List
+) {
     var borderColor = data.getVisual('borderColor') || data.getVisual('color');
     var itemStyle = seriesModel.getModel('itemStyle').getItemStyle(['color', 'borderColor']);
 
@@ -640,51 +723,62 @@ function setLargeStyle(el, seriesModel, data) {
     el.style.lineWidth = data.getLayout('barWidth');
 }
 
-function setLargeBackgroundStyle(el, backgroundModel, data) {
+function setLargeBackgroundStyle(
+    el: LargePath,
+    backgroundModel: Model<BarSeriesOption['backgroundStyle']>,
+    data: List
+) {
     var borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
     var itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);
 
     el.useStyle(itemStyle);
     el.style.fill = null;
     el.style.stroke = borderColor;
-    el.style.lineWidth = data.getLayout('barWidth');
+    el.style.lineWidth = data.getLayout('barWidth') as number;
 }
 
-function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
-    var coordLayout;
-    var isPolar = coord.type === 'polar';
-    if (isPolar) {
-        coordLayout = coord.getArea();
+function createBackgroundShape(
+    isHorizontalOrRadial: boolean,
+    layout: SectorLayout | RectLayout,
+    coord: CoordSysOfBar
+): SectorShape | RectShape {
+    if (isCartesian2D(coord)) {
+        const rectShape = layout as RectShape;
+        const coordLayout = coord.getArea();
+        return {
+            x: isHorizontalOrRadial ? rectShape.x : coordLayout.x,
+            y: isHorizontalOrRadial ? coordLayout.y : rectShape.y,
+            width: isHorizontalOrRadial ? rectShape.width : coordLayout.width,
+            height: isHorizontalOrRadial ? coordLayout.height : rectShape.height
+        } as RectShape;
     }
     else {
-        coordLayout = coord.grid.getRect();
-    }
-
-    if (isPolar) {
+        const coordLayout = coord.getArea();
+        const sectorShape = layout as SectorShape;
         return {
             cx: coordLayout.cx,
             cy: coordLayout.cy,
-            r0: isHorizontalOrRadial ? coordLayout.r0 : layout.r0,
-            r: isHorizontalOrRadial ? coordLayout.r : layout.r,
-            startAngle: isHorizontalOrRadial ? layout.startAngle : 0,
-            endAngle: isHorizontalOrRadial ? layout.endAngle : Math.PI * 2
-        };
-    }
-    else {
-        return {
-            x: isHorizontalOrRadial ? layout.x : coordLayout.x,
-            y: isHorizontalOrRadial ? coordLayout.y : layout.y,
-            width: isHorizontalOrRadial ? layout.width : coordLayout.width,
-            height: isHorizontalOrRadial ? coordLayout.height : layout.height
-        };
+            r0: isHorizontalOrRadial ? coordLayout.r0 : sectorShape.r0,
+            r: isHorizontalOrRadial ? coordLayout.r : sectorShape.r,
+            startAngle: isHorizontalOrRadial ? sectorShape.startAngle : 0,
+            endAngle: isHorizontalOrRadial ? sectorShape.endAngle : Math.PI * 2
+        } as SectorShape;
     }
 }
 
-function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
+function createBackgroundEl(
+    coord: CoordSysOfBar,
+    isHorizontalOrRadial: boolean,
+    layout: SectorLayout | RectLayout
+): graphic.Rect | graphic.Sector {
     var ElementClz = coord.type === 'polar' ? graphic.Sector : graphic.Rect;
     return new ElementClz({
-        shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
+        shape: createBackgroundShape(isHorizontalOrRadial, layout, coord) as any,
         silent: true,
         z2: 0
     });
 }
+
+ChartView.registerClass(BarView);
+
+export default BarView;
\ No newline at end of file
diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts
index 9a2ce374ce3dd01a132e9617575ca9fe901e2c8b..d8c5dc7f6e7ee577245c1523040049a633547d1c 100644
--- a/src/chart/bar/BaseBarSeries.ts
+++ b/src/chart/bar/BaseBarSeries.ts
@@ -17,20 +17,76 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import SeriesModel from '../../model/Series';
 import createListFromArray from '../helper/createListFromArray';
+import {
+    SeriesOption,
+    SeriesOnCartesianOptionMixin,
+    SeriesOnPolarOptionMixin,
+    LabelOption,
+    ItemStyleOption,
+    ScaleDataValue
+} from '../../util/types';
+import GlobalModel from '../../model/Global';
+import Cartesian2D from '../../coord/cartesian/Cartesian2D';
+
+
+export interface BaseBarSeriesOption extends SeriesOption, SeriesOnCartesianOptionMixin, SeriesOnPolarOptionMixin {
+
+    /**
+     * Min height of bar
+     */
+    barMinHeight?: number
+    /**
+     * Min angle of bar. Avaiable on polar coordinate system
+     */
+    barMinAngle?: number
+
+    /**
+     * Max width of bar. Default to be 1 on cartesian coordinate system. Otherwise it's null
+     */
+    barMaxWidth?: number
 
-export default SeriesModel.extend({
+    barMinWidth?: number
 
-    type: 'series.__base_bar__',
+    /**
+     * Bar width. Will be calculated automatically.
+     * Can be pixel width or percent string.
+     */
+    barWidth?: number | string
+
+    /**
+     * Gap between each bar inside category. Default to be 30%. Can be an aboslute pixel value
+     */
+    barGap?: string | number
+
+    /**
+     * Gap between each category. Default to be 20%. can be an absolute pixel value.
+     */
+    barCategoryGap?: string | number
+
+    large?: boolean
+    largeThreshold?: number
+
+    label?: LabelOption
+    itemStyle?: ItemStyleOption
+    emphasis?: {
+        label?: LabelOption
+        itemStyle?: ItemStyleOption
+    }
+}
 
-    getInitialData: function (option, ecModel) {
+class BaseBarSeriesModel<Opts extends BaseBarSeriesOption = BaseBarSeriesOption> extends SeriesModel<Opts> {
+
+    static type = 'series.__base_bar__'
+    type = BaseBarSeriesModel.type
+
+
+    getInitialData(option: Opts, ecModel: GlobalModel) {
         return createListFromArray(this.getSource(), this, {useEncodeDefaulter: true});
-    },
+    }
 
-    getMarkerPosition: function (value) {
+    getMarkerPosition(value: ScaleDataValue[]) {
         var coordSys = this.coordinateSystem;
         if (coordSys) {
             // PENDING if clamp ?
@@ -38,16 +94,16 @@ export default SeriesModel.extend({
             var data = this.getData();
             var offset = data.getLayout('offset');
             var size = data.getLayout('size');
-            var offsetIndex = coordSys.getBaseAxis().isHorizontal() ? 0 : 1;
+            var offsetIndex = (coordSys as Cartesian2D).getBaseAxis().isHorizontal() ? 0 : 1;
             pt[offsetIndex] += offset + size / 2;
             return pt;
         }
         return [NaN, NaN];
-    },
+    }
 
-    defaultOption: {
-        zlevel: 0,                  // 一级层叠
-        z: 2,                       // 二级层叠
+    static defaultOption: BaseBarSeriesOption = {
+        zlevel: 0,
+        z: 2,
         coordinateSystem: 'cartesian2d',
         legendHoverLink: true,
         // stack: null
@@ -56,9 +112,7 @@ export default SeriesModel.extend({
         // xAxisIndex: 0,
         // yAxisIndex: 0,
 
-        // 最小高度改为0
         barMinHeight: 0,
-        // 最小角度为0，仅对极坐标系下的柱状图有效
         barMinAngle: 0,
         // cursor: null,
 
@@ -67,21 +121,11 @@ export default SeriesModel.extend({
         progressive: 3e3,
         progressiveChunkMode: 'mod',
 
-        // barMaxWidth: null,
-
-        // In cartesian, the default value is 1. Otherwise null.
-        // barMinWidth: null,
-
-        // 默认自适应
-        // barWidth: null,
-        // 柱间距离，默认为柱形宽度的30%，可设固定值
-        // barGap: '30%',
-        // 类目间柱形距离，默认为类目间距的20%，可设固定值
-        // barCategoryGap: '20%',
-        // label: {
-        //      show: false
-        // },
         itemStyle: {},
         emphasis: {}
     }
-});
\ No newline at end of file
+}
+
+SeriesModel.registerClass(BaseBarSeriesModel);
+
+export default BaseBarSeriesModel;
\ No newline at end of file
diff --git a/src/chart/bar/PictorialBarSeries.ts b/src/chart/bar/PictorialBarSeries.ts
index 61ff4cd038df4f2e57d1cf8a729bb47e31ef6dd5..fb41cb05a859883a1390f747004e80eb8dbf9aab 100644
--- a/src/chart/bar/PictorialBarSeries.ts
+++ b/src/chart/bar/PictorialBarSeries.ts
@@ -17,29 +17,114 @@
 * under the License.
 */
 
-// @ts-nocheck
+import BaseBarSeriesModel, { BaseBarSeriesOption } from './BaseBarSeries';
+import SeriesModel from '../../model/Series';
+import { OptionDataValue, ItemStyleOption, LabelOption, AnimationOptionMixin } from '../../util/types';
+import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 
-import BaseBarSeries from './BaseBarSeries';
+interface PictorialBarSeriesSymbolOption {
+    /**
+     * Customized bar shape
+     */
+    symbol?: string
+    /**
+     * Can be ['100%', '100%'], null means auto.
+     * The percent will be relative to category width. If no repeat.
+     * Will be relative to symbolBoundingData.
+     */
+    symbolSize?: (number | string)[] | number | string
 
-var PictorialBarSeries = BaseBarSeries.extend({
+    symbolRotate?: number
 
-    type: 'series.pictorialBar',
+    /**
+     * Default to be auto
+     */
+    symbolPosition?: 'start' | 'end' | 'center'
 
-    dependencies: ['grid'],
+    /**
+     * Can be percent offset relative to the symbolSize
+     */
+    symbolOffset?: (number | string)[] | number | string
+    /**
+     * start margin and end margin. Can be a number or a percent string relative to symbolSize.
+     * Auto margin by default.
+     */
+    symbolMargin?: (number | string)[] | number | string
+
+    /**
+     * true: means auto calculate repeat times and cut by data.
+     * a number: specifies repeat times, and do not cut by data.
+     * 'fixed': means auto calculate repeat times but do not cut by data.
+     *
+     * Otherwise means no repeat
+     */
+    symbolRepeat?: boolean | number | 'fixed'
+
+    /**
+     * From start to end or end to start.
+     */
+    symbolRepeatDirection?: 'start' | 'end'
+
+    symbolClip?: boolean
+
+    /**
+     * It will define the size of graphic elements.
+     */
+    symbolBoundingData?: number | number[]
+
+    symbolPatternSize?: number
+}
+
+type PictorialBarValue = OptionDataValue
+
+export interface PictorialBarDataItemOption extends PictorialBarSeriesSymbolOption,
+    // Pictorial bar support configure animation in each data item.
+    AnimationOptionMixin {
+    name?: string
+
+    value?: PictorialBarValue
+
+    itemStyle?: ItemStyleOption
+    label?: LabelOption
+
+    emphasis?: {
+        itemStyle?: ItemStyleOption
+        label?: LabelOption
+    }
+
+    hoverAnimation?: boolean
+
+    z?: number
+
+    cursor?: string
+}
+
+export interface PictorialBarSeriesOption extends BaseBarSeriesOption, PictorialBarSeriesSymbolOption {
+    coordinateSystem?: 'cartesian2d'
+
+    data?: (PictorialBarDataItemOption | PictorialBarValue)[]
+
+    hoverAnimation?: boolean
+}
+
+class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOption> {
+    static type = 'series.pictorialBar'
+    type = PictorialBarSeriesModel.type
+
+    static dependencies = ['grid']
+
+    coordinateSystem: Cartesian2D
+
+    static defaultOption: PictorialBarSeriesOption = {
 
-    defaultOption: {
         symbol: 'circle',     // Customized bar shape
-        symbolSize: null,     // Can be ['100%', '100%'], null means auto.
+        symbolSize: null,     //
         symbolRotate: null,
 
         symbolPosition: null, // 'start' or 'end' or 'center', null means auto.
         symbolOffset: null,
-        symbolMargin: null,   // start margin and end margin. Can be a number or a percent string.
-                                // Auto margin by defualt.
-        symbolRepeat: false,  // false/null/undefined, means no repeat.
-                                // Can be true, means auto calculate repeat times and cut by data.
-                                // Can be a number, specifies repeat times, and do not cut by data.
-                                // Can be 'fixed', means auto calculate repeat times but do not cut by data.
+        symbolMargin: null,
+        symbolRepeat: false,
         symbolRepeatDirection: 'end', // 'end' means from 'start' to 'end'.
 
         symbolClip: false,
@@ -53,13 +138,15 @@ var PictorialBarSeries = BaseBarSeries.extend({
         // Disable progressive
         progressive: 0,
         hoverAnimation: false // Open only when needed.
-    },
+    }
 
-    getInitialData: function (option) {
+    getInitialData(option: PictorialBarSeriesOption) {
         // Disable stack.
-        option.stack = null;
-        return PictorialBarSeries.superApply(this, 'getInitialData', arguments);
+        (option as any).stack = null;
+        return super.getInitialData.apply(this, arguments as any);
     }
-});
+}
+
+SeriesModel.registerClass(PictorialBarSeriesModel);
 
-export default PictorialBarSeries;
\ No newline at end of file
+export default PictorialBarSeriesModel;
\ No newline at end of file
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index 080d939fdbcfdab0efa9bc7c0aad61f005cc4c03..71f695f89f427e5260518823acc68cf6c41812a2 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -17,41 +17,132 @@
 * under the License.
 */
 
-// @ts-nocheck
-
-import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import {createSymbol} from '../../util/symbol';
 import {parsePercent, isNumeric} from '../../util/number';
 import {setLabel} from './helper';
-
-
-var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'];
+import ChartView from '../../view/Chart';
+import ComponentView from '../../view/Component';
+import PictorialBarSeriesModel, {PictorialBarDataItemOption} from './PictorialBarSeries';
+import ExtensionAPI from '../../ExtensionAPI';
+import List from '../../data/List';
+import GlobalModel from '../../model/Global';
+import Model from '../../model/Model';
+import { ColorString, ECElement, AnimationOptionMixin } from '../../util/types';
+import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
+import type Displayable from 'zrender/src/graphic/Displayable';
+import type Axis2D from '../../coord/cartesian/Axis2D';
+import type Element from 'zrender/src/Element';
+
+
+var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
 
 // index: +isHorizontal
 var LAYOUT_ATTRS = [
     {xy: 'x', wh: 'width', index: 0, posDesc: ['left', 'right']},
     {xy: 'y', wh: 'height', index: 1, posDesc: ['top', 'bottom']}
-];
+] as const;
 
 var pathForLineWidth = new graphic.Circle();
 
-var BarView = echarts.extendChartView({
+type ItemModel = Model<PictorialBarDataItemOption> & {
+    getAnimationDelayParams(path: any): {index: number, count: number}
+    isAnimationEnabled(): boolean
+}
+type RectShape = graphic.Rect['shape']
+type RectLayout = RectShape
+
+type PictorialSymbol = ReturnType<typeof createSymbol> & {
+    __pictorialAnimationIndex: number
+    __pictorialRepeatTimes: number
+}
+
+interface SymbolMeta {
+    dataIndex: number
+
+    symbolPatternSize: number
+    symbolType: string
+    symbolMargin: number
+    symbolSize: number[]
+    symbolScale: number[]
+    symbolRepeat: PictorialBarDataItemOption['symbolRepeat']
+    symbolClip: PictorialBarDataItemOption['symbolClip']
+    symbolRepeatDirection: PictorialBarDataItemOption['symbolRepeatDirection']
+
+    layout: RectLayout
+
+    repeatTimes: number
+
+    rotation: number
+
+    pathPosition: number[]
+    bundlePosition: number[]
+
+    pxSign: number
+
+    barRectShape: RectShape
+    clipShape: RectShape
+
+    boundingLength: number
+    repeatCutLength: number
+
+    valueLineWidth: number
+
+    opacity: number
+    color: ColorString
+    z2: number
+
+    itemModel: ItemModel
+
+    animationModel?: ItemModel
+
+    hoverAnimation: boolean
+}
+
+interface CreateOpts {
+    ecSize: { width: number, height: number }
+    seriesModel: PictorialBarSeriesModel
+    coordSys: Cartesian2D
+    coordSysExtent: number[][]
+    isHorizontal: boolean
+    valueDim: typeof LAYOUT_ATTRS[number]
+    categoryDim: typeof LAYOUT_ATTRS[number]
+}
+
+interface PictorialBarElement extends graphic.Group {
+    __pictorialBundle: graphic.Group
+    __pictorialShapeStr: string
+    __pictorialSymbolMeta: SymbolMeta
+
+    __pictorialMainPath: PictorialSymbol
 
-    type: 'pictorialBar',
+    __pictorialBarRect: graphic.Rect
 
-    render: function (seriesModel, ecModel, api) {
+    __pictorialClipPath: graphic.Rect
+}
+
+class PictorialBarView extends ChartView {
+    static type = 'pictorialBar'
+    readonly type = PictorialBarView.type
+
+    private _data: List
+
+    render(
+        seriesModel: PictorialBarSeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI
+    ) {
         var group = this.group;
         var data = seriesModel.getData();
         var oldData = this._data;
 
         var cartesian = seriesModel.coordinateSystem;
         var baseAxis = cartesian.getBaseAxis();
-        var isHorizontal = !!baseAxis.isHorizontal();
+        var isHorizontal = baseAxis.isHorizontal();
         var coordSysRect = cartesian.grid.getRect();
 
-        var opt = {
+        var opt: CreateOpts = {
             ecSize: {width: api.getWidth(), height: api.getHeight()},
             seriesModel: seriesModel,
             coordSys: cartesian,
@@ -61,7 +152,7 @@ var BarView = echarts.extendChartView({
             ],
             isHorizontal: isHorizontal,
             valueDim: LAYOUT_ATTRS[+isHorizontal],
-            categoryDim: LAYOUT_ATTRS[1 - isHorizontal]
+            categoryDim: LAYOUT_ATTRS[1 - (+isHorizontal)]
         };
 
         data.diff(oldData)
@@ -81,7 +172,7 @@ var BarView = echarts.extendChartView({
                 updateCommon(bar, opt, symbolMeta);
             })
             .update(function (newIndex, oldIndex) {
-                var bar = oldData.getItemGraphicEl(oldIndex);
+                var bar = oldData.getItemGraphicEl(oldIndex) as PictorialBarElement;
 
                 if (!data.hasValue(newIndex)) {
                     group.remove(bar);
@@ -113,24 +204,24 @@ var BarView = echarts.extendChartView({
                 updateCommon(bar, opt, symbolMeta);
             })
             .remove(function (dataIndex) {
-                var bar = oldData.getItemGraphicEl(dataIndex);
-                bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
+                var bar = oldData.getItemGraphicEl(dataIndex) as PictorialBarElement;
+                bar && removeBar(
+                    oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar
+                );
             })
             .execute();
 
         this._data = data;
 
         return this.group;
-    },
-
-    dispose: zrUtil.noop,
+    }
 
-    remove: function (ecModel, api) {
+    remove(ecModel: GlobalModel, api: ExtensionAPI) {
         var group = this.group;
         var data = this._data;
         if (ecModel.get('animation')) {
             if (data) {
-                data.eachItemGraphicEl(function (bar) {
+                data.eachItemGraphicEl(function (bar: PictorialBarElement & ECElement) {
                     removeBar(data, bar.dataIndex, ecModel, bar);
                 });
             }
@@ -139,12 +230,16 @@ var BarView = echarts.extendChartView({
             group.removeAll();
         }
     }
-});
-
+}
 
 // Set or calculate default value about symbol, and calculate layout info.
-function getSymbolMeta(data, dataIndex, itemModel, opt) {
-    var layout = data.getItemLayout(dataIndex);
+function getSymbolMeta(
+    data: List,
+    dataIndex: number,
+    itemModel: ItemModel,
+    opt: CreateOpts
+): SymbolMeta {
+    var layout = data.getItemLayout(dataIndex) as RectLayout;
     var symbolRepeat = itemModel.get('symbolRepeat');
     var symbolClip = itemModel.get('symbolClip');
     var symbolPosition = itemModel.get('symbolPosition') || 'start';
@@ -153,7 +248,7 @@ function getSymbolMeta(data, dataIndex, itemModel, opt) {
     var symbolPatternSize = itemModel.get('symbolPatternSize') || 2;
     var isAnimationEnabled = itemModel.isAnimationEnabled();
 
-    var symbolMeta = {
+    var symbolMeta: SymbolMeta = {
         dataIndex: dataIndex,
         layout: layout,
         itemModel: itemModel,
@@ -167,7 +262,7 @@ function getSymbolMeta(data, dataIndex, itemModel, opt) {
         animationModel: isAnimationEnabled ? itemModel : null,
         hoverAnimation: isAnimationEnabled && itemModel.get('hoverAnimation'),
         z2: itemModel.getShallow('z', true) || 0
-    };
+    } as SymbolMeta;
 
     prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
 
@@ -188,7 +283,7 @@ function getSymbolMeta(data, dataIndex, itemModel, opt) {
     }
 
     prepareLayoutInfo(
-        itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
+        itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset as number[],
         symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength,
         opt, symbolMeta
     );
@@ -197,7 +292,13 @@ function getSymbolMeta(data, dataIndex, itemModel, opt) {
 }
 
 // bar length can be negative.
-function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
+function prepareBarLength(
+    itemModel: ItemModel,
+    symbolRepeat: PictorialBarDataItemOption['symbolRepeat'],
+    layout: RectLayout,
+    opt: CreateOpts,
+    outputSymbolMeta: SymbolMeta
+) {
     var valueDim = opt.valueDim;
     var symbolBoundingData = itemModel.get('symbolBoundingData');
     var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
@@ -223,23 +324,31 @@ function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
         boundingLength = layout[valueDim.wh];
     }
 
-    output.boundingLength = boundingLength;
+    outputSymbolMeta.boundingLength = boundingLength;
 
     if (symbolRepeat) {
-        output.repeatCutLength = layout[valueDim.wh];
+        outputSymbolMeta.repeatCutLength = layout[valueDim.wh];
     }
 
-    output.pxSign = boundingLength > 0 ? 1 : boundingLength < 0 ? -1 : 0;
+    outputSymbolMeta.pxSign = boundingLength > 0 ? 1 : boundingLength < 0 ? -1 : 0;
 }
 
-function convertToCoordOnAxis(axis, value) {
+function convertToCoordOnAxis(axis: Axis2D, value: number) {
     return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
 }
 
 // Support ['100%', '100%']
 function prepareSymbolSize(
-    data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength,
-    pxSign, symbolPatternSize, opt, output
+    data: List,
+    dataIndex: number,
+    layout: RectLayout,
+    symbolRepeat: PictorialBarDataItemOption['symbolRepeat'],
+    symbolClip: unknown,
+    boundingLength: number,
+    pxSign: number,
+    symbolPatternSize: number,
+    opt: CreateOpts,
+    outputSymbolMeta: SymbolMeta
 ) {
     var valueDim = opt.valueDim;
     var categoryDim = opt.categoryDim;
@@ -270,10 +379,10 @@ function prepareSymbolSize(
         symbolRepeat ? categorySize : Math.abs(boundingLength)
     );
 
-    output.symbolSize = symbolSize;
+    outputSymbolMeta.symbolSize = symbolSize;
 
     // If x or y is less than zero, show reversed shape.
-    var symbolScale = output.symbolScale = [
+    var symbolScale = outputSymbolMeta.symbolScale = [
         symbolSize[0] / symbolPatternSize,
         symbolSize[1] / symbolPatternSize
     ];
@@ -281,7 +390,13 @@ function prepareSymbolSize(
     symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
 }
 
-function prepareLineWidth(itemModel, symbolScale, rotation, opt, output) {
+function prepareLineWidth(
+    itemModel: ItemModel,
+    symbolScale: number[],
+    rotation: number,
+    opt: CreateOpts,
+    outputSymbolMeta: SymbolMeta
+) {
     // In symbols are drawn with scale, so do not need to care about the case that width
     // or height are too small. But symbol use strokeNoScale, where acture lineWidth should
     // be calculated.
@@ -297,16 +412,26 @@ function prepareLineWidth(itemModel, symbolScale, rotation, opt, output) {
         valueLineWidth *= symbolScale[opt.valueDim.index];
     }
 
-    output.valueLineWidth = valueLineWidth;
+    outputSymbolMeta.valueLineWidth = valueLineWidth;
 }
 
 function prepareLayoutInfo(
-    itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
-    symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, output
+    itemModel: ItemModel,
+    symbolSize: number[],
+    layout: RectLayout,
+    symbolRepeat: PictorialBarDataItemOption['symbolRepeat'],
+    symbolClip: PictorialBarDataItemOption['symbolClip'],
+    symbolOffset: number[],
+    symbolPosition: PictorialBarDataItemOption['symbolPosition'],
+    valueLineWidth: number,
+    boundingLength: number,
+    repeatCutLength: number,
+    opt: CreateOpts,
+    outputSymbolMeta: SymbolMeta
 ) {
     var categoryDim = opt.categoryDim;
     var valueDim = opt.valueDim;
-    var pxSign = output.pxSign;
+    var pxSign = outputSymbolMeta.pxSign;
 
     var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
     var pathLen = unitLength;
@@ -316,35 +441,35 @@ function prepareLayoutInfo(
     // when rotating.
 
     if (symbolRepeat) {
-        var absBoundingLength = Math.abs(boundingLength);
+        const absBoundingLength = Math.abs(boundingLength);
 
-        var symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
-        var hasEndGap = false;
+        let symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
+        let hasEndGap = false;
         if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
             hasEndGap = true;
             symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
         }
-        symbolMargin = parsePercent(symbolMargin, symbolSize[valueDim.index]);
+        let symbolMarginNumeric = parsePercent(symbolMargin, symbolSize[valueDim.index]);
 
-        var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0);
+        var uLenWithMargin = Math.max(unitLength + symbolMarginNumeric * 2, 0);
 
         // When symbol margin is less than 0, margin at both ends will be subtracted
         // to ensure that all of the symbols will not be overflow the given area.
-        var endFix = hasEndGap ? 0 : symbolMargin * 2;
+        var endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
 
-        // Both final repeatTimes and final symbolMargin area calculated based on
+        // Both final repeatTimes and final symbolMarginNumeric area calculated based on
         // boundingLength.
         var repeatSpecified = isNumeric(symbolRepeat);
         var repeatTimes = repeatSpecified
-            ? symbolRepeat
+            ? symbolRepeat as number
             : toIntTimes((absBoundingLength + endFix) / uLenWithMargin);
 
         // Adjust calculate margin, to ensure each symbol is displayed
         // entirely in the given layout area.
         var mDiff = absBoundingLength - repeatTimes * unitLength;
-        symbolMargin = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
-        uLenWithMargin = unitLength + symbolMargin * 2;
-        endFix = hasEndGap ? 0 : symbolMargin * 2;
+        symbolMarginNumeric = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
+        uLenWithMargin = unitLength + symbolMarginNumeric * 2;
+        endFix = hasEndGap ? 0 : symbolMarginNumeric * 2;
 
         // Update repeatTimes when not all symbol will be shown.
         if (!repeatSpecified && symbolRepeat !== 'fixed') {
@@ -354,12 +479,12 @@ function prepareLayoutInfo(
         }
 
         pathLen = repeatTimes * uLenWithMargin - endFix;
-        output.repeatTimes = repeatTimes;
-        output.symbolMargin = symbolMargin;
+        outputSymbolMeta.repeatTimes = repeatTimes;
+        outputSymbolMeta.symbolMargin = symbolMarginNumeric;
     }
 
     var sizeFix = pxSign * (pathLen / 2);
-    var pathPosition = output.pathPosition = [];
+    var pathPosition = outputSymbolMeta.pathPosition = [] as number[];
     pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
     pathPosition[valueDim.index] = symbolPosition === 'start'
         ? sizeFix
@@ -371,17 +496,17 @@ function prepareLayoutInfo(
         pathPosition[1] += symbolOffset[1];
     }
 
-    var bundlePosition = output.bundlePosition = [];
+    var bundlePosition = outputSymbolMeta.bundlePosition = [] as number[];
     bundlePosition[categoryDim.index] = layout[categoryDim.xy];
     bundlePosition[valueDim.index] = layout[valueDim.xy];
 
-    var barRectShape = output.barRectShape = zrUtil.extend({}, layout);
+    var barRectShape = outputSymbolMeta.barRectShape = zrUtil.extend({}, layout);
     barRectShape[valueDim.wh] = pxSign * Math.max(
         Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix)
     );
     barRectShape[categoryDim.wh] = layout[categoryDim.wh];
 
-    var clipShape = output.clipShape = {};
+    var clipShape = outputSymbolMeta.clipShape = {} as RectShape;
     // Consider that symbol may be overflow layout rect.
     clipShape[categoryDim.xy] = -layout[categoryDim.xy];
     clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
@@ -389,7 +514,7 @@ function prepareLayoutInfo(
     clipShape[valueDim.wh] = layout[valueDim.wh];
 }
 
-function createPath(symbolMeta) {
+function createPath(symbolMeta: SymbolMeta) {
     var symbolPatternSize = symbolMeta.symbolPatternSize;
     var path = createSymbol(
         // Consider texture img, make a big size.
@@ -400,17 +525,19 @@ function createPath(symbolMeta) {
         symbolPatternSize,
         symbolMeta.color
     );
-    path.attr({
+    (path as Displayable).attr({
         culling: true
     });
     path.type !== 'image' && path.setStyle({
         strokeNoScale: true
     });
 
-    return path;
+    return path as PictorialSymbol;
 }
 
-function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
+function createOrUpdateRepeatSymbols(
+    bar: PictorialBarElement, opt: CreateOpts, symbolMeta: SymbolMeta, isUpdate?: boolean
+) {
     var bundle = bar.__pictorialBundle;
     var symbolSize = symbolMeta.symbolSize;
     var valueLineWidth = symbolMeta.valueLineWidth;
@@ -462,14 +589,13 @@ function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
 
         // FIXME
         // If all emphasis/normal through action.
-        path
-            .on('mouseover', onMouseOver)
+        path.on('mouseover', onMouseOver)
             .on('mouseout', onMouseOut);
 
         updateHoverAnimation(path, symbolMeta);
     }
 
-    function makeTarget(index) {
+    function makeTarget(index: number) {
         var position = pathPosition.slice();
         // (start && pxSign > 0) || (end && pxSign < 0): i = repeatTimes - index
         // Otherwise: i = index;
@@ -500,7 +626,12 @@ function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
     }
 }
 
-function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
+function createOrUpdateSingleSymbol(
+    bar: PictorialBarElement,
+    opt: CreateOpts,
+    symbolMeta: SymbolMeta,
+    isUpdate?: boolean
+) {
     var bundle = bar.__pictorialBundle;
     var mainPath = bar.__pictorialMainPath;
 
@@ -542,17 +673,21 @@ function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
 
     updateHoverAnimation(mainPath, symbolMeta);
 
-    function onMouseOver() {
+    function onMouseOver(this: typeof mainPath) {
         this.trigger('emphasis');
     }
 
-    function onMouseOut() {
+    function onMouseOut(this: typeof mainPath) {
         this.trigger('normal');
     }
 }
 
 // bar rect is used for label.
-function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
+function createOrUpdateBarRect(
+    bar: PictorialBarElement,
+    symbolMeta: SymbolMeta,
+    isUpdate?: boolean
+) {
     var rectShape = zrUtil.extend({}, symbolMeta.barRectShape);
 
     var barRect = bar.__pictorialBarRect;
@@ -575,7 +710,12 @@ function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
     }
 }
 
-function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
+function createOrUpdateClip(
+    bar: PictorialBarElement,
+    opt: CreateOpts,
+    symbolMeta: SymbolMeta,
+    isUpdate?: boolean
+) {
     // If not clip, symbol will be remove and rebuilt.
     if (symbolMeta.symbolClip) {
         var clipPath = bar.__pictorialClipPath;
@@ -595,7 +735,7 @@ function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
             bar.__pictorialBundle.setClipPath(clipPath);
             bar.__pictorialClipPath = clipPath;
 
-            var target = {};
+            var target = {} as RectShape;
             target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
 
             graphic[isUpdate ? 'updateProps' : 'initProps'](
@@ -605,14 +745,14 @@ function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
     }
 }
 
-function getItemModel(data, dataIndex) {
-    var itemModel = data.getItemModel(dataIndex);
+function getItemModel(data: List, dataIndex: number) {
+    var itemModel = data.getItemModel(dataIndex) as ItemModel;
     itemModel.getAnimationDelayParams = getAnimationDelayParams;
     itemModel.isAnimationEnabled = isAnimationEnabled;
     return itemModel;
 }
 
-function getAnimationDelayParams(path) {
+function getAnimationDelayParams(this: ItemModel, path: PictorialSymbol) {
     // The order is the same as the z-order, see `symbolRepeatDiretion`.
     return {
         index: path.__pictorialAnimationIndex,
@@ -620,12 +760,12 @@ function getAnimationDelayParams(path) {
     };
 }
 
-function isAnimationEnabled() {
+function isAnimationEnabled(this: ItemModel) {
     // `animation` prop can be set on itemModel in pictorial bar chart.
     return this.parentModel.isAnimationEnabled() && !!this.getShallow('animation');
 }
 
-function updateHoverAnimation(path, symbolMeta) {
+function updateHoverAnimation(path: PictorialSymbol, symbolMeta: SymbolMeta) {
     path.off('emphasis').off('normal');
 
     var scale = symbolMeta.symbolScale.slice();
@@ -641,11 +781,12 @@ function updateHoverAnimation(path, symbolMeta) {
                 scale: scale.slice()
             }, 400, 'elasticOut');
         });
+
 }
 
-function createBar(data, opt, symbolMeta, isUpdate) {
+function createBar(data: List, opt: CreateOpts, symbolMeta: SymbolMeta, isUpdate?: boolean) {
     // bar is the main element for each data.
-    var bar = new graphic.Group();
+    var bar = new graphic.Group() as PictorialBarElement;
     // bundle is used for location and clip.
     var bundle = new graphic.Group();
     bar.add(bundle);
@@ -669,7 +810,7 @@ function createBar(data, opt, symbolMeta, isUpdate) {
     return bar;
 }
 
-function updateBar(bar, opt, symbolMeta) {
+function updateBar(bar: PictorialBarElement, opt: CreateOpts, symbolMeta: SymbolMeta) {
     var animationModel = symbolMeta.animationModel;
     var dataIndex = symbolMeta.dataIndex;
     var bundle = bar.__pictorialBundle;
@@ -690,7 +831,9 @@ function updateBar(bar, opt, symbolMeta) {
     createOrUpdateClip(bar, opt, symbolMeta, true);
 }
 
-function removeBar(data, dataIndex, animationModel, bar) {
+function removeBar(
+    data: List, dataIndex: number, animationModel: Model<AnimationOptionMixin>, bar: PictorialBarElement
+) {
     // Not show text when animating
     var labelRect = bar.__pictorialBarRect;
     labelRect && (labelRect.style.text = null);
@@ -716,7 +859,7 @@ function removeBar(data, dataIndex, animationModel, bar) {
     data.setItemGraphicEl(dataIndex, null);
 }
 
-function getShapeStr(data, symbolMeta) {
+function getShapeStr(data: List, symbolMeta: SymbolMeta) {
     return [
         data.getItemVisual(symbolMeta.dataIndex, 'symbol') || 'none',
         !!symbolMeta.symbolRepeat,
@@ -724,14 +867,25 @@ function getShapeStr(data, symbolMeta) {
     ].join(':');
 }
 
-function eachPath(bar, cb, context) {
+function eachPath<Ctx>(
+    bar: PictorialBarElement,
+    cb: (this: Ctx, el: PictorialSymbol) => void,
+    context?: Ctx
+) {
     // Do not use Group#eachChild, because it do not support remove.
     zrUtil.each(bar.__pictorialBundle.children(), function (el) {
         el !== bar.__pictorialBarRect && cb.call(context, el);
     });
 }
 
-function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
+function updateAttr<T extends Element>(
+    el: T,
+    immediateAttrs: any,
+    animationAttrs: any,
+    symbolMeta: SymbolMeta,
+    isUpdate?: boolean,
+    cb?: () => void
+) {
     immediateAttrs && el.attr(immediateAttrs);
     // when symbolCip used, only clip path has init animation, otherwise it would be weird effect.
     if (symbolMeta.symbolClip && !isUpdate) {
@@ -744,14 +898,18 @@ function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb
     }
 }
 
-function updateCommon(bar, opt, symbolMeta) {
+function updateCommon(
+    bar: PictorialBarElement,
+    opt: CreateOpts,
+    symbolMeta: SymbolMeta
+) {
     var color = symbolMeta.color;
     var dataIndex = symbolMeta.dataIndex;
     var itemModel = symbolMeta.itemModel;
     // Color must be excluded.
     // Because symbol provide setColor individually to set fill and stroke
     var normalStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
-    var hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+    var hoverStyle = itemModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
     var cursorStyle = itemModel.getShallow('cursor');
 
     eachPath(bar, function (path) {
@@ -782,7 +940,7 @@ function updateCommon(bar, opt, symbolMeta) {
     graphic.setHoverStyle(barRect, barRectHoverStyle);
 }
 
-function toIntTimes(times) {
+function toIntTimes(times: number) {
     var roundedTimes = Math.round(times);
     // Escapse accurate error
     return Math.abs(times - roundedTimes) < 1e-4
@@ -790,4 +948,6 @@ function toIntTimes(times) {
         : Math.ceil(times);
 }
 
-export default BarView;
\ No newline at end of file
+ComponentView.registerClass(PictorialBarView);
+
+export default PictorialBarView;
\ No newline at end of file
diff --git a/src/chart/bar/barItemStyle.ts b/src/chart/bar/barItemStyle.ts
index 7776ac6b9d8be21acf0bd3b068d270b6b1bae70a..2ab2d260184465b4417d7be5bfeea194ecd09ec5 100644
--- a/src/chart/bar/barItemStyle.ts
+++ b/src/chart/bar/barItemStyle.ts
@@ -21,7 +21,7 @@ import makeStyleMapper from '../../model/mixin/makeStyleMapper';
 import { StyleProps } from 'zrender/src/graphic/Style';
 import Model from '../../model/Model';
 
-var getBarItemStyle = makeStyleMapper(
+var mapStyle = makeStyleMapper(
     [
         ['fill', 'color'],
         ['stroke', 'borderColor'],
@@ -48,14 +48,13 @@ type BarItemStyleKeys = 'fill'
     | 'shadowOffsetY'
     | 'shadowColor'
 type ItemStyleProps = Pick<StyleProps, BarItemStyleKeys>
-export default {
-    getBarItemStyle: function (this: Model, excludes?: BarItemStyleKeys[]): ItemStyleProps {
-        var style = getBarItemStyle(this, excludes);
-        if (this.getBorderLineDash) {
-            var lineDash = this.getBorderLineDash();
-            lineDash && (style.lineDash = lineDash);
-        }
-        return style;
+
+export function getBarItemStyle(model: Model, excludes?: BarItemStyleKeys[]): ItemStyleProps {
+    var style = mapStyle(model, excludes);
+    if (model.getBorderLineDash) {
+        var lineDash = model.getBorderLineDash();
+        lineDash && (style.lineDash = lineDash);
     }
-};
+    return style;
+}
 
diff --git a/src/chart/bar/helper.ts b/src/chart/bar/helper.ts
index fec4bde615c6bb3f2e3bb9189d0cf1c4f77e91ea..ec261641f64abd92f8c8399a361b6b7a9e3c4418 100644
--- a/src/chart/bar/helper.ts
+++ b/src/chart/bar/helper.ts
@@ -17,16 +17,25 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as graphic from '../../util/graphic';
 import {getDefaultLabel} from '../helper/labelHelper';
+import { StyleProps } from 'zrender/src/graphic/Style';
+import { LabelOption, ColorString } from '../../util/types';
+import BaseBarSeriesModel from './BaseBarSeries';
+import { BarDataItemOption } from './BarSeries';
+import Model from '../../model/Model';
 
 export function setLabel(
-    normalStyle, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside
+    normalStyle: StyleProps,
+    hoverStyle: StyleProps,
+    itemModel: Model<BarDataItemOption>,
+    color: ColorString,
+    seriesModel: BaseBarSeriesModel,
+    dataIndex: number,
+    labelPositionOutside: LabelOption['position']
 ) {
     var labelModel = itemModel.getModel('label');
-    var hoverLabelModel = itemModel.getModel('emphasis.label');
+    var hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
 
     graphic.setLabelStyle(
         normalStyle, hoverStyle, labelModel, hoverLabelModel,
@@ -39,11 +48,11 @@ export function setLabel(
         }
     );
 
-    fixPosition(normalStyle);
-    fixPosition(hoverStyle);
+    fixPosition(normalStyle, labelPositionOutside);
+    fixPosition(hoverStyle, labelPositionOutside);
 }
 
-function fixPosition(style, labelPositionOutside) {
+function fixPosition(style: StyleProps, labelPositionOutside: LabelOption['position']) {
     if (style.textPosition === 'outside') {
         style.textPosition = labelPositionOutside;
     }
diff --git a/src/component/axisPointer/axisTrigger.ts b/src/component/axisPointer/axisTrigger.ts
index 2f77710b67bfcba1e7697c8f24c65350b41e2a2d..c2064791c6799eb55a716d180417da14fed48283 100644
--- a/src/component/axisPointer/axisTrigger.ts
+++ b/src/component/axisPointer/axisTrigger.ts
@@ -274,7 +274,7 @@ function buildPayloadsBySeries(value: AxisValue, axisInfo: CollectedAxisInfo) {
         else {
             dataIndices = series.getData().indicesOfNearest(
                 dataDim[0],
-                value,
+                value as number,
                 // Add a threshold to avoid find the wrong dataIndex
                 // when data length is not same.
                 // false,
@@ -290,7 +290,7 @@ function buildPayloadsBySeries(value: AxisValue, axisInfo: CollectedAxisInfo) {
             return;
         }
 
-        var diff = value - seriesNestestValue;
+        var diff = value as number - seriesNestestValue;
         var dist = Math.abs(diff);
         // Consider category case
         if (dist <= minDist) {
@@ -364,7 +364,7 @@ function showTooltip(
         axisIndex: axisModel.componentIndex,
         axisType: axisModel.type,
         axisId: axisModel.id,
-        value: value,
+        value: value as number,
         // Caustion: viewHelper.getValueLabel is actually on "view stage", which
         // depends that all models have been updated. So it should not be performed
         // here. Considering axisPointerModel used here is volatile, which is hard
diff --git a/src/component/helper/RoamController.ts b/src/component/helper/RoamController.ts
index 91a65e2c19a05e905faa18300029d7c516407cf6..5f6454c6fb8419fc6ea84b99dea5b829d87b9809 100644
--- a/src/component/helper/RoamController.ts
+++ b/src/component/helper/RoamController.ts
@@ -102,7 +102,6 @@ class RoamController extends Eventful {
         const mousewheelHandler = bind(this._mousewheelHandler, this);
         const pinchHandler = bind(this._pinchHandler, this);
 
-
         /**
          * Notice: only enable needed types. For example, if 'zoom'
          * is not needed, 'zoom' should not be enabled, otherwise
diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts
index 1bc775751bdd75442651a68ada7b783c31aef76e..9129f75bddf64a8eaab8387af54a93ce6c551ef5 100644
--- a/src/component/visualMap/PiecewiseView.ts
+++ b/src/component/visualMap/PiecewiseView.ts
@@ -56,21 +56,7 @@ class PiecewiseVisualMapView extends VisualMapView {
             thisGroup, endsText[0], itemSize, showLabel, itemAlign
         );
 
-        zrUtil.each(viewData.viewPieceList, renderItem, this);
-
-        endsText && this._renderEndsText(
-            thisGroup, endsText[1], itemSize, showLabel, itemAlign
-        );
-
-        layout.box(
-            visualMapModel.get('orient'), thisGroup, visualMapModel.get('itemGap')
-        );
-
-        this.renderBackground(thisGroup);
-
-        this.positionGroup(thisGroup);
-
-        function renderItem(this: PiecewiseVisualMapView, item: typeof viewData.viewPieceList[number]) {
+        zrUtil.each(viewData.viewPieceList, function (item: typeof viewData.viewPieceList[number]) {
             var piece = item.piece;
 
             var itemGroup = new graphic.Group();
@@ -103,15 +89,29 @@ class PiecewiseVisualMapView extends VisualMapView {
             }
 
             thisGroup.add(itemGroup);
-        }
+        }, this);
+
+        endsText && this._renderEndsText(
+            thisGroup, endsText[1], itemSize, showLabel, itemAlign
+        );
+
+        layout.box(
+            visualMapModel.get('orient'), thisGroup, visualMapModel.get('itemGap')
+        );
+
+        this.renderBackground(thisGroup);
+
+        this.positionGroup(thisGroup);
+
+
     }
 
     private _enableHoverLink(itemGroup: graphic.Group, pieceIndex: number) {
         itemGroup
-            .on('mouseover', zrUtil.bind(onHoverLink, this, 'highlight'))
-            .on('mouseout', zrUtil.bind(onHoverLink, this, 'downplay'));
+            .on('mouseover', () => onHoverLink('highlight'))
+            .on('mouseout', () => onHoverLink('downplay'));
 
-        function onHoverLink(this: PiecewiseVisualMapView, method?: 'highlight' | 'downplay') {
+        const onHoverLink = (method?: 'highlight' | 'downplay') => {
             var visualMapModel = this.visualMapModel;
 
             // TODO: TYPE More detailed action types
@@ -122,7 +122,7 @@ class PiecewiseVisualMapView extends VisualMapView {
                     visualMapModel
                 )
             });
-        }
+        };
     }
 
     private _getItemAlign(): helper.ItemAlign {
diff --git a/src/coord/cartesian/Cartesian2D.ts b/src/coord/cartesian/Cartesian2D.ts
index 4a69942a45850b4f83b6d7f9cf0ff8d6d2d25c75..8105fbd3d1a375ce2ea224d61adbc6b784ec6b60 100644
--- a/src/coord/cartesian/Cartesian2D.ts
+++ b/src/coord/cartesian/Cartesian2D.ts
@@ -28,7 +28,7 @@ import GridModel from './GridModel';
 
 class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
 
-    readonly type: string = 'cartesian2d';
+    readonly type = 'cartesian2d';
 
     readonly dimensions = cartesian2DDimensions;
 
diff --git a/src/data/List.ts b/src/data/List.ts
index 75afe4f631dbdc79c533b9f6a70472789acaf2b8..602df5ed8aaa172dcc32e64d4b5ed46cdb83d918 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -21,7 +21,6 @@
 
 /**
  * List for data storage
- * @module echarts/data/List
  */
 
 import {__DEV__} from '../config';
diff --git a/src/echarts.ts b/src/echarts.ts
index 596573bfe135f61f2c3c0387d9c24125c70972e8..c82c1d6ffd6742f0aa3aad4fef400f98be5d7c74 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -161,7 +161,7 @@ function toLowercaseNameAndCallEventful<T>(host: T, method: EventMethodName, arg
 }
 
 
-class MessageCenter extends Eventful<MessageCenter> {}
+class MessageCenter extends Eventful {}
 var messageCenterProto = MessageCenter.prototype;
 messageCenterProto.on = createRegisterEventWithLowercaseMessageCenter('on');
 messageCenterProto.off = createRegisterEventWithLowercaseMessageCenter('off');
@@ -761,7 +761,7 @@ class ECharts {
 
     private _initEvents(): void {
         each(MOUSE_EVENT_NAMES, function (eveName) {
-            var handler = function (this: ECharts, e: ElementEvent) {
+            const handler = (e: ElementEvent) => {
                 var ecModel = this.getModel();
                 var targetEl = e.target;
                 var el = targetEl as ECElement;
diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts
index e17ba6c6e79dcc1e65e0ec7fab4a920249d908d6..999dfe95631fd43dc0d87488bf54e43ff5cb3cff 100644
--- a/src/layout/barGrid.ts
+++ b/src/layout/barGrid.ts
@@ -17,41 +17,78 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 /* global Float32Array */
 
 import * as zrUtil from 'zrender/src/core/util';
 import {parsePercent} from '../util/number';
 import {isDimensionStacked} from '../data/helper/dataStackHelper';
 import createRenderPlanner from '../chart/helper/createRenderPlanner';
+import BarSeriesModel from '../chart/bar/BarSeries';
+import Axis2D from '../coord/cartesian/Axis2D';
+import GlobalModel from '../model/Global';
+import type Cartesian2D from '../coord/cartesian/Cartesian2D';
+import { StageHandler, Dictionary } from '../util/types';
 
 var STACK_PREFIX = '__ec_stack_';
 var LARGE_BAR_MIN_WIDTH = 0.5;
 
 var LargeArr = typeof Float32Array !== 'undefined' ? Float32Array : Array;
 
-function getSeriesStackId(seriesModel) {
+
+function getSeriesStackId(seriesModel: BarSeriesModel): string {
     return seriesModel.get('stack') || STACK_PREFIX + seriesModel.seriesIndex;
 }
 
-function getAxisKey(axis) {
+function getAxisKey(axis: Axis2D): string {
     return axis.dim + axis.index;
 }
 
+interface LayoutSeriesInfo {
+    bandWidth: number
+    barWidth: number
+    barMaxWidth: number
+    barMinWidth: number
+    barGap: number | string
+    barCategoryGap: number | string
+    axisKey: string
+    stackId: string
+}
+
+interface StackInfo {
+    width: number
+    maxWidth: number
+    minWidth?: number
+}
+
+/**
+ * {
+ *  [coordSysId]: {
+ *      [stackId]: {bandWidth, offset, width}
+ *  }
+ * }
+ */
+type BarWidthAndOffset = Dictionary<Dictionary<{
+    bandWidth: number
+    offset: number
+    offsetCenter: number
+    width: number
+}>>
+
+interface LayoutOption {
+    axis: Axis2D
+    count: number
+
+    barWidth?: number
+    barMaxWidth?: number
+    barMinWidth?: number
+    barGap?: number
+    barCategoryGap?: number
+}
 /**
- * @param {Object} opt
- * @param {module:echarts/coord/Axis} opt.axis Only support category axis currently.
- * @param {number} opt.count Positive interger.
- * @param {number} [opt.barWidth]
- * @param {number} [opt.barMaxWidth]
- * @param {number} [opt.barMinWidth]
- * @param {number} [opt.barGap]
- * @param {number} [opt.barCategoryGap]
  * @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
  */
-export function getLayoutOnAxis(opt) {
-    var params = [];
+export function getLayoutOnAxis(opt: LayoutOption) {
+    var params: LayoutSeriesInfo[] = [];
     var baseAxis = opt.axis;
     var axisKey = 'axis0';
 
@@ -65,7 +102,7 @@ export function getLayoutOnAxis(opt) {
             bandWidth: bandWidth,
             axisKey: axisKey,
             stackId: STACK_PREFIX + i
-        }, opt));
+        }, opt) as LayoutSeriesInfo);
     }
     var widthAndOffsets = doCalBarWidthAndOffset(params);
 
@@ -79,9 +116,9 @@ export function getLayoutOnAxis(opt) {
     return result;
 }
 
-export function prepareLayoutBarSeries(seriesType, ecModel) {
-    var seriesModels = [];
-    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+export function prepareLayoutBarSeries(seriesType: string, ecModel: GlobalModel): BarSeriesModel[] {
+    var seriesModels: BarSeriesModel[] = [];
+    ecModel.eachSeriesByType(seriesType, function (seriesModel: BarSeriesModel) {
         // Check series coordinate, do layout for cartesian2d only
         if (isOnCartesian(seriesModel) && !isInLargeMode(seriesModel)) {
             seriesModels.push(seriesModel);
@@ -99,7 +136,7 @@ export function prepareLayoutBarSeries(seriesType, ecModel) {
  * {'x_0': [1000000]}.
  * The value of 1000000 is in milliseconds.
  */
-function getValueAxesMinGaps(barSeries) {
+function getValueAxesMinGaps(barSeries: BarSeriesModel[]) {
     /**
      * Map from axis.index to values.
      * For a single time axis, axisValues is in the form like
@@ -107,9 +144,9 @@ function getValueAxesMinGaps(barSeries) {
      * Items in axisValues[x], e.g. 1495555200000, are time values of all
      * series.
      */
-    var axisValues = {};
+    var axisValues: Dictionary<number[]> = {};
     zrUtil.each(barSeries, function (seriesModel) {
-        var cartesian = seriesModel.coordinateSystem;
+        var cartesian = seriesModel.coordinateSystem as Cartesian2D;
         var baseAxis = cartesian.getBaseAxis();
         if (baseAxis.type !== 'time' && baseAxis.type !== 'value') {
             return;
@@ -119,7 +156,7 @@ function getValueAxesMinGaps(barSeries) {
         var key = baseAxis.dim + '_' + baseAxis.index;
         var dim = data.mapDimension(baseAxis.dim);
         for (var i = 0, cnt = data.count(); i < cnt; ++i) {
-            var value = data.get(dim, i);
+            var value = data.get(dim, i) as number;
             if (!axisValues[key]) {
                 // No previous data for the axis
                 axisValues[key] = [value];
@@ -132,7 +169,7 @@ function getValueAxesMinGaps(barSeries) {
         }
     });
 
-    var axisMinGaps = [];
+    var axisMinGaps: Dictionary<number> = {};
     for (var key in axisValues) {
         if (axisValues.hasOwnProperty(key)) {
             var valuesInAxis = axisValues[key];
@@ -158,12 +195,12 @@ function getValueAxesMinGaps(barSeries) {
     return axisMinGaps;
 }
 
-export function makeColumnLayout(barSeries) {
+export function makeColumnLayout(barSeries: BarSeriesModel[]) {
     var axisMinGaps = getValueAxesMinGaps(barSeries);
 
-    var seriesInfoList = [];
+    var seriesInfoList: LayoutSeriesInfo[] = [];
     zrUtil.each(barSeries, function (seriesModel) {
-        var cartesian = seriesModel.coordinateSystem;
+        var cartesian = seriesModel.coordinateSystem as Cartesian2D;
         var baseAxis = cartesian.getBaseAxis();
         var axisExtent = baseAxis.getExtent();
 
@@ -215,14 +252,23 @@ export function makeColumnLayout(barSeries) {
     return doCalBarWidthAndOffset(seriesInfoList);
 }
 
-function doCalBarWidthAndOffset(seriesInfoList) {
+function doCalBarWidthAndOffset(seriesInfoList: LayoutSeriesInfo[]) {
+    interface ColumnOnAxisInfo {
+        bandWidth: number
+        remainedWidth: number
+        autoWidthCount: number
+        categoryGap: number | string
+        gap: number | string
+        stacks: Dictionary<StackInfo>
+    }
+
     // Columns info on each category axis. Key is cartesian name
-    var columnsMap = {};
+    var columnsMap: Dictionary<ColumnOnAxisInfo> = {};
 
     zrUtil.each(seriesInfoList, function (seriesInfo, idx) {
         var axisKey = seriesInfo.axisKey;
         var bandWidth = seriesInfo.bandWidth;
-        var columnsOnAxis = columnsMap[axisKey] || {
+        var columnsOnAxis: ColumnOnAxisInfo = columnsMap[axisKey] || {
             bandWidth: bandWidth,
             remainedWidth: bandWidth,
             autoWidthCount: 0,
@@ -266,7 +312,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
         (barCategoryGap != null) && (columnsOnAxis.categoryGap = barCategoryGap);
     });
 
-    var result = {};
+    var result: BarWidthAndOffset = {};
 
     zrUtil.each(columnsMap, function (columnsOnAxis, coordSysName) {
 
@@ -333,7 +379,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
 
 
         var widthSum = 0;
-        var lastColumn;
+        var lastColumn: StackInfo;
         zrUtil.each(stacks, function (column, idx) {
             if (!column.width) {
                 column.width = autoWidth;
@@ -351,7 +397,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
                 bandWidth: bandWidth,
                 offset: offset,
                 width: column.width
-            };
+            } as BarWidthAndOffset[string][string];
 
             offset += column.width * (1 + barGapPercent);
         });
@@ -361,37 +407,35 @@ function doCalBarWidthAndOffset(seriesInfoList) {
 }
 
 /**
- * @param {Object} barWidthAndOffset The result of makeColumnLayout
- * @param {module:echarts/coord/Axis} axis
- * @param {module:echarts/model/Series} [seriesModel] If not provided, return all.
- * @return {Object} {stackId: {offset, width}} or {offset, width} if seriesModel provided.
+ * @param barWidthAndOffset The result of makeColumnLayout
+ * @param seriesModel If not provided, return all.
+ * @return {stackId: {offset, width}} or {offset, width} if seriesModel provided.
  */
-export function retrieveColumnLayout(barWidthAndOffset, axis, seriesModel) {
+export function retrieveColumnLayout(
+    barWidthAndOffset: BarWidthAndOffset,
+    axis: Axis2D,
+    seriesModel: BarSeriesModel
+) {
     if (barWidthAndOffset && axis) {
         var result = barWidthAndOffset[getAxisKey(axis)];
         if (result != null && seriesModel != null) {
-            result = result[getSeriesStackId(seriesModel)];
+            return result[getSeriesStackId(seriesModel)];
         }
         return result;
     }
 }
 
-/**
- * @param {string} seriesType
- * @param {module:echarts/model/Global} ecModel
- */
-export function layout(seriesType, ecModel) {
+export function layout(seriesType: string, ecModel: GlobalModel) {
 
     var seriesModels = prepareLayoutBarSeries(seriesType, ecModel);
     var barWidthAndOffset = makeColumnLayout(seriesModels);
 
-    var lastStackCoords = {};
-    var lastStackCoordsOrigin = {};
+    var lastStackCoords: Dictionary<{p: number, n: number}[]> = {};
 
     zrUtil.each(seriesModels, function (seriesModel) {
 
         var data = seriesModel.getData();
-        var cartesian = seriesModel.coordinateSystem;
+        var cartesian = seriesModel.coordinateSystem as Cartesian2D;
         var baseAxis = cartesian.getBaseAxis();
 
         var stackId = getSeriesStackId(seriesModel);
@@ -403,7 +447,6 @@ export function layout(seriesType, ecModel) {
         var barMinHeight = seriesModel.get('barMinHeight') || 0;
 
         lastStackCoords[stackId] = lastStackCoords[stackId] || [];
-        lastStackCoordsOrigin[stackId] = lastStackCoordsOrigin[stackId] || []; // Fix #4243
 
         data.setLayout({
             bandWidth: columnLayoutInfo.bandWidth,
@@ -420,9 +463,9 @@ export function layout(seriesType, ecModel) {
 
         for (var idx = 0, len = data.count(); idx < len; idx++) {
             var value = data.get(valueDim, idx);
-            var baseValue = data.get(baseDim, idx);
+            var baseValue = data.get(baseDim, idx) as number;
 
-            var sign = value >= 0 ? 'p' : 'n';
+            var sign = value >= 0 ? 'p' : 'n' as 'p' | 'n';
             var baseCoord = valueAxisStart;
 
             // Because of the barMinHeight, we can not use the value in
@@ -478,23 +521,23 @@ export function layout(seriesType, ecModel) {
             });
         }
 
-    }, this);
+    });
 }
 
 // TODO: Do not support stack in large mode yet.
-export var largeLayout = {
+export var largeLayout: StageHandler = {
 
     seriesType: 'bar',
 
     plan: createRenderPlanner(),
 
-    reset: function (seriesModel) {
+    reset: function (seriesModel: BarSeriesModel) {
         if (!isOnCartesian(seriesModel) || !isInLargeMode(seriesModel)) {
             return;
         }
 
         var data = seriesModel.getData();
-        var cartesian = seriesModel.coordinateSystem;
+        var cartesian = seriesModel.coordinateSystem as Cartesian2D;
         var coordLayout = cartesian.grid.getRect();
         var baseAxis = cartesian.getBaseAxis();
         var valueAxis = cartesian.getOtherAxis(baseAxis);
@@ -510,54 +553,56 @@ export var largeLayout = {
             barWidth = LARGE_BAR_MIN_WIDTH;
         }
 
-        return {progress: progress};
-
-        function progress(params, data) {
-            var count = params.count;
-            var largePoints = new LargeArr(count * 2);
-            var largeBackgroundPoints = new LargeArr(count * 2);
-            var largeDataIndices = new LargeArr(count);
-            var dataIndex;
-            var coord = [];
-            var valuePair = [];
-            var pointsOffset = 0;
-            var idxOffset = 0;
-
-            while ((dataIndex = params.next()) != null) {
-                valuePair[valueDimIdx] = data.get(valueDim, dataIndex);
-                valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
-
-                coord = cartesian.dataToPoint(valuePair, null, coord);
-                // Data index might not be in order, depends on `progressiveChunkMode`.
-                largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
-                largePoints[pointsOffset++] = coord[0];
-                largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
-                largePoints[pointsOffset++] = coord[1];
-                largeDataIndices[idxOffset++] = dataIndex;
-            }
+        return {
+            progress: function (params, data) {
+                var count = params.count;
+                var largePoints = new LargeArr(count * 2);
+                var largeBackgroundPoints = new LargeArr(count * 2);
+                var largeDataIndices = new LargeArr(count);
+                var dataIndex;
+                var coord: number[] = [];
+                var valuePair = [];
+                var pointsOffset = 0;
+                var idxOffset = 0;
+
+                while ((dataIndex = params.next()) != null) {
+                    valuePair[valueDimIdx] = data.get(valueDim, dataIndex);
+                    valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
+
+                    coord = cartesian.dataToPoint(valuePair, null, coord);
+                    // Data index might not be in order, depends on `progressiveChunkMode`.
+                    largeBackgroundPoints[pointsOffset] =
+                        valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
+                    largePoints[pointsOffset++] = coord[0];
+                    largeBackgroundPoints[pointsOffset] =
+                        valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
+                    largePoints[pointsOffset++] = coord[1];
+                    largeDataIndices[idxOffset++] = dataIndex;
+                }
 
-            data.setLayout({
-                largePoints: largePoints,
-                largeDataIndices: largeDataIndices,
-                largeBackgroundPoints: largeBackgroundPoints,
-                barWidth: barWidth,
-                valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
-                backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
-                valueAxisHorizontal: valueAxisHorizontal
-            });
-        }
+                data.setLayout({
+                    largePoints: largePoints,
+                    largeDataIndices: largeDataIndices,
+                    largeBackgroundPoints: largeBackgroundPoints,
+                    barWidth: barWidth,
+                    valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
+                    backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
+                    valueAxisHorizontal: valueAxisHorizontal
+                });
+            }
+        };
     }
 };
 
-function isOnCartesian(seriesModel) {
+function isOnCartesian(seriesModel: BarSeriesModel) {
     return seriesModel.coordinateSystem && seriesModel.coordinateSystem.type === 'cartesian2d';
 }
 
-function isInLargeMode(seriesModel) {
+function isInLargeMode(seriesModel: BarSeriesModel) {
     return seriesModel.pipelineContext && seriesModel.pipelineContext.large;
 }
 
 // See cases in `test/bar-start.html` and `#7412`, `#8747`.
-function getValueAxisStart(baseAxis, valueAxis, stacked) {
+function getValueAxisStart(baseAxis: Axis2D, valueAxis: Axis2D, stacked?: boolean) {
     return valueAxis.toGlobalCoord(valueAxis.dataToCoord(valueAxis.type === 'log' ? 1 : 0));
 }
diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts
index 6d5701e6a7b75cb44b055d9fff0d1466a0e9bec3..6909a7d80ec40044010dff8cccda9c60dadf6169 100644
--- a/src/layout/barPolar.ts
+++ b/src/layout/barPolar.ts
@@ -17,33 +17,53 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import {parsePercent} from '../util/number';
 import {isDimensionStacked} from '../data/helper/dataStackHelper';
+import type BarSeriesModel from '../chart/bar/BarSeries';
+import type Polar from '../coord/polar/Polar';
+import AngleAxis from '../coord/polar/AngleAxis';
+import RadiusAxis from '../coord/polar/RadiusAxis';
+import GlobalModel from '../model/Global';
+import ExtensionAPI from '../ExtensionAPI';
+import { Dictionary } from '../util/types';
+
+type PolarAxis = AngleAxis | RadiusAxis
+
+interface StackInfo {
+    width: number
+    maxWidth: number
+}
+interface LayoutColumnInfo {
+    autoWidthCount: number
+    bandWidth: number
+    remainedWidth: number
+    categoryGap: string | number
+    gap: string | number
+    stacks: Dictionary<StackInfo>
+}
+
+interface BarWidthAndOffset {
+    width: number
+    offset: number
+}
 
-function getSeriesStackId(seriesModel) {
+function getSeriesStackId(seriesModel: BarSeriesModel) {
     return seriesModel.get('stack')
         || '__ec_stack_' + seriesModel.seriesIndex;
 }
 
-function getAxisKey(polar, axis) {
+function getAxisKey(polar: Polar, axis: PolarAxis) {
     return axis.dim + polar.model.componentIndex;
 }
 
-/**
- * @param {string} seriesType
- * @param {module:echarts/model/Global} ecModel
- * @param {module:echarts/ExtensionAPI} api
- */
-function barLayoutPolar(seriesType, ecModel, api) {
+function barLayoutPolar(seriesType: string, ecModel: GlobalModel, api: ExtensionAPI) {
 
-    var lastStackCoords = {};
+    var lastStackCoords: Dictionary<{p: number, n: number}[]> = {};
 
     var barWidthAndOffset = calRadialBar(
         zrUtil.filter(
-            ecModel.getSeriesByType(seriesType),
+            ecModel.getSeriesByType(seriesType) as BarSeriesModel[],
             function (seriesModel) {
                 return !ecModel.isSeriesFiltered(seriesModel)
                     && seriesModel.coordinateSystem
@@ -52,7 +72,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
         )
     );
 
-    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+    ecModel.eachSeriesByType(seriesType, function (seriesModel: BarSeriesModel) {
 
         // Check series coordinate, do layout for polar only
         if (seriesModel.coordinateSystem.type !== 'polar') {
@@ -60,7 +80,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
         }
 
         var data = seriesModel.getData();
-        var polar = seriesModel.coordinateSystem;
+        var polar = seriesModel.coordinateSystem as Polar;
         var baseAxis = polar.getBaseAxis();
         var axisKey = getAxisKey(polar, baseAxis);
 
@@ -88,9 +108,9 @@ function barLayoutPolar(seriesType, ecModel, api) {
 
         for (var idx = 0, len = data.count(); idx < len; idx++) {
             var value = data.get(valueDim, idx);
-            var baseValue = data.get(baseDim, idx);
+            var baseValue = data.get(baseDim, idx) as number;
 
-            var sign = value >= 0 ? 'p' : 'n';
+            var sign = value >= 0 ? 'p' : 'n' as 'p' | 'n';
             var baseCoord = valueAxisStart;
 
             // Because of the barMinHeight, we can not use the value in
@@ -114,8 +134,8 @@ function barLayoutPolar(seriesType, ecModel, api) {
 
             // radial sector
             if (valueAxis.dim === 'radius') {
-                var radiusSpan = valueAxis.dataToRadius(value) - valueAxisStart;
-                var angle = baseAxis.dataToAngle(baseValue);
+                var radiusSpan = valueAxis.dataToCoord(value) - valueAxisStart;
+                var angle = baseAxis.dataToCoord(baseValue);
 
                 if (Math.abs(radiusSpan) < barMinHeight) {
                     radiusSpan = (radiusSpan < 0 ? -1 : 1) * barMinHeight;
@@ -130,8 +150,8 @@ function barLayoutPolar(seriesType, ecModel, api) {
             }
             // tangential sector
             else {
-                var angleSpan = valueAxis.dataToAngle(value, clampLayout) - valueAxisStart;
-                var radius = baseAxis.dataToRadius(baseValue);
+                var angleSpan = valueAxis.dataToCoord(value, clampLayout) - valueAxisStart;
+                var radius = baseAxis.dataToCoord(baseValue);
 
                 if (Math.abs(angleSpan) < barMinAngle) {
                     angleSpan = (angleSpan < 0 ? -1 : 1) * barMinAngle;
@@ -168,20 +188,20 @@ function barLayoutPolar(seriesType, ecModel, api) {
 
         }
 
-    }, this);
+    });
 
 }
 
 /**
  * Calculate bar width and offset for radial bar charts
  */
-function calRadialBar(barSeries, api) {
+function calRadialBar(barSeries: BarSeriesModel[]) {
     // Columns info on each category axis. Key is polar name
-    var columnsMap = {};
+    var columnsMap: Dictionary<LayoutColumnInfo> = {};
 
     zrUtil.each(barSeries, function (seriesModel, idx) {
         var data = seriesModel.getData();
-        var polar = seriesModel.coordinateSystem;
+        var polar = seriesModel.coordinateSystem as Polar;
 
         var baseAxis = polar.getBaseAxis();
         var axisKey = getAxisKey(polar, baseAxis);
@@ -235,7 +255,7 @@ function calRadialBar(barSeries, api) {
     });
 
 
-    var result = {};
+    var result: Dictionary<Dictionary<BarWidthAndOffset>> = {};
 
     zrUtil.each(columnsMap, function (columnsOnAxis, coordSysName) {
 
@@ -272,7 +292,7 @@ function calRadialBar(barSeries, api) {
         autoWidth = Math.max(autoWidth, 0);
 
         var widthSum = 0;
-        var lastColumn;
+        var lastColumn: StackInfo;
         zrUtil.each(stacks, function (column, idx) {
             if (!column.width) {
                 column.width = autoWidth;
@@ -289,7 +309,7 @@ function calRadialBar(barSeries, api) {
             result[coordSysName][stackId] = result[coordSysName][stackId] || {
                 offset: offset,
                 width: column.width
-            };
+            } as BarWidthAndOffset;
 
             offset += column.width * (1 + barGapPercent);
         });
diff --git a/src/model/Global.ts b/src/model/Global.ts
index 7f4c50f968aaf6f581d6b56580b19804468d5d09..0cb8c62be8e7f604b584a3a390a66f520280d306 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -60,7 +60,7 @@ import { Dictionary } from 'zrender/src/core/types';
 var OPTION_INNER_KEY = '\0_ec_inner';
 
 
-class GlobalModel extends Model {
+class GlobalModel extends Model<ECUnitOption> {
 
     // @readonly
     option: ECUnitOption;
diff --git a/src/model/Series.ts b/src/model/Series.ts
index 80c5a5f03228e40dc36317d07b2cb400fc3702c1..a1954cc905d2fb21c8575e8194a8eb37968def67 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -29,7 +29,7 @@ import {
 import * as modelUtil from '../util/model';
 import {
     DataHost, DimensionName, StageHandlerProgressParams,
-    SeriesOption, TooltipRenderMode, AxisValue, ZRColor, BoxLayoutOptionMixin
+    SeriesOption, TooltipRenderMode, ZRColor, BoxLayoutOptionMixin, ScaleDataValue
 } from '../util/types';
 import ComponentModel, { ComponentModelConstructor } from './Component';
 import {ColorPaletteMixin} from './mixin/colorPalette';
@@ -327,14 +327,10 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         multipleSeries?: boolean,
         dataType?: string,
         renderMode?: TooltipRenderMode
-    ):
-        {
-            html: string,
-            markers: {[markName: string]: string}
-        }
-        // The override method can only return string
-        | string
-    {
+    ): {
+        html: string,
+        markers: {[markName: string]: string}
+    } | string { // The override method can only return string
 
         var series = this;
         renderMode = renderMode || 'html';
@@ -526,7 +522,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
      */
     getAxisTooltipData: (
         dim: DimensionName[],
-        value: AxisValue,
+        value: ScaleDataValue,
         baseAxis: Axis
     ) => {
         dataIndices: number[],
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 6f7ee973f9774894d2681f77a5005378e7cfae11..9ef8e681cfee3aae267fb03e1d14706c01554580 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -56,7 +56,8 @@ import {
     AnimationDelayCallbackParam,
     DisplayState,
     ECElement,
-    ZRRectLike
+    ZRRectLike,
+    ColorString
 } from './types';
 import GlobalModel from '../model/Global';
 
@@ -121,7 +122,7 @@ type TextCommonParams = {
      * Specify a color when color is 'auto',
      * for textFill, textStroke, textBackgroundColor, and textBorderColor. If autoColor specified, it is used as default textFill.
      */
-    autoColor?: string
+    autoColor?: ColorString
     /**
      * `true`: Use inside style (textFill, textStroke, textStrokeWidth)
      *     if `textFill` is not specified.
@@ -1067,9 +1068,9 @@ function setTokenTextStyle(
         || globalTextStyle.textShadowOffsetY;
 }
 
-function getAutoColor(color: string, opt?: {
-    autoColor?: string
-}): string {
+function getAutoColor(color: ColorString, opt?: {
+    autoColor?: ColorString
+}): ColorString {
     return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
 }
 
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index 9a26e50b56f6b9d792658da59128b6cdd227e628..e5d82fe66f6f0c882b4414ab419a2c5267d472e5 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -345,7 +345,7 @@ export function createSymbol(
     h: number,
     color?: string,
     keepAspect?: boolean
-): graphic.Path | graphic.Image {
+) {
     // TODO Support image object, DynamicImage.
 
     var isEmpty = symbolType.indexOf('empty') === 0;
@@ -387,5 +387,5 @@ export function createSymbol(
 
     (symbolPath as ECSymbol).setColor(color);
 
-    return symbolPath;
+    return symbolPath as ECSymbol;
 }
diff --git a/src/util/throttle.ts b/src/util/throttle.ts
index 159d6ac476bb6208f077532f23728e4271ff3b4f..461c91a149120e005499b6616cc57b5f8d0870ef 100755
--- a/src/util/throttle.ts
+++ b/src/util/throttle.ts
@@ -24,7 +24,7 @@ var ORIGIN_METHOD = '\0__throttleOriginMethod';
 var RATE = '\0__throttleRate';
 var THROTTLE_TYPE = '\0__throttleType';
 
-type ThrottleFunction = () => void;
+type ThrottleFunction = (...args: any[]) => void;
 /**
  * @public
  * @param {(Function)} fn
diff --git a/src/util/types.ts b/src/util/types.ts
index df725ed85c7519a0c4d5816fc05a0f6cced2509c..039368819346013eaf22b217b898044bbd0347bf 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -249,8 +249,6 @@ export type ParsedValue = ParsedValueNumeric | OrdinalRawValue;
 // will not be performed. But "scale parse" will be performed.
 export type ScaleDataValue = ParsedValue | Date;
 
-export type AxisValue = ParsedValueNumeric;
-
 // Can only be string or index, because it is used in object key in s   ome code.
 // Making the type alias here just intending to show the meaning clearly in code.
 export type DimensionIndex = number;
@@ -347,7 +345,7 @@ export type ECUnitOption = {
     media?: never
     timeline?: ComponentOption | ComponentOption[]
     [key: string]: ComponentOption | ComponentOption[] | Dictionary<any> | any
-}
+} & AnimationOptionMixin
 
 /**
  * [ECOption]:
@@ -909,8 +907,7 @@ export interface CommonAxisPointerOption {
     /**
      * current value. When using axisPointer.handle, value can be set to define the initail position of axisPointer.
      */
-    // TODO: TYPE Only support numeric value?
-    value?: ParsedValueNumeric
+    value?: ScaleDataValue
 
     status?: 'show' | 'hide'
 
@@ -998,15 +995,25 @@ export interface SeriesOption extends
 
     blendMode?: string
 
+    /**
+     * Cursor when mouse on the elements
+     */
+    cursor?: string
+
     // Needs to be override
-    data?: any;
+    data?: any
 
     legendHoverLink?: boolean
 
+    /**
+     * Configurations about progressive rendering
+     */
     progressive?: number | false
     progressiveThreshold?: number
     progressiveChunkMode?: 'mod'
-
+    /**
+     * Not available on every series
+     */
     coordinateSystem?: string
 
     // FIXME:TS more
diff --git a/src/view/Chart.ts b/src/view/Chart.ts
index 19a1ec693d153bb5685a294eeee001377ba403ec..f0343ea42c9630ae395c03f6b47502e42ab3f640 100644
--- a/src/view/Chart.ts
+++ b/src/view/Chart.ts
@@ -41,7 +41,58 @@ var inner = modelUtil.makeInner<{
 }>();
 var renderPlanner = createRenderPlanner();
 
+interface ChartView {
+    /**
+     * Rendering preparation in progressive mode.
+     * Implement it if needed.
+     */
+    incrementalPrepareRender(
+        seriesModel: SeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI,
+        payload: Payload
+    ): void;
+
+    /**
+     * Render in progressive mode.
+     * Implement it if needed.
+     * @param params See taskParams in `stream/task.js`
+     */
+    incrementalRender(
+        params: StageHandlerProgressParams,
+        seriesModel: SeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI,
+        payload: Payload
+    ): void;
+
+    /**
+     * Update transform directly.
+     * Implement it if needed.
+     */
+    updateTransform(
+        seriesModel: SeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI,
+        payload: Payload
+    ): void | {update: true};
+
+    /**
+     * The view contains the given point.
+     * Implement it if needed.
+     */
+    containPoint(
+        point: number[], seriesModel: SeriesModel
+    ): boolean;
 
+    /**
+     * Pass only when return `true`.
+     * Implement it if needed.
+     */
+    filterForExposedEvent(
+        eventType: string, query: EventQueryItem, targetEl: Element, packedEvent: ECEvent
+    ): boolean;
+}
 class ChartView {
 
     // [Caution]: for compat the previous "class extend"
@@ -113,56 +164,6 @@ class ChartView {
      */
     dispose(ecModel: GlobalModel, api: ExtensionAPI): void {}
 
-    /**
-     * Rendering preparation in progressive mode.
-     * Implement it if needed.
-     */
-    incrementalPrepareRender: (
-        seriesModel: SeriesModel,
-        ecModel: GlobalModel,
-        api: ExtensionAPI,
-        payload: Payload
-    ) => void;
-
-    /**
-     * Render in progressive mode.
-     * Implement it if needed.
-     * @param params See taskParams in `stream/task.js`
-     */
-    incrementalRender: (
-        params: StageHandlerProgressParams,
-        seriesModel: SeriesModel,
-        ecModel: GlobalModel,
-        api: ExtensionAPI,
-        payload: Payload
-    ) => void;
-
-    /**
-     * Update transform directly.
-     * Implement it if needed.
-     */
-    updateTransform: (
-        seriesModel: SeriesModel,
-        ecModel: GlobalModel,
-        api: ExtensionAPI,
-        payload: Payload
-    ) => void | {update: true};
-
-    /**
-     * The view contains the given point.
-     * Implement it if needed.
-     */
-    containPoint: (
-        point: number[], seriesModel: SeriesModel
-    ) => boolean;
-
-    /**
-     * Pass only when return `true`.
-     * Implement it if needed.
-     */
-    filterForExposedEvent: (
-        eventType: string, query: EventQueryItem, targetEl: Element, packedEvent: ECEvent
-    ) => boolean;
 
     updateView(seriesModel: SeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void {
         this.render(seriesModel, ecModel, api, payload);
diff --git a/src/visual/visualSolution.ts b/src/visual/visualSolution.ts
index 2922dceb0b2e55504f1d0bef76dba431ebed4545..693ee0e7d1a59bcb9c02114dcd1a07afcd80a173 100644
--- a/src/visual/visualSolution.ts
+++ b/src/visual/visualSolution.ts
@@ -34,7 +34,6 @@ import List from '../data/List';
 
 var each = zrUtil.each;
 
-type WithKey<T extends string, S> = { [key in T]?: S}
 type VisualMappingCollection<VisualState extends string>
     = {
         [key in VisualState]?: {
@@ -58,7 +57,7 @@ type VisualOption = {[key in BuiltinVisualProperty]?: any};
 
 
 export function createVisualMappings<VisualState extends string>(
-    option: WithKey<VisualState, VisualOption>,
+    option: Partial<Record<VisualState, VisualOption>>,
     stateList: readonly VisualState[],
     supplementVisualOption: (mappingOption: VisualMappingOption, state: string) => void
 ) {
@@ -101,7 +100,7 @@ export function createVisualMappings<VisualState extends string>(
 }
 
 export function replaceVisualOption<T extends string>(
-    thisOption: WithKey<T, any>, newOption: WithKey<T, any>, keys: readonly T[]
+    thisOption: Partial<Record<T, any>>, newOption: Partial<Record<T, any>>, keys: readonly T[]
 ) {
     // Visual attributes merge is not supported, otherwise it
     // brings overcomplicated merge logic. See #2853. So if
@@ -140,7 +139,7 @@ export function applyVisual<VisualState extends string, Scope>(
     scope?: Scope,
     dimension?: DimensionLoose
 ) {
-    var visualTypesMap: WithKey<VisualState, BuiltinVisualProperty[]> = {};
+    var visualTypesMap: Partial<Record<VisualState, BuiltinVisualProperty[]>> = {};
     zrUtil.each(stateList, function (state) {
         var visualTypes = VisualMapping.prepareVisualTypes(visualMappings[state]);
         visualTypesMap[state] = visualTypes;
@@ -201,7 +200,7 @@ export function incrementalApplyVisual<VisualState extends string>(
     getValueState: (valueOrIndex: ParsedValue | number) => VisualState,
     dim?: DimensionLoose
 ): StageHandlerProgressExecutor {
-    var visualTypesMap: WithKey<VisualState, BuiltinVisualProperty[]> = {};
+    var visualTypesMap: Partial<Record<VisualState, BuiltinVisualProperty[]>> = {};
     zrUtil.each(stateList, function (state) {
         var visualTypes = VisualMapping.prepareVisualTypes(visualMappings[state]);
         visualTypesMap[state] = visualTypes;