diff --git a/src/chart/map/MapView.js b/src/chart/map/MapView.js index 08d781a7b4ebf8f5e1eb8cbf2ec766fc436a7422..61e4d41ba79de18effe8411b61e8936c08ab1f36 100644 --- a/src/chart/map/MapView.js +++ b/src/chart/map/MapView.js @@ -2,6 +2,7 @@ define(function (require) { // var zrUtil = require('zrender/core/util'); var graphic = require('../../util/graphic'); + var zrUtil = require('zrender/core/util'); var MapDraw = require('../../component/helper/MapDraw'); @@ -98,14 +99,15 @@ define(function (require) { r: 3 }, silent: true, - z2: 10 + // Do not overlap the first series, on which labels are displayed. + z2: !offset ? 10 : 8 }); // First data on the same region if (!offset) { var fullData = mapModel.mainSeries.getData(); var name = originalData.getName(idx); - var labelText = name; + var fullIndex = fullData.indexOfName(name); var itemModel = originalData.getItemModel(idx); @@ -116,16 +118,31 @@ define(function (require) { var onEmphasis = function () { var hoverStyle = graphic.setTextStyle({}, hoverLabelModel, { - text: hoverLabelModel.get('show') ? labelText : null + text: hoverLabelModel.get('show') + ? mapModel.getFormattedLabel(idx, 'emphasis') + : null }, {isRectText: true, forMerge: true}); circle.style.extendFrom(hoverStyle); + // Make label upper than others if overlaps. + circle.__mapOriginalZ2 = circle.z2; + circle.z2 += 1; }; var onNormal = function () { graphic.setTextStyle(circle.style, labelModel, { - text: labelModel.get('show') ? labelText : null, - textPosition: 'bottom' + text: labelModel.get('show') + ? zrUtil.retrieve2( + mapModel.getFormattedLabel(idx, 'normal'), + name + ) + : null, + textPosition: labelModel.getShallow('position') || 'bottom' }, {isRectText: true}); + + if (circle.__mapOriginalZ2 != null) { + circle.z2 = circle.__mapOriginalZ2; + circle.__mapOriginalZ2 = null; + } }; polygonGroups.on('mouseover', onEmphasis) diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index daa1ee62983cefe3adc18253fd8da3c40b5183b0..baa481c47f0f0c1ed3bdf609f529932e9d41ebd7 100644 --- a/src/component/helper/MapDraw.js +++ b/src/component/helper/MapDraw.js @@ -236,8 +236,13 @@ define(function (require) { || (itemLayout && itemLayout.showLabel) ) { var query = data ? dataIdx : region.name; - var formattedStr = mapOrGeoModel.getFormattedLabel(query, 'normal'); - var hoverFormattedStr = mapOrGeoModel.getFormattedLabel(query, 'emphasis'); + var formattedStr; + var hoverFormattedStr; + // Consider dataIdx not found. + if (!data || dataIdx >= 0) { + formattedStr = mapOrGeoModel.getFormattedLabel(query, 'normal'); + hoverFormattedStr = mapOrGeoModel.getFormattedLabel(query, 'emphasis'); + } var textEl = new graphic.Text({ position: region.center.slice(), scale: [1 / scale[0], 1 / scale[1]], @@ -252,7 +257,7 @@ define(function (require) { }); graphic.setTextStyle(textEl.hoverStyle = {}, hoverLabelModel, { - text: hoverShowLabel ? (hoverFormattedStr || region.name) : null + text: hoverShowLabel ? hoverFormattedStr : null }, {forMerge: true}); regionGroup.add(textEl); diff --git a/test/geoLine.html b/test/geoLine.html index 442f7d1d730943d52da347c8e620676c84fd4714..ad2ef1fbf639011bf90a90e02dee294109a0254c 100644 --- a/test/geoLine.html +++ b/test/geoLine.html @@ -326,8 +326,18 @@ geo: { map: 'china', label: { + normal: { + show: true, + formatter: '{a}', + // position: 'inside', + backgroundColor: '#fff', + padding: [3, 5], + borderRadius: 3, + borderWidth: 1, + borderColor: 'rgba(0,0,0,0.5)', + color: '#777' + }, emphasis: { - show: false } }, selectedMode: 'single', diff --git a/test/map.html b/test/map.html index 89e9141dab877a1add4b8fefc21cb294d8e95069..f8efd813bebbf7bbbbfe9908617e6da49e832253 100644 --- a/test/map.html +++ b/test/map.html @@ -82,7 +82,24 @@ }, label: { normal: { - show: true + show: true, + formatter: '{b}:{value|{c}}', + // position: 'inside', + backgroundColor: '#fff', + padding: [3, 5], + borderRadius: 3, + borderWidth: 1, + borderColor: 'rgba(0,0,0,0.5)', + color: '#777', + rich: { + value: { + color: '#019D2D', + fontSize: 14, + // fontWeight: 'bold' + // textBorderWidth: 2, + // textBorderColor: '#000' + } + } }, emphasis: { show: true