Pointer can not display when icon is image

src/chart/gauge/GaugeView.ts

@@ -30,7 +30,10 @@ import { ColorString, ECElement } from '../../util/types';
 import List from '../../data/List';
 import Sausage from '../../util/shape/sausage';
 import {createSymbol} from '../../util/symbol';
-import type Displayable from 'zrender/src/graphic/Displayable';
+import ZRImage from 'zrender/src/graphic/Image';
+import {extend} from 'zrender/src/core/util';
+
+type ECSymbol = ReturnType<typeof createSymbol>;
 
 interface PosInfo {
     cx: number
@@ -477,9 +480,39 @@ class GaugeView extends ChartView {
                 const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
                 const emphasisModel = itemModel.getModel('emphasis');
                 if (showPointer) {
-                    const pointer = data.getItemGraphicEl(idx) as Displayable;
-                    pointer.type !== 'image' && pointer.useStyle(data.getItemVisual(idx, 'style'));
+                    const pointer = data.getItemGraphicEl(idx) as ECSymbol;
+                    const symbolStyle = data.getItemVisual(idx, 'style');
+                    const visualColor = symbolStyle.fill;
+                    if (pointer instanceof ZRImage) {
+                        const pathStyle = pointer.style;
+                        pointer.useStyle(extend({
+                            // TODO other properties like x, y ?
+                            image: pathStyle.image,
+                            x: pathStyle.x, y: pathStyle.y,
+                            width: pathStyle.width, height: pathStyle.height
+                        }, symbolStyle));
+                    }
+                    else {
+                        if (pointer.__isEmptyBrush) {
+                            // fill and stroke will be swapped if it's empty.
+                            // So we cloned a new style to avoid it affecting the original style in visual storage.
+                            // TODO Better implementation. No empty logic!
+                            pointer.useStyle(extend({}, symbolStyle));
+                        }
+                        else {
+                            pointer.useStyle(symbolStyle);
+                        }
+                        if (pointer.type !== 'pointer') {
+                            // Disable decal because symbol scale will been applied on the decal.
+                            pointer.style.decal = null;
+                            pointer.setColor(visualColor);
+                            pointer.style.strokeNoScale = true;
+                        }
+                    }
+
                     pointer.setStyle(itemModel.getModel(['pointer', 'itemStyle']).getItemStyle());
+
+
                     if (pointer.style.fill === 'auto') {
                         pointer.setStyle('fill', getColor(
                             linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true)

test/gauge-pointer.html

@@ -46,6 +46,7 @@ under the License.
         <div id="main6"></div>
         <div id="main7"></div>
         <div id="main8"></div>
+        <div id="main9"></div>
 
 
 
@@ -590,6 +591,44 @@ under the License.
                 // recordCanvas: true,
             });
 
+            var option9 = {
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                toolbox: {
+                    feature: {
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                series: [
+                    {
+                        name: '业务指标',
+                        type: 'gauge',
+                        pointer: {
+                            icon: 'emptyCircle',
+                            itemStyle: {
+                                borderWidth: 10,
+                                borderColor: '#f00'
+                            },
+                        },
+                        anchor: {
+                            // show: true
+                        },
+                        detail: {formatter: '{value}%'},
+                        data: [{value: 58.46, name: '完成率'}]
+                    }
+                ]
+            };
+
+            var chart9 = testHelper.create(echarts, 'main9', {
+                title: [
+                    'pointer.icon: emptyCircle',
+                    'anchor.show: false'
+                ],
+                option: option9
+            });
+
         });
         </script>