fix(gauge): 仪表盘的 ticks 默认不均匀,且自定义 scale 无效 (#2085)

* fix(gauge): 仪表盘的 ticks 默认不均匀,且自定义 scale 无效

* fix: lint

Author: hustcc

__tests__/bugs/issue-charts-367-spec.ts

@@ -0,0 +1,63 @@
+import { Gauge } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('charts #367', () => {
+  it('gauge axis ticks', () => {
+    const gauge = new Gauge(createDiv(), {
+      percent: 0.75,
+      range: {
+        ticks: [0, 0.6, 0.8, 0.9, 1],
+        color: ['#F4664A', '#FAAD14', '#F2EAEA', '#96dcb0'],
+      },
+      indicator: {
+        pointer: {
+          style: {
+            stroke: '#D0D0D0',
+          },
+        },
+        pin: {
+          style: {
+            stroke: '#D0D0D0',
+          },
+        },
+      },
+    });
+
+    gauge.render();
+
+    expect(gauge.chart.views[0].getXScale().tickCount).toBe(5);
+    expect(gauge.chart.views[0].getXScale().tickInterval).toBe(0.2);
+    expect(
+      gauge.chart.views[0]
+        .getXScale()
+        .getTicks()
+        .map((t) => t.value)
+    ).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1.0]);
+
+    const TICKS = [0, 0.6, 0.8, 0.9, 1];
+    const LABELS = ['差', '及格', '中', '良', '优'];
+    gauge.update({
+      axis: {
+        tickMethod: () => TICKS,
+        label: {
+          formatter: (v) => {
+            return LABELS[TICKS.indexOf(Number(v))];
+          },
+        },
+        subTickLine: null,
+      },
+    });
+
+    expect(
+      gauge.chart.views[0]
+        .getController('axis')
+        .getComponents()[0]
+        .component.getContainer()
+        // @ts-ignore
+        .getChildByIndex(0)
+        .getChildByIndex(0)
+        .getChildren()
+        .map((v) => v.attr('text'))
+    ).toEqual(LABELS);
+  });
+});

src/plots/gauge/adaptor.ts

@@ -1,8 +1,9 @@
 import { isString, clamp, size } from '@antv/util';
 import { interaction, animation, theme, scale } from '../../adaptor/common';
+import { AXIS_META_CONFIG_KEYS } from '../../constant';
 import { Params } from '../../core/adaptor';
 import { Data } from '../../types';
-import { deepAssign, flow, renderGaugeStatistic } from '../../utils';
+import { deepAssign, flow, pick, renderGaugeStatistic } from '../../utils';
 import { RANGE_TYPE, RANGE_VALUE, PERCENT, DEFAULT_COLOR } from './constant';
 import { GaugeOptions } from './types';
 import { processRangeData } from './utils';
@@ -41,6 +42,8 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
     });
 
     v1.axis(PERCENT, axis);
+    // 一部分应用到 scale 中
+    v1.scale(PERCENT, pick(axis, AXIS_META_CONFIG_KEYS));
   }
 
   // 辅助 range

src/plots/gauge/index.ts

@@ -68,6 +68,8 @@ export class Gauge extends Plot<GaugeOptions> {
         },
         [PERCENT]: {
           sync: 'v',
+          tickCount: 5,
+          tickInterval: 0.2,
         },
       },
       animation: false,