Fix #7629 (map should selectable on area that no data)

src/chart/map/MapSeries.js

@@ -3,7 +3,8 @@ import createListSimply from '../helper/createListSimply';
 import SeriesModel from '../../model/Series';
 import {encodeHTML, addCommas} from '../../util/format';
 import dataSelectableMixin from '../../component/helper/selectableMixin';
-// import geoCreator from '../../coord/geo/geoCreator';
+import {retrieveRawAttr} from '../../data/helper/dataProvider';
+import geoCreator from '../../coord/geo/geoCreator';
 
 var MapSeries = SeriesModel.extend({
 
@@ -27,12 +28,12 @@ var MapSeries = SeriesModel.extend({
 
     init: function (option) {
 
-        this._fillOption(option, this.getMapType());
+        // this._fillOption(option, this.getMapType());
         // this.option = option;
 
         MapSeries.superApply(this, 'init', arguments);
 
-        this.updateSelectedMap(this.getRawData());
+        this.updateSelectedMap(this._createSelectableList());
     },
 
     getInitialData: function (option) {
@@ -40,11 +41,28 @@ var MapSeries = SeriesModel.extend({
     },
 
     mergeOption: function (newOption) {
-        this._fillOption(newOption, this.getMapType());
+        // this._fillOption(newOption, this.getMapType());
 
         MapSeries.superApply(this, 'mergeOption', arguments);
 
-        this.updateSelectedMap(this.getRawData());
+        this.updateSelectedMap(this._createSelectableList());
+    },
+
+    _createSelectableList: function () {
+        var data = this.getRawData();
+        var valueDim = data.mapDimension('value');
+        var targetList = [];
+        for (var i = 0, len = data.count(); i < len; i++) {
+            targetList.push({
+                name: data.getName(i),
+                value: data.get(valueDim, i),
+                selected: retrieveRawAttr(data, i, 'selected')
+            });
+        }
+
+        targetList = geoCreator.getFilledRegions(targetList, this.getMapType(), this.option.nameMap);
+
+        return targetList;
     },
 
     /**

src/chart/pie/PieSeries.js

@@ -4,6 +4,8 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as modelUtil from '../../util/model';
 import {getPercentWithPrecision} from '../../util/number';
 import dataSelectableMixin from '../../component/helper/selectableMixin';
+import {retrieveRawAttr} from '../../data/helper/dataProvider';
+
 
 var PieSeries = echarts.extendSeriesModel({
 
@@ -19,7 +21,7 @@ var PieSeries = echarts.extendSeriesModel({
             return this.getRawData();
         };
 
-        this.updateSelectedMap(this.getRawData());
+        this.updateSelectedMap(this._createSelectableList());
 
         this._defaultLabelLine(option);
     },
@@ -28,13 +30,27 @@ var PieSeries = echarts.extendSeriesModel({
     mergeOption: function (newOption) {
         PieSeries.superCall(this, 'mergeOption', newOption);
 
-        this.updateSelectedMap(this.getRawData());
+        this.updateSelectedMap(this._createSelectableList());
     },
 
     getInitialData: function (option, ecModel) {
         return createListSimply(this, ['value']);
     },
 
+    _createSelectableList: function () {
+        var data = this.getRawData();
+        var valueDim = data.mapDimension('value');
+        var targetList = [];
+        for (var i = 0, len = data.count(); i < len; i++) {
+            targetList.push({
+                name: data.getName(i),
+                value: data.get(valueDim, i),
+                selected: retrieveRawAttr(data, i, 'selected')
+            });
+        }
+        return targetList;
+    },
+
     // Overwrite
     getDataParams: function (dataIndex) {
         var data = this.getData();

src/component/helper/selectableMixin.js

@@ -5,31 +5,17 @@
  */
 
 import * as zrUtil from 'zrender/src/core/util';
-import {retrieveRawAttr} from '../../data/helper/dataProvider';
 
 export default {
 
     /**
-     * @param {Array.<Object>|module:echars/data/List} targetList
+     * @param {Array.<Object>} targetList [{name, value, selected}, ...]
      *        If targetList is an array, it should like [{name: ..., value: ...}, ...].
      *        If targetList is a "List", it must have coordDim: 'value' dimension and name.
      */
     updateSelectedMap: function (targetList) {
-        if (zrUtil.isArray(targetList)) {
-            this._targetList = targetList.slice();
-        }
-        else {
-            var ecList = targetList;
-            var valueDim = ecList.mapDimension('value');
-            var targetList = this._targetList = [];
-            for (var i = 0, len = ecList.count(); i < len; i++) {
-                targetList.push({
-                    name: ecList.getName(i),
-                    value: ecList.get(valueDim, i),
-                    selected: retrieveRawAttr(ecList, i, 'selected')
-                });
-            }
-        }
+        this._targetList = zrUtil.isArray(targetList) ? targetList.slice() : [];
+
         this._selectTargetMap = zrUtil.reduce(targetList || [], function (targetMap, target) {
             targetMap.set(target.name, target);
             return targetMap;

test/map.html

@@ -20,12 +20,6 @@
 
             require([
                 'echarts'
-                // 'echarts/chart/map',
-                // 'echarts/component/title',
-                // 'echarts/component/legend',
-                // 'echarts/component/visualMap',
-                // 'echarts/component/markPoint',
-                // 'echarts/component/tooltip'
             ], function (echarts) {
 
                 require(['map/js/china'], function () {
@@ -47,7 +41,7 @@
                     chart.setOption({
                         tooltip: {},
                         title : {
-                            text: 'iphone销量',
+                            text: '内蒙古和青海没数据也要能被选中',
                             subtext: '纯属虚构',
                             left: 'center'
                         },
@@ -127,13 +121,13 @@
                                     {name: '广西',value: Math.round(Math.random()*1000)},
                                     {name: '甘肃',value: Math.round(Math.random()*1000)},
                                     {name: '山西',value: Math.round(Math.random()*1000)},
-                                    {name: '内蒙古',value: Math.round(Math.random()*1000)},
+                                    // {name: '内蒙古',value: Math.round(Math.random()*1000)},
                                     {name: '陕西',value: Math.round(Math.random()*1000)},
                                     {name: '吉林',value: Math.round(Math.random()*1000)},
                                     {name: '福建',value: Math.round(Math.random()*1000)},
                                     {name: '贵州',value: Math.round(Math.random()*1000)},
                                     {name: '广东',value: Math.round(Math.random()*1000)},
-                                    {name: '青海',value: Math.round(Math.random()*1000)},
+                                    // {name: '青海',value: Math.round(Math.random()*1000)},
                                     {name: '西藏',value: Math.round(Math.random()*1000)},
                                     {name: '四川',value: Math.round(Math.random()*1000)},
                                     {name: '宁夏',value: Math.round(Math.random()*1000)},