[GitHub] [incubator-echarts] plainheart commented on a change in pull request #13416: feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216

[GitBox <gi...@apache.org>]

plainheart commented on a change in pull request #13416:
URL: https://github.com/apache/incubator-echarts/pull/13416#discussion_r502865707



##########
File path: src/util/types.ts
##########
@@ -795,6 +795,7 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
     join?: CanvasLineJoin
     dashOffset?: number
     miterLimit?: number
+    roundCap?: boolean

Review comment:
       Perhaps, `roundCap` is not very necessary. There is an option `cap` above. Setting `cap` to `round` is identical to `roundCap`.

##########
File path: src/chart/gauge/GaugeView.ts
##########
@@ -312,165 +324,291 @@ class GaugeView extends ChartView {
         posInfo: PosInfo,
         startAngle: number,
         endAngle: number,
-        clockwise: boolean
+        clockwise: boolean,
+        axisLineWidth: number
     ) {
 
         const group = this.group;
         const oldData = this._data;
+        const oldProgressData = this._progressData;
+        const progressList = [] as graphic.Path[];
 
-        if (!seriesModel.get(['pointer', 'show'])) {
-            // Remove old element
-            oldData && oldData.eachItemGraphicEl(function (el) {
-                group.remove(el);
-            });
-            return;
-        }
-
-        const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
-        const angleExtent = [startAngle, endAngle];
+        const showPointer = seriesModel.get(['pointer', 'show']);
+        const progressModel = seriesModel.getModel('progress');
+        const showProgress = progressModel.get('show');
 
         const data = seriesModel.getData();
         const valueDim = data.mapDimension('value');
+        const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
+        const angleExtent = [startAngle, endAngle];
 
-        data.diff(oldData)
-            .add(function (idx) {
-                const pointer = new PointerPath({
+        function createPointer(idx: number) {
+            const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
+            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) {
+                pointer = createSymbol(
+                    pointerStr,
+                    parsePercent(pointerOffset[0], posInfo.r) - pointerWidth / 2,
+                    parsePercent(pointerOffset[1], posInfo.r) - pointerLength,
+                    pointerWidth,
+                    pointerLength,
+                    null,
+                    pointerKeepAspect
+                ) as graphic.Path;
+            }
+            else {
+                pointer = new PointerPath({
                     shape: {
-                        angle: startAngle
+                        angle: -Math.PI / 2,
+                        width: parsePercent(pointerModel.get('width'), posInfo.r),
+                        r: parsePercent(pointerModel.get('length'), posInfo.r)
                     }
-                });
+                })
+            }
+            pointer.rotation = -(startAngle + Math.PI / 2);
+            pointer.x = posInfo.cx;
+            pointer.y = posInfo.cy;
+            return pointer;
+        }
 
-                graphic.initProps(pointer, {
-                    shape: {
-                        angle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true)
-                    }
-                }, seriesModel);
+        function createProgress(idx: number, endAngle: number) {
+            const roundCap = progressModel.get('roundCap');
+            const ProgressPath = roundCap ? Sausage : graphic.Sector;

Review comment:
       The same as the above.

##########
File path: src/chart/gauge/GaugeView.ts
##########
@@ -95,25 +99,26 @@ class GaugeView extends ChartView {
         posInfo: PosInfo
     ) {
         const group = this.group;
-
-        const axisLineModel = seriesModel.getModel('axisLine');
-        const lineStyleModel = axisLineModel.getModel('lineStyle');
-
         const clockwise = seriesModel.get('clockwise');
         let startAngle = -seriesModel.get('startAngle') / 180 * Math.PI;
         let endAngle = -seriesModel.get('endAngle') / 180 * Math.PI;
+        const axisLineModel = seriesModel.getModel('axisLine');
+
+        const roundCap = axisLineModel.get('roundCap');
+        const MainPath = roundCap ? Sausage : graphic.Sector;

Review comment:
       Currently, the `Sector` shape has provided supports to draw corner radius. Using `Sector` should be enough. 
   Setting `shape.cornerRadius` to the half of `shape.r` and `shape.innerCornerRadius` to the half of `shape.r0` is identical to `roundCap`(Sausage).
   
   I'm not sure if we should use `Sector` instead of `Sausage`.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org