Enhance the approach of interpretation of textPosition 'inside' for some custom shape like 'pin'.

src/util/symbol.js

@@ -22,6 +22,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from './graphic';
 import BoundingRect from 'zrender/src/core/BoundingRect';
+import {interpretTextPosition} from 'zrender/src/contain/text';
 
 /**
  * Triangle shape
@@ -269,21 +270,19 @@ var SymbolClz = graphic.extendShape({
         height: 0
     },
 
-    beforeBrush: function () {
-        var style = this.style;
+    interpretTextPosition(out, style, rect) {
+        var res = interpretTextPosition(out, style, rect);
         var shape = this.shape;
-        // FIXME
-        if (shape.symbolType === 'pin' && style.textPosition === 'inside') {
-            style.textPosition = ['50%', '40%'];
-            style.textAlign = 'center';
-            style.textVerticalAlign = 'middle';
+        if (shape && shape.symbolType === 'pin' && style.textPosition === 'inside') {
+            res.y = rect.y + rect.height * 0.4;
         }
+        return res;
     },
 
     buildPath: function (ctx, shape, inBundle) {
         var symbolType = shape.symbolType;
-        var proxySymbol = symbolBuildProxies[symbolType];
-        if (shape.symbolType !== 'none') {
+        if (symbolType !== 'none') {
+            var proxySymbol = symbolBuildProxies[symbolType];
             if (!proxySymbol) {
                 // Default rect
                 symbolType = 'rect';

test/hoverStyle.html

@@ -54,6 +54,7 @@ under the License.
 
         <div id="info"></div>
 
+        <div id="maina1"></div>
         <div id="mainb1"></div>
         <div id="mainb2"></div>
         <div id="mainb3"></div>
@@ -151,6 +152,57 @@ under the License.
 
 
 
+        <script>
+
+
+            var option;
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                var option = {
+                    hoverLayerThreshold: hoverLayerThreshold,
+                    xAxis: {
+                        axisLine: {show: false},
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        axisLabel: {show: false}
+                    },
+                    yAxis: {
+                        axisLine: {show: false},
+                        axisTick: {show: false},
+                        splitLine: {show: false},
+                        axisLabel: {show: false}
+                    },
+                    series: {
+                        type: 'line',
+                        markPoint: {
+                            data: [{
+                                type: 'max',
+                                name: 'a'
+                            }]
+                        },
+                        data: [[12,34]]
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'maina1', {
+                    option: option,
+                    height: 150,
+                    title: [
+                        'Only a pin displayed',
+                        'The text of the "pin" should be **inside**',
+                        'Hover "pin", should be normal'
+                    ]
+                });
+            });
+        </script>
+
+
+
+
+
 
         <script>
             require(['echarts'], function (echarts) {
@@ -968,5 +1020,11 @@ under the License.
 
 
 
+
+
+
+
+
+
     </body>
 </html>
\ No newline at end of file