Merge pull request #14165 from apache/fix-14131

fix(gauge) #14131 Pointer can not display when icon is image

src/chart/gauge/GaugeView.ts

@@ -30,6 +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 ZRImage from 'zrender/src/graphic/Image';
+import {extend} from 'zrender/src/core/util';
+
+type ECSymbol = ReturnType<typeof createSymbol>;
 
 interface PosInfo {
     cx: number
@@ -476,9 +480,25 @@ class GaugeView extends ChartView {
                 const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
                 const emphasisModel = itemModel.getModel('emphasis');
                 if (showPointer) {
-                    const pointer = data.getItemGraphicEl(idx) as PointerPath;
-                    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({
+                            image: pathStyle.image,
+                            x: pathStyle.x, y: pathStyle.y,
+                            width: pathStyle.width, height: pathStyle.height
+                        }, symbolStyle));
+                    }
+                    else {
+                        pointer.useStyle(symbolStyle);
+                        pointer.type !== 'pointer' && pointer.setColor(visualColor);
+                    }
+
                     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

@@ -45,6 +45,8 @@ under the License.
         <div id="main5"></div>
         <div id="main6"></div>
         <div id="main7"></div>
+        <div id="main8"></div>
+        <div id="main9"></div>
 
 
 
@@ -547,6 +549,86 @@ under the License.
                 date = null;
             }, 1000);
 
+
+            var option8 = {
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                toolbox: {
+                    feature: {
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                series: [
+                    {
+                        name: '业务指标',
+                        type: 'gauge',
+                        anchor: {
+                            show: true,
+                            icon: "image://https://www.apache.org/img/support-apache.jpg",
+                            size: 50,
+                            showAbove: true
+                        },
+                        pointer: {
+                            icon: "image://https://www.apache.org/img/support-apache.jpg",
+                            length: "70%"
+                        },
+                        detail: {formatter: '{value}%'},
+                        data: [{value: 58.46, name: '完成率'}]
+                    }
+                ]
+            };
+
+            var chart8 = testHelper.create(echarts, 'main8', {
+                title: [
+                    'pointer.icon: "image://url"',
+                    'anchor.icon: "image://url"'
+                ],
+                option: option8
+                // height: 1200,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // 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>