refactor(bullet): 调整 bullet 的 style api (#1790)

* fix: 调整bullet的style api

* refactor: 调整api(style)为(bulletStyle)

Author: arcsin1

__tests__/unit/plots/bullet/style-spec.ts

@@ -0,0 +1,41 @@
+import { Bullet } from '../../../../src';
+import { bulletData } from '../../../data/bullet';
+import { createDiv } from '../../../utils/dom';
+
+describe('bulletStyle*label', () => {
+  it('bulletStyle', () => {
+    const bullet = new Bullet(createDiv('bulletStyle bullet'), {
+      width: 400,
+      height: 100,
+      data: bulletData,
+      measureField: 'measures',
+      rangeField: 'ranges',
+      targetField: 'target',
+      xField: 'title',
+      bulletStyle: {
+        range: {
+          fillOpacity: 0.65,
+        },
+        target: {
+          stroke: '#ddd',
+        },
+      },
+    });
+
+    bullet.render();
+
+    const chart = bullet.chart;
+    const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries;
+
+    const rangeElements = rangeGeometry.elements[0];
+    expect(rangeElements.shape.attr('fillOpacity')).toBe(0.65);
+
+    expect(measureGeometry.getAdjust('stack')).toMatchObject({
+      xField: 'title',
+      yField: 'measures',
+    });
+
+    const targetElements = targetGeometry.elements[0];
+    expect(targetElements.shape.attr('stroke')).toBe('#ddd');
+  });
+});

examples/bullet/basic/API.en.md

@@ -73,7 +73,7 @@ bulletPlot.render();
 
 ### 图形样式
 
-#### style ✨
+#### bulletStyle ✨
 
 **可选**, _object_
 

examples/bullet/basic/API.zh.md

@@ -73,7 +73,7 @@ bulletPlot.render();
 
 ### 图形样式
 
-#### style ✨
+#### bulletStyle ✨
 
 **可选**, _object_
 

src/plots/bullet/adaptor.ts

@@ -13,7 +13,7 @@ import { transformData } from './utils';
  */
 function geometry(params: Params<BulletOptions>): Params<BulletOptions> {
   const { chart, options } = params;
-  const { style, targetField, rangeField, measureField, xField, color, layout, size } = options;
+  const { bulletStyle, targetField, rangeField, measureField, xField, color, layout, size } = options;
   // 处理数据
   const { min, max, ds } = transformData(options);
 
@@ -43,7 +43,7 @@ function geometry(params: Params<BulletOptions>): Params<BulletOptions> {
       isStack: true,
       interval: {
         color: color?.range,
-        style: style?.range,
+        style: bulletStyle?.range,
         size: size?.range,
       },
     },
@@ -61,7 +61,7 @@ function geometry(params: Params<BulletOptions>): Params<BulletOptions> {
       isStack: true,
       interval: {
         color: color?.measure,
-        style: style?.measure,
+        style: bulletStyle?.measure,
         size: size?.measure,
       },
     },
@@ -76,7 +76,7 @@ function geometry(params: Params<BulletOptions>): Params<BulletOptions> {
       seriesField: 'tKey',
       point: {
         color: color?.target,
-        style: style?.target,
+        style: bulletStyle?.target,
         size: isNumber(size?.target) ? Number(size.target) / 2 : size.target,
         shape: layout === 'horizontal' ? 'line' : 'hyphen',
       },

src/plots/bullet/index.ts

@@ -25,7 +25,7 @@ export class Bullet extends Plot<BulletOptions> {
         measure: 20,
         target: 20,
       },
-      style: {
+      bulletStyle: {
         range: {
           fillOpacity: 0.5,
         },

src/plots/bullet/types.ts

@@ -30,8 +30,8 @@ export interface BulletOptions extends Omit<Options, 'color' | 'label' | 'style'
   /** color 包含了 measure,target,range */
   readonly color?: BulletAttr<ColorAttr>;
 
-  /** style 包含了 measure,target,range */
-  readonly style?: BulletAttr<StyleAttr>;
+  /** bulletStyle 包含了 measure,target,range */
+  readonly bulletStyle?: BulletAttr<StyleAttr>;
 
   /** layout 方向选择*/
   layout?: 'horizontal' | 'vertical';