1.change anchorSize to size 2.pointer.icon support img/circle/rect/......

1.change anchorSize to size 2.pointer.icon support img/circle/rect/... 3.delete progress.slent 4.delete the code of removing in renderPointer 5.fix code style

src/chart/gauge/GaugeSeries.ts

@@ -55,7 +55,7 @@ interface PointerOption {
 interface AnchorOption {
     show?: boolean
     showAbove?: boolean
-    anchorSize?: number
+    size?: number
     icon?: string
     offsetCenter?: (number | string)[]
     keepAspect?: boolean
@@ -67,7 +67,6 @@ interface ProgressOption {
     overlap?: boolean
     width?: number
     roundCap?: boolean
-    silent?: boolean
     clip?: boolean
     itemStyle?: ItemStyleOption
 }
@@ -207,7 +206,6 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             overlap: true,
             width: 10,
             roundCap: false,
-            silent: false,
             clip: true
         },
         // 分隔线
@@ -248,7 +246,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
             fontSize: 12
         },
         pointer: {
-            icon: 'default',
+            icon: null,
             offsetCenter: [0, 0],
             show: true,
             length: '60%',
@@ -258,7 +256,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
         anchor: {
             show: false,
             showAbove: false,
-            anchorSize: 6,
+            size: 6,
             icon: 'circle',
             offsetCenter: [0, 0],
             keepAspect: false,

src/chart/gauge/GaugeView.ts

@@ -176,7 +176,7 @@ class GaugeView extends ChartView {
 
         this._renderTitleAndDetail(
             seriesModel, ecModel, api, getColor, posInfo
-        )
+        );
 
         this._renderAnchor(seriesModel, posInfo);
 
@@ -349,12 +349,13 @@ class GaugeView extends ChartView {
             const pointerModel = itemModel.getModel('pointer');
             const pointerWidth = parsePercent(pointerModel.get('width'), posInfo.r);
             const pointerLength = parsePercent(pointerModel.get('length'), posInfo.r);
-            
             const pointerStr = seriesModel.get(['pointer', 'icon']);
             const pointerOffset = pointerModel.get('offsetCenter');
             const pointerKeepAspect = pointerModel.get('keepAspect');
+
             let pointer;
-            if (pointerStr.indexOf('path://') === 0) {
+            // not exist icon type will be set 'rect'
+            if (pointerStr) {
                 pointer = createSymbol(
                     pointerStr,
                     parsePercent(pointerOffset[0], posInfo.r) - pointerWidth / 2,
@@ -372,7 +373,7 @@ class GaugeView extends ChartView {
                         width: parsePercent(pointerModel.get('width'), posInfo.r),
                         r: parsePercent(pointerModel.get('length'), posInfo.r)
                     }
-                })
+                });
             }
             pointer.rotation = -(angle + Math.PI / 2);
             pointer.x = posInfo.cx;
@@ -388,7 +389,6 @@ class GaugeView extends ChartView {
             const progressWidth = isOverlap ? progressModel.get('width') : axisLineWidth / data.count();
             const r0 = isOverlap ? posInfo.r - progressWidth : posInfo.r - (idx + 1) * progressWidth;
             const r = isOverlap ? posInfo.r : posInfo.r - idx * progressWidth;
-            const progressSilent = progressModel.get('silent');
             const progress = new ProgressPath({
                 shape: {
                     startAngle: startAngle,
@@ -398,9 +398,7 @@ class GaugeView extends ChartView {
                     clockwise: clockwise,
                     r0: r0,
                     r: r
-                },
-                // 是否相应鼠标事件
-                silent: progressSilent
+                }
             });
             isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal);
             return progress;
@@ -412,7 +410,8 @@ class GaugeView extends ChartView {
                     if (showPointer) {
                         const pointer = createPointer(idx, startAngle);
                         graphic.initProps(pointer, {
-                            rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
+                            rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true)
+                                + Math.PI / 2)
                         }, seriesModel);
                         group.add(pointer);
                         data.setItemGraphicEl(idx, pointer);
@@ -433,41 +432,39 @@ class GaugeView extends ChartView {
                 .update(function (newIdx, oldIdx) {
                     if (showPointer) {
                         const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
-                        const previousRotate = previousPointer.rotation;
-                        group.remove(previousPointer);
-                        const pointer = createPointer(newIdx, previousRotate);
-                        pointer.rotation = previousRotate;
-                        graphic.updateProps(pointer, {
-                            rotation: -(linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
-                        }, seriesModel);
-                        group.add(pointer);
-                        data.setItemGraphicEl(newIdx, pointer);
+                        if (previousPointer) {
+                            const previousRotate = previousPointer.rotation;
+                            group.remove(previousPointer);
+                            const pointer = createPointer(newIdx, previousRotate);
+                            pointer.rotation = previousRotate;
+                            graphic.updateProps(pointer, {
+                                rotation: -(
+                                    linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true)
+                                    + Math.PI / 2
+                                )
+                            }, seriesModel);
+                            group.add(pointer);
+                            data.setItemGraphicEl(newIdx, pointer);
+                        }
                     }
 
                     if (showProgress) {
                         const previousProgress = oldProgressData[oldIdx];
-                        const previousEndAngle = previousProgress.shape.endAngle;
-                        group.remove(previousProgress);
-                        const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector;
-                        const isClip = progressModel.get('clip');
-                        graphic.updateProps(progress, {
-                            shape: {
-                                endAngle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, isClip)
-                            }
-                        }, seriesModel);
-                        group.add(progress);
-                        progressList[newIdx] = progress;
-                    }
-                })
-                .remove(function (idx) {
-                    if (showPointer) {
-                        const pointer = oldData.getItemGraphicEl(idx);
-                        group.remove(pointer);
-                    }
-
-                    if (showProgress) {
-                        const progress = oldProgressData[idx];
-                        group.remove(progress);
+                        if (previousProgress) {
+                            const previousEndAngle = previousProgress.shape.endAngle;
+                            group.remove(previousProgress);
+                            const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector;
+                            const isClip = progressModel.get('clip');
+                            graphic.updateProps(progress, {
+                                shape: {
+                                    endAngle: linearMap(
+                                        data.get(valueDim, newIdx) as number, valueExtent, angleExtent, isClip
+                                    )
+                                }
+                            }, seriesModel);
+                            group.add(progress);
+                            progressList[newIdx] = progress;
+                        }
                     }
                 })
                 .execute();
@@ -484,8 +481,8 @@ class GaugeView extends ChartView {
                             linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true)
                         ));
                     }
-    
-                    (pointer as ECElement).z2EmphasisLift = 0
+
+                    (pointer as ECElement).z2EmphasisLift = 0;
                     setStatesStylesFromModel(pointer, itemModel);
                     enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
                 }
@@ -502,21 +499,6 @@ class GaugeView extends ChartView {
             this._data = data;
             this._progressData = progressList;
         }
-        else {
-            if (!showPointer) {
-                // Remove old element
-                oldData && oldData.eachItemGraphicEl(function (el) {
-                    group.remove(el);
-                });
-            }
-
-            if (!showProgress) {
-                // Remove old element
-                oldProgressData && oldProgressData.forEach(function (el) {
-                    group.remove(el);
-                });
-            }
-        }
     }
 
     _renderAnchor(
@@ -526,7 +508,7 @@ class GaugeView extends ChartView {
         const anchorModel = seriesModel.getModel('anchor');
         const showAnchor = anchorModel.get('show');
         if (showAnchor) {
-            const anchorSize = anchorModel.get('anchorSize');
+            const anchorSize = anchorModel.get('size');
             const anchorType = anchorModel.get('icon');
             const offsetCenter = anchorModel.get('offsetCenter');
             const anchorKeepAspect = anchorModel.get('keepAspect');
@@ -557,12 +539,12 @@ class GaugeView extends ChartView {
         const minVal = +seriesModel.get('min');
         const maxVal = +seriesModel.get('max');
 
-        const contentGroup = new graphic.Group;
+        const contentGroup = new graphic.Group();
 
-        data.each(function(idx) {
+        data.each(function (idx) {
             const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
             const value = data.get(valueDim, idx) as number;
-            const itemGroup = new graphic.Group;
+            const itemGroup = new graphic.Group();
             const autoColor = getColor(
                 linearMap(value, [minVal, maxVal], [0, 1], true)
             );

test/gauge-distance.html

@@ -128,7 +128,7 @@ under the License.
                         anchor: {
                             show: true,
                             showAbove: true,
-                            anchorSize: 25,
+                            size: 25,
                             itemStyle: {
                                 borderWidth: 10
                             }
@@ -478,7 +478,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 20,
+                            size: 20,
                             itemStyle: {
                                 borderColor: '#000',
                                 borderWidth: 2
@@ -530,7 +530,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 14,
+                            size: 14,
                             itemStyle: {
                                 color: '#000'
                                 // borderColor: '#000',

test/gauge-pointer.html

@@ -150,7 +150,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 8,
+                            size: 8,
                             itemStyle: {
                                 color: '#5470c6'
                             }
@@ -194,7 +194,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 8,
+                            size: 8,
                             itemStyle: {
                                 color: '#5470c6'
                             }
@@ -239,7 +239,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 8,
+                            size: 8,
                             showAbove: true,
                             itemStyle: {
                                 // borderColor: '#5470c6'
@@ -350,7 +350,7 @@ under the License.
                             icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
                             showAbove: false,
                             offsetCenter: [0, '-35%'],
-                            anchorSize: 120,
+                            size: 120,
                             keepAspect: true,
                             itemStyle: {
                                 color: '#707177'
@@ -416,7 +416,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 20,
+                            size: 20,
                             showAbove: false,
                             itemStyle: {
                                 borderWidth: 15,
@@ -475,7 +475,7 @@ under the License.
                         },
                         anchor: {
                             show: true,
-                            anchorSize: 15,
+                            size: 15,
                             showAbove: true,
                             itemStyle: {
                                 color: '#C0911F',