fix(symbol): add rotate argument to correct text positioning issues

src/chart/helper/Symbol.ts

@@ -65,7 +65,8 @@ class Symbol extends graphic.Group {
         idx: number,
         symbolSize: number[],
         z2: number,
-        keepAspect: boolean
+        keepAspect: boolean,
+        rotate: number
     ) {
         // Remove paths created before
         this.removeAll();
@@ -77,7 +78,7 @@ class Symbol extends graphic.Group {
         // and macOS Sierra, a circle stroke become a rect, no matter what
         // the scale is set. So we set width/height as 2. See #4150.
         const symbolPath = createSymbol(
-            symbolType, -1, -1, 2, 2, null, keepAspect
+            symbolType, -1, -1, 2, 2, null, keepAspect, rotate
         );
 
         symbolPath.attr({
@@ -163,7 +164,8 @@ class Symbol extends graphic.Group {
 
         if (isInit) {
             const keepAspect = data.getItemVisual(idx, 'symbolKeepAspect');
-            this._createSymbol(symbolType as string, data, idx, symbolSize, z2, keepAspect);
+            const rotate = data.getItemVisual(idx, 'symbolRotate') || 0;
+            this._createSymbol(symbolType as string, data, idx, symbolSize, z2, keepAspect, rotate);
         }
         else {
             const symbolPath = this.childAt(0) as ECSymbol;

src/util/symbol.ts

@@ -277,14 +277,16 @@ const SymbolClz = graphic.Path.extend({
         x: 0,
         y: 0,
         width: 0,
-        height: 0
+        height: 0,
+        rotate: 0
     },
 
     calculateTextPosition(out, config, rect) {
         const res = calculateTextPosition(out, config, rect);
         const shape = this.shape;
         if (shape && shape.symbolType === 'pin' && config.position === 'inside') {
-            res.y = rect.y + rect.height * 0.4;
+            res.x = res.x - rect.width * 0.1 * Math.sin(Math.PI * shape.rotate / 180);
+            res.y = res.y - rect.height * 0.1 * Math.cos(Math.PI * shape.rotate / 180);
         }
         return res;
     },
@@ -337,7 +339,8 @@ export function createSymbol(
     h: number,
     color?: ZRColor,
     // whether to keep the ratio of w/h,
-    keepAspect?: boolean
+    keepAspect?: boolean,
+    rotate?: number
 ) {
     // TODO Support image object, DynamicImage.
 
@@ -369,7 +372,8 @@ export function createSymbol(
                 x: x,
                 y: y,
                 width: w,
-                height: h
+                height: h,
+                rotate: rotate
             }
         }) as unknown as ECSymbol;
     }