feat(gauge): 优化仪表盘的 changedata, 每一次 changedata 只做一次 paint 绘制

- [x] 单测

__tests__/unit/plots/gauge/statistic-spec.ts

@@ -44,6 +44,23 @@ describe('gauge statistic', () => {
     expect((annotations[0] as HTMLElement).innerText).toBe('测试');
   });
 
+  it('change data', () => {
+    gauge.changeData(0.35);
+    const annotations = document.body.querySelectorAll('.g2-html-annotation');
+    expect(annotations.length).toBe(2);
+    expect((annotations[1] as HTMLElement).innerText).toBe('35.0%');
+
+    gauge.changeData(0.15);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[1] as HTMLElement).innerText).toBe('15.0%');
+
+    gauge.update({ statistic: { content: {}, title: false } });
+    expect(document.body.querySelectorAll('.g2-html-annotation').length).toBe(1);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('15.0%');
+
+    gauge.changeData(0.05);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('5.0%');
+  });
+
   afterAll(() => {
     gauge.destroy();
   });

examples/progress-plots/gauge/demo/basic.ts

@@ -49,9 +49,8 @@ const interval = setInterval(() => {
   if (data >= 0.85) {
     clearInterval(interval);
   } else {
-    data += 0.005;
+    data += 0.001;
     gauge.changeData(data);
     // range color 需要提供回调的方式
-    gauge.update({ range: { color: getColor(data) } });
   }
-}, 500);
+}, 100);

src/core/plot.ts

@@ -165,15 +165,15 @@ export abstract class Plot<O extends PickOptions> extends EE {
    * @param options
    */
   public update(options: Partial<O>) {
-    this.updateOptions(options);
+    this.updateOption(options);
     this.render();
   }
 
   /**
    * 更新配置
    * @param options
    */
-  public updateOptions(options: Partial<O>) {
+  protected updateOption(options: Partial<O>) {
     this.options = deepAssign({}, this.options, options);
   }
 

src/plots/gauge/adaptor.ts

@@ -6,7 +6,7 @@ import { Data } from '../../types';
 import { deepAssign, flow, pick, renderGaugeStatistic } from '../../utils';
 import { RANGE_TYPE, RANGE_VALUE, PERCENT, DEFAULT_COLOR, INDICATEOR_VIEW_ID, RANGE_VIEW_ID } from './constant';
 import { GaugeOptions } from './types';
-import { getIndicatorViewData, getRangeViewData } from './utils';
+import { getIndicatorData, getRangeData } from './utils';
 
 /**
  * geometry 处理
@@ -20,7 +20,7 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
   // 指标 & 指针
   // 如果开启在应用
   if (indicator) {
-    const indicatorData = getIndicatorViewData(percent);
+    const indicatorData = getIndicatorData(percent);
 
     const v1 = chart.createView({ id: INDICATEOR_VIEW_ID });
     v1.data(indicatorData);
@@ -47,7 +47,7 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
 
   // 辅助 range
   // [{ range: 1, type: '0' }]
-  const rangeData: Data = getRangeViewData(percent, options.range);
+  const rangeData: Data = getRangeData(percent, options.range);
   const v2 = chart.createView({ id: RANGE_VIEW_ID });
   v2.data(rangeData);
 
@@ -87,10 +87,12 @@ function meta(params: Params<GaugeOptions>): Params<GaugeOptions> {
  * 统计指标文档
  * @param params
  */
-function statistic(params: Params<GaugeOptions>): Params<GaugeOptions> {
+function statistic(params: Params<GaugeOptions>, updated?: boolean): Params<GaugeOptions> {
   const { chart, options } = params;
   const { statistic, percent } = options;
 
+  // 先清空标注，再重新渲染
+  chart.getController('annotation').clear(true);
   if (statistic) {
     const { content } = statistic;
     let transformContent;
@@ -114,6 +116,10 @@ function statistic(params: Params<GaugeOptions>): Params<GaugeOptions> {
     renderGaugeStatistic(chart, { statistic: { ...statistic, content: transformContent } }, { percent });
   }
 
+  if (updated) {
+    chart.render(true);
+  }
+
   return params;
 }
 
@@ -130,6 +136,11 @@ function other(params: Params<GaugeOptions>): Params<GaugeOptions> {
   return params;
 }
 
+/**
+ * 对外暴露的 adaptor
+ */
+export { statistic };
+
 /**
  * 图适配器
  * @param chart

src/plots/gauge/index.ts

@@ -1,9 +1,9 @@
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { GaugeOptions } from './types';
-import { adaptor } from './adaptor';
+import { adaptor, statistic } from './adaptor';
 import { RANGE_VALUE, PERCENT, INDICATEOR_VIEW_ID, RANGE_VIEW_ID } from './constant';
-import { getIndicatorViewData, getRangeViewData } from './utils';
+import { getIndicatorData, getRangeData } from './utils';
 // 注册 shape
 import './shapes/gauge';
 
@@ -82,17 +82,19 @@ export class Gauge extends Plot<GaugeOptions> {
    * @param percent
    */
   public changeData(percent: number) {
-    this.updateOptions({ percent });
+    this.updateOption({ percent });
 
     const indicatorView = this.chart.views.find((v) => v.id === INDICATEOR_VIEW_ID);
     if (indicatorView) {
-      indicatorView.changeData(getIndicatorViewData(percent));
+      indicatorView.data(getIndicatorData(percent));
     }
 
     const rangeView = this.chart.views.find((v) => v.id === RANGE_VIEW_ID);
     if (rangeView) {
-      rangeView.changeData(getRangeViewData(percent, this.options.range));
+      rangeView.data(getRangeData(percent, this.options.range));
     }
+    // todo 后续让 G2 层在 afterrender 之后，来重绘 annotations
+    statistic({ chart: this.chart, options: this.options }, true);
   }
 
   /**

src/plots/gauge/utils.ts

@@ -24,11 +24,16 @@ export function processRangeData(range: number[]): Data {
  * 获取 仪表盘 指针数据
  * @param percent
  */
-export function getIndicatorViewData(percent: GaugeOptions['percent']): Data {
+export function getIndicatorData(percent: GaugeOptions['percent']): Data {
   return [{ [PERCENT]: clamp(percent, 0, 1) }];
 }
 
-export function getRangeViewData(percent: GaugeOptions['percent'], range: GaugeOptions['range']): Data {
+/**
+ * 获取仪表盘 表盘弧形数据
+ * @param percent
+ * @param range
+ */
+export function getRangeData(percent: GaugeOptions['percent'], range: GaugeOptions['range']): Data {
   const ticks = get(range, ['ticks'], []);
 
   const clampTicks = size(ticks) ? ticks : [0, clamp(percent, 0, 1), 1];

src/plots/line/index.ts

@@ -17,8 +17,7 @@ export class Line extends Plot<LineOptions> {
    * @param data
    */
   public changeData(data: LineOptions['data']) {
-    // @ts-ignore
-    this.updateOptions({ data });
+    this.updateOption({ data });
     this.chart.changeData(data);
   }