diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index a57f99c8b7930a4e7be4360bce7f85c6de36d577..ebbc9cbdb07879b6ce8821308a12696772262b03 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -50,10 +50,10 @@ function parsePosition(seriesModel: GaugeSeriesModel, api: ExtensionAPI): PosInf
 }
 
 function formatLabel(value: number, labelFormatter: string | ((value: number) => string)): string {
-    let label = value + '';
+    let label = value == null ? '' : (value + '');
     if (labelFormatter) {
         if (typeof labelFormatter === 'string') {
-            label = labelFormatter.replace('{value}', value != null ? value + '' : '');
+            label = labelFormatter.replace('{value}', label);
         }
         else if (typeof labelFormatter === 'function') {
             label = labelFormatter(value);
diff --git a/src/chart/graph/GraphView.ts b/src/chart/graph/GraphView.ts
index 42a53027dde8a93e3fcd452e7bfe0e8b377f660f..33aaed5add159fb8e12cc6f6ae393c26ae1f2ce9 100644
--- a/src/chart/graph/GraphView.ts
+++ b/src/chart/graph/GraphView.ts
@@ -217,7 +217,7 @@ class GraphView extends ChartView {
                     api.dispatchAction({
                         type: 'focusNodeAdjacency',
                         seriesId: seriesModel.id,
-                        dataIndex: el.dataIndex
+                        dataIndex: graphic.getECData(el).dataIndex
                     });
                 });
                 el.on('mouseout', (el as any)[UNFOCUS_ADJACENCY] = function () {
diff --git a/src/chart/helper/LargeLineDraw.ts b/src/chart/helper/LargeLineDraw.ts
index fa46af49816172854f953a674a68e32d398af73c..91803a16ac44e33342f1d342f36199c61e8448d5 100644
--- a/src/chart/helper/LargeLineDraw.ts
+++ b/src/chart/helper/LargeLineDraw.ts
@@ -55,8 +55,6 @@ type LargeLinesData = List<Model<LargeLinesCommonOption> & {
 class LargeLinesPath extends graphic.Path {
     shape: LargeLinesPathShape
 
-    seriesIndex: number
-    dataIndex: number
     __startIndex: number
 
     constructor(opts?: LargeLinesPathProps) {
@@ -262,15 +260,16 @@ class LargeLineDraw {
         lineEl.setStyle('fill');
 
         if (!isIncremental) {
+            let ecData = graphic.getECData(lineEl);
             // Enable tooltip
             // PENDING May have performance issue when path is extremely large
-            lineEl.seriesIndex = hostModel.seriesIndex;
+            ecData.seriesIndex = hostModel.seriesIndex;
             lineEl.on('mousemove', function (e) {
-                lineEl.dataIndex = null;
+                ecData.dataIndex = null;
                 var dataIndex = lineEl.findDataIndex(e.offsetX, e.offsetY);
                 if (dataIndex > 0) {
                     // Provide dataIndex for tooltip
-                    lineEl.dataIndex = dataIndex + lineEl.__startIndex;
+                    ecData.dataIndex = dataIndex + lineEl.__startIndex;
                 }
             });
         }
diff --git a/src/chart/helper/LargeSymbolDraw.ts b/src/chart/helper/LargeSymbolDraw.ts
index f48034fd17f8cd94a3989d2840256adc3e933085..caa649364fab048234dd0548a0b118fbe60a0fff 100644
--- a/src/chart/helper/LargeSymbolDraw.ts
+++ b/src/chart/helper/LargeSymbolDraw.ts
@@ -57,9 +57,6 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
     startIndex: number
     endIndex: number
 
-    dataIndex: number
-    seriesIndex: number
-
     constructor(opts?: LargeSymbolPathProps) {
         super(opts, null, new LargeSymbolPathShape());
     }
@@ -296,15 +293,16 @@ class LargeSymbolDraw {
         }
 
         if (!isIncremental) {
+            let ecData = graphic.getECData(symbolEl);
             // Enable tooltip
             // PENDING May have performance issue when path is extremely large
-            symbolEl.seriesIndex = (hostModel as SeriesModel).seriesIndex;
+            ecData.seriesIndex = (hostModel as SeriesModel).seriesIndex;
             symbolEl.on('mousemove', function (e) {
-                symbolEl.dataIndex = null;
+                ecData.dataIndex = null;
                 var dataIndex = symbolEl.findDataIndex(e.offsetX, e.offsetY);
                 if (dataIndex >= 0) {
                     // Provide dataIndex for tooltip
-                    symbolEl.dataIndex = dataIndex + (symbolEl.startIndex || 0);
+                    ecData.dataIndex = dataIndex + (symbolEl.startIndex || 0);
                 }
             });
         }
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index 0be21a742c84cafe4e7b6027967ea0c654ca87af..01793b9888e9f2276aeda56a7e42787aa2bbc01f 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -262,7 +262,7 @@ class Line extends graphic.Group {
         // values have to be set on `normalStyle`.
         if (normalText != null || emphasisText != null) {
             graphic.setTextStyle(label.style, labelModel, {
-                text: normalText + ''
+                text: normalText as string
             }, {
                 autoColor: defaultLabelColor
             });
@@ -282,7 +282,7 @@ class Line extends graphic.Group {
         if (emphasisText != null) {
             // Only these properties supported in this emphasis style here.
             label.hoverStyle = {
-                text: emphasisText + '',
+                text: emphasisText as string,
                 textFill: hoverLabelModel.getTextColor(true),
                 // For merging hover style to normal style, do not use
                 // `hoverLabelModel.getFont()` here.
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index d51da2ae58896a37b8ec0517753441c6b868e8fe..f6aa009d1659cc77e11b2d2eeb8979b04adf7628 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -42,8 +42,6 @@ type ECSymbol = ReturnType<typeof createSymbol> & {
 
 class Symbol extends graphic.Group {
 
-    dataIndex: number
-
     private _seriesModel: SeriesModel
 
     private _symbolType: string
@@ -329,7 +327,7 @@ class Symbol extends graphic.Group {
                 scale: [0, 0]
             },
             this._seriesModel,
-            this.dataIndex,
+            graphic.getECData(this).dataIndex,
             cb
         );
     }
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 0970a66daddeaa8f77c862f0e43213c7fd80b57a..000e91f3018f32fde632a7fc06cb388ea7976fc9 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -24,7 +24,7 @@ import * as graphic from '../../util/graphic';
 import ChartView from '../../view/Chart';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { Payload, DisplayState } from '../../util/types';
+import { Payload, DisplayState, ECElement } from '../../util/types';
 import List from '../../data/List';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import { Dictionary } from 'zrender/src/core/types';
@@ -39,7 +39,7 @@ function updateDataSelected(
     api: ExtensionAPI
 ): void {
     var data = seriesModel.getData();
-    var dataIndex = this.dataIndex;
+    var dataIndex = graphic.getECData(this).dataIndex;
     var name = data.getName(dataIndex);
     var selectedOffset = seriesModel.get('selectedOffset');
 
@@ -96,10 +96,6 @@ interface PieceElementExtension extends Displayable {
  */
 class PiePiece extends graphic.Group {
 
-    // FIXME:TS add a type in `util/graphic.ts` for `highDownOnUpdate`.
-    highDownOnUpdate: any;
-    dataIndex: number;
-
     constructor(data: List, idx: number) {
         super();
 
@@ -197,7 +193,7 @@ class PiePiece extends graphic.Group {
         var withAnimation = !firstCreate && animationTypeUpdate === 'transition';
         this._updateLabel(data, idx, withAnimation);
 
-        this.highDownOnUpdate = (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled())
+        (this as ECElement).highDownOnUpdate = (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled())
             ? function (fromState: DisplayState, toState: DisplayState): void {
                 if (toState === 'emphasis') {
                     labelLine.ignore = labelLine.hoverIgnore;
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 63a8a29b23469cf9bbd5f4ebcf9d2b10daeeb644..fa37df3504045467ac7c23b3b447e998c15a1fef 100644
--- a/src/chart/radar/RadarView.ts
+++ b/src/chart/radar/RadarView.ts
@@ -228,7 +228,7 @@ class RadarView extends ChartView {
                         labelFetcher: data.hostModel,
                         labelDataIndex: idx,
                         labelDimIndex: symbolPath.__dimIdx,
-                        defaultText: defaultText + '',
+                        defaultText: defaultText as string,
                         autoColor: color,
                         isRectText: true
                     }
diff --git a/src/component/legend/ScrollableLegendView.ts b/src/component/legend/ScrollableLegendView.ts
index 1a8e06d04f9f196764628c7e3976f26fd61054a1..8b1c4d9593872b97c6ec9fc6380ecae0d5f76d1e 100644
--- a/src/component/legend/ScrollableLegendView.ts
+++ b/src/component/legend/ScrollableLegendView.ts
@@ -136,6 +136,8 @@ class ScrollableLegendView extends LegendView {
         controllerGroup.add(new graphic.Text({
             name: 'pageText',
             style: {
+                // Placeholder to calculate a proper layout.
+                text: 'xx/xx',
                 textFill: pageTextStyleModel.getTextColor(),
                 font: pageTextStyleModel.getFont(),
                 textVerticalAlign: 'middle',
@@ -386,7 +388,8 @@ class ScrollableLegendView extends LegendView {
         pageText && pageFormatter && pageText.setStyle(
             'text',
             zrUtil.isString(pageFormatter)
-                ? pageFormatter.replace('{current}', current + '').replace('{total}', total + '')
+                ? pageFormatter.replace('{current}', current == null ? '' : current + '')
+                    .replace('{total}', total == null ? '' : total + '')
                 : pageFormatter({current: current, total: total})
         );
     }
diff --git a/src/coord/polar/AngleAxis.ts b/src/coord/polar/AngleAxis.ts
index 8444a9fee502b95816983d4e8bb267fb0e9f01fb..002b11653da953f8c3b0e5ad31c03eb8dd968ed5 100644
--- a/src/coord/polar/AngleAxis.ts
+++ b/src/coord/polar/AngleAxis.ts
@@ -77,7 +77,10 @@ class AngleAxis extends Axis {
         // Not precise, just use height as text width
         // and each distance from axis line yet.
         var rect = textContain.getBoundingRect(
-            tickValue + '', labelModel.getFont(), 'center', 'top'
+            tickValue == null ? '' : tickValue + '',
+            labelModel.getFont(),
+            'center',
+            'top'
         );
         var maxH = Math.max(rect.height, 7);
 
diff --git a/src/preprocessor/helper/compatStyle.ts b/src/preprocessor/helper/compatStyle.ts
index dde1e3255e25264493b3596af57125f17a0464a0..bbc20bbdf3e009436b49ddc85ddfa95367143fa8 100644
--- a/src/preprocessor/helper/compatStyle.ts
+++ b/src/preprocessor/helper/compatStyle.ts
@@ -292,7 +292,7 @@ export default function (option: any, isTheme?: boolean) {
     each(toArr(option.radar), function (radarOpt) {
         compatTextStyle(radarOpt, 'name');
         // Use axisName instead of name because component has name property
-        if (radarOpt.name && !radarOpt.axisName) {
+        if (radarOpt.name && radarOpt.axisName == null) {
             radarOpt.axisName = radarOpt.name;
             delete radarOpt.name;
             if (__DEV__) {
diff --git a/test/radar4.html b/test/radar4.html
index eeab7d508cd785f5e12772c1be3a4b77fdf2532f..8875c5ad372e4b7a6ff8ac6d1089651ed308732e 100644
--- a/test/radar4.html
+++ b/test/radar4.html
@@ -52,7 +52,7 @@ under the License.
                         x : 'left',
                         data:['图一','图二','图三']
                     },
-                    polar : [
+                    radar : [
                         {
                             indicator : [
                                 { text : '指标一' },