diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js
index 914a5e038c0e188531776ef7047b20a4456d8cdc..d547c86ecb4539463184f8c614426a10552f6c0a 100644
--- a/src/component/legend/LegendModel.js
+++ b/src/component/legend/LegendModel.js
@@ -1,7 +1,7 @@
 import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import Model from '../../model/Model';
-import {DEFAULT_COMPONENT_NAME} from '../../util/model';
+import {isNameSpecified} from '../../util/model';
 
 var LegendModel = echarts.extendComponentModel({
 
@@ -61,7 +61,7 @@ var LegendModel = echarts.extendComponentModel({
         ecModel.eachRawSeries(function (seriesModel) {
             var seriesName = seriesModel.name;
             availableNames.push(seriesName);
-            var potentialSeriesName;
+            var isPotential;
 
             if (seriesModel.legendDataProvider) {
                 var data = seriesModel.legendDataProvider();
@@ -75,15 +75,15 @@ var LegendModel = echarts.extendComponentModel({
                     potentialData = potentialData.concat(names);
                 }
                 else {
-                    potentialSeriesName = seriesName;
+                    isPotential = true;
                 }
             }
             else {
-                potentialSeriesName = seriesName;
+                isPotential = true;
             }
 
-            if (potentialSeriesName && potentialSeriesName !== DEFAULT_COMPONENT_NAME) {
-                potentialData.push(potentialSeriesName);
+            if (isPotential && isNameSpecified(seriesModel)) {
+                potentialData.push(seriesModel.name);
             }
         });
 
diff --git a/src/model/Series.js b/src/model/Series.js
index 410639c5e3db75d5d278b8b8c9d12b7807c229f9..da624a7f04d0bda0146982576c599e4a8d730ce1 100644
--- a/src/model/Series.js
+++ b/src/model/Series.js
@@ -357,8 +357,7 @@ var SeriesModel = ComponentModel.extend({
         var name = data.getName(dataIndex);
 
         var seriesName = this.name;
-        if (seriesName === modelUtil.DEFAULT_COMPONENT_NAME) {
-            // Not show '-'
+        if (!modelUtil.isNameSpecified(this)) {
             seriesName = '';
         }
         seriesName = seriesName
@@ -481,7 +480,7 @@ function autoSeriesName(seriesModel) {
     // User specified name has higher priority, otherwise it may cause
     // series can not be queried unexpectedly.
     var name = seriesModel.name;
-    if (modelUtil.DEFAULT_COMPONENT_NAME === name) {
+    if (!modelUtil.isNameSpecified(seriesModel)) {
         seriesModel.name = getSeriesAutoName(seriesModel) || name;
     }
 }
diff --git a/src/model/mixin/colorPalette.js b/src/model/mixin/colorPalette.js
index 25996a43d7b7538780c5d4b3d84d084a11981c09..75f41290c48e91e25f57e622a41f7f646cb92337 100644
--- a/src/model/mixin/colorPalette.js
+++ b/src/model/mixin/colorPalette.js
@@ -19,6 +19,13 @@ export default {
         inner(this).colorNameMap = {};
     },
 
+    /**
+     * @param {string} name MUST NOT be null/undefined. Otherwise call this function
+     *                 twise with the same parameters will get different result.
+     * @param {Object} [scope=this]
+     * @param {Object} [requestColorNum]
+     * @return {string} color string.
+     */
     getColorFromPalette: function (name, scope, requestColorNum) {
         scope = scope || this;
         var scopeFields = inner(scope);
diff --git a/src/util/model.js b/src/util/model.js
index 8a79f406363c37a943171c2dffb5a841bdac8f72..cbf4498e841062e491fb43cd50356cc74a41847f 100644
--- a/src/util/model.js
+++ b/src/util/model.js
@@ -5,11 +5,11 @@ var isObject = zrUtil.isObject;
 var isArray = zrUtil.isArray;
 
 /**
- * name may be displayed on screen, so use '-'.
- * But we should make sure it is not duplicated
- * with user specified name, so use '\0';
+ * Make the name displayable. But we should
+ * make sure it is not duplicated with user
+ * specified name, so use '\0';
  */
-export var DEFAULT_COMPONENT_NAME = '\0-';
+var DUMMY_COMPONENT_NAME_PREFIX = 'series\0';
 
 /**
  * If value is not array, then translate it to array.
@@ -248,7 +248,9 @@ export function makeIdAndName(mapResult) {
             ? opt.name + ''
             : existCpt
             ? existCpt.name
-            : DEFAULT_COMPONENT_NAME;
+            // Avoid diffferent series has the same name,
+            // because name may be used like in color pallet.
+            : DUMMY_COMPONENT_NAME_PREFIX + index;
 
         if (existCpt) {
             keyInfo.id = existCpt.id;
@@ -273,6 +275,12 @@ export function makeIdAndName(mapResult) {
     });
 }
 
+export function isNameSpecified(componentModel) {
+    var name = componentModel.name;
+    // Is specified when `indexOf` get -1 or > 0.
+    return !!(name && name.indexOf(DUMMY_COMPONENT_NAME_PREFIX));
+}
+
 /**
  * @public
  * @param {Object} cptOption
diff --git a/src/visual/seriesColor.js b/src/visual/seriesColor.js
index e3a48d2c31ec42b8c9adc2d49360192466977aa4..60880a308fb0962a761907218cf34987deb00818 100644
--- a/src/visual/seriesColor.js
+++ b/src/visual/seriesColor.js
@@ -9,7 +9,7 @@ export default {
         var color = seriesModel.get(colorAccessPath) // Set in itemStyle
             || seriesModel.getColorFromPalette(
                 // TODO series count changed.
-                seriesModel.get('name'), null, ecModel.getSeriesCount()
+                seriesModel.name, null, ecModel.getSeriesCount()
             );  // Default color
 
         // FIXME Set color function or use the platte color
diff --git a/test/appendData.html b/test/appendData.html
index 852befe3b8768f7c08d8bf61de663ea9ccadf5a4..99752cb3dd59327dd72f0e2fb2cd33b8dd532b67 100644
--- a/test/appendData.html
+++ b/test/appendData.html
@@ -20,7 +20,8 @@
 
 
         <div id="main0"></div>
-        <!-- <div id="main1"></div> -->
+        <div id="main1"></div>
+        <div id="main2"></div>
 
 
         <script>
@@ -31,54 +32,59 @@
 
 
 
-        <script>
 
-            var chart;
-            var myChart;
-            var option;
+
+
+
+        <script>
 
             require([
                 'echarts'/*, 'map/js/china' */
             ], function (echarts) {
 
                 // Thanks to <https://github.com/Truantboy>, see: #7718.
-                option = {
+                var option = {
                     animation: true,
                     tooltip: {},
                     xAxis: {},
                     yAxis: {},
-                    legend: {},
                     series: [{
                         type: 'scatter',
-                        name: 'data',
-                        data: [[0, 0], [2005, 2005]],
-                        progressiveThreshold: 2000,
-                        symbolSize: function (val) {
-                            return Math.random() * 30 + 10;
-                        }
+                        // name: 'data',
+                        data: [[0, 0], [3005, 3005]],
+                        progressiveThreshold: 3000,
+                        symbol: 'triangle',
+                        symbolSize: 20
                     }]
                 };
 
-                chart = myChart = testHelper.create(echarts, 'main0', {
+                var yBase = 500;
+                var appendCount = 2990;
+
+                var myChart = testHelper.create(echarts, 'main0', {
                     title: [
-                        '(1) AppendData less than limit, should render thousands of points normally.',
-                        '(2) Test click lengend, should be normal.'
+                        'Click btn to appendData less than limit, should render thousands of points normally.',
+                        'Click again, should appendData normally.',
+                        'Check hover (emphasis), should scale normally.'
                     ],
                     option: option,
+                    info: option.series,
+                    infoKey: 'series',
                     button: {
-                        text: 'Click to appendData',
+                        text: 'Click to appendData ' + appendCount + ' points',
                         onClick: function () {
                             var tp = []
-                            var appendCount = 1997;
 
                             for(var i = 1; i < appendCount; i++) {
-                                tp[i] = [i, 1];
+                                tp[i] = [i, yBase];
                             }
 
                             myChart.appendData({
                                 seriesIndex: 0,
                                 data: tp
                             });
+
+                            yBase += 1000;
                         }
                     }
                 });
@@ -94,17 +100,77 @@
 
 
 
+
         <script>
 
-            var chart;
-            var myChart;
-            var option;
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                // Thanks to <https://github.com/Truantboy>, see: #7718.
+                var option = {
+                    animation: true,
+                    tooltip: {},
+                    xAxis: {},
+                    yAxis: {},
+                    legend: {},
+                    series: [{
+                        type: 'scatter',
+                        name: 'data',
+                        data: [[0, 0], [3005, 3005]],
+                        progressiveThreshold: 3000,
+                        symbol: 'triangle',
+                        symbolSize: 20
+                    }]
+                };
+
+                var yBase = 500;
+                var appendCount = 4000;
+
+                var myChart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        '(1) Click btn to appendData over limit, should render successfully.',
+                        '(2) Then test click lengend, should be normal.',
+                        '(3) Check that grid intent should be correct.'
+                    ],
+                    option: option,
+                    info: option.series,
+                    infoKey: 'series',
+                    button: {
+                        text: 'Click to appendData ' + appendCount + ' points',
+                        onClick: function () {
+                            var tp = []
+
+                            for(var i = 1; i < appendCount; i++) {
+                                tp[i] = [i, yBase];
+                            }
+
+                            myChart.appendData({
+                                seriesIndex: 0,
+                                data: tp
+                            });
+
+                            yBase += 1000;
+                        }
+                    }
+                });
+
+            });
+
+        </script>
+
+
+
+
+
+
+        <script>
 
             require([
                 'echarts'
             ], function (echarts) {
 
-                option = {
+                var option = {
                     animation: true,
                     tooltip: {},
                     xAxis: {},
@@ -113,22 +179,27 @@
                         type: 'scatter',
                         data: [[0, 0], [2005, 2005]],
                         progressiveThreshold: 2000,
-                        symbolSize: function (val) {
-                            return Math.random() * 30 + 10;
-                        }
+                        symbolSize: 20
+                    }, {
+                        type: 'scatter',
+                        data: [[100, 1000], [300, 1005]]
                     }]
                 };
 
-                var chart = testHelper.create(echarts, 'main1', {
+                var appendCount = 1998;
+
+                var chart = testHelper.create(echarts, 'main2', {
                     title: [
-                        'Click to appendData, color should be the same.'
+                        'Click to appendData over limit, color should be the same.',
+                        'Check hover (emphasis), should scale normally.'
                     ].join('\n'),
                     option: option,
+                    info: option.series,
+                    infoKey: 'series',
                     button: {
-                        text: 'Click to appendData',
+                        text: 'Click to appendData ' + appendCount + ' points',
                         onClick: function () {
                             var tp = []
-                            var appendCount = 1998;
 
                             for(var i = 1; i < appendCount; i++) {
                                 tp[i] = [i, 1];
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index fb7dd17df5a2e4338498453f48699fc8546517ac..08b28e47b0092028bc0c73fd9bd817dd31ce3395 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -78,7 +78,7 @@
                 optTitle = optTitle.join('\n');
             }
             title.innerHTML = '<div class="test-title-inner">'
-                + testHelper.encodeHTML(optTitle).replace('\n', '<br>')
+                + testHelper.encodeHTML(optTitle).replace(/\n/g, '<br>')
                 + '</div>';
         }