diff --git a/__tests__/unit/core/index-spec.ts b/__tests__/unit/core/index-spec.ts
index 3203c6bac62..9a7de8f8fc0 100644
--- a/__tests__/unit/core/index-spec.ts
+++ b/__tests__/unit/core/index-spec.ts
@@ -177,15 +177,17 @@ describe('core', () => {
});
it('getChartSize', () => {
- const line = new Line(createDiv(), {
+ createDiv('', document.body, 'changeSize');
+ document.getElementById('changeSize').style.width = '0px';
+ const line = new Line('changeSize', {
data: partySupport.filter((o) => o.type === 'FF'),
xField: 'date',
yField: 'value',
});
line.render();
- expect(line.chart.height).toBe(300);
-
+ expect(line.chart.width).toBe(400);
+ expect(line.chart.height).toBe(400);
line.destroy();
});
});
diff --git a/__tests__/utils/dom.ts b/__tests__/utils/dom.ts
index f611c0a515a..b652acb0752 100644
--- a/__tests__/utils/dom.ts
+++ b/__tests__/utils/dom.ts
@@ -2,6 +2,7 @@
* 创建一个 div 节点，并放到 container，默认放到 body 上
* @param title
* @param container
+ * @param id 容器 id
*/
export function createDiv(title: string = '', container: HTMLElement = document.body, id?: string): HTMLElement {
const div = document.createElement('div');
@@ -13,10 +14,6 @@ export function createDiv(title: string = '', container: HTMLElement = document.
container.appendChild(titleDiv);
}
- if (id) {
- div.setAttribute('id', id);
- }
-
container.appendChild(div);
return div;
diff --git a/docs/manual/plots/scatter.en.md b/docs/manual/plots/scatter.en.md
index b67034899a8..ba2dd7ddc7c 100644
--- a/docs/manual/plots/scatter.en.md
+++ b/docs/manual/plots/scatter.en.md
@@ -72,9 +72,9 @@ scatterPlot.render();
点大小映射对应的数据字段名。
-#### size
+#### size
-**optional** \_number | [number, number] | Function_
+**optional** \_number | [number, number] | Function\_
[**DEMO1**](../../scatter/basic#color-mapping)
@@ -106,7 +106,7 @@ scatterPlot.render();
点形状映射对应的数据字段名。
-#### shape
+#### shape
**optional** \_string | string[] | Function\_
@@ -139,7 +139,7 @@ scatterPlot.render();
}
```
-#### pointStyle
+#### pointStyle
**optional** _object_
@@ -192,6 +192,48 @@ scatterPlot.render();
`markdown:docs/common/component.en.md`
+#### quadrant
+
+[**DEMO**](../../scatter/basic#quadrant)
+
+**optional** _object_
+
+四象限组件。
+
+| 细分配置 | 类型 | 功能描述 |
+| ----------- | -------- | ------------------------------------------ |
+| xBaseline | number | x 方向上的象限分割基准线，默认为 0 |
+| yBaseline | number | y 方向上的象限分割基准线，默认为 0 |
+| lineStyle | object | 配置象限分割线的样式，详细配置参考绘图属性 |
+| regionStyle | object[] | 象限样式，详细配置参考绘图属性 |
+| labels | object[] | 象限文本配置，详细配置参考绘图属性 |
+
+#### regressionLine
+
+[**DEMO**](../../scatter/basic#line)
+
+**optional** _object_
+
+回归线。
+
+| 细分配置 | 类型 | 功能描述 |
+| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| type | string | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad |
+| style | object | 配置回归线样式，详细配置参考绘图属性 |
+| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type |
+
+```ts
+regressionLine: {
+ algorithm: () => {
+ return [
+ [8, 6],
+ [16, 7],
+ [24, 7],
+ ];
+ },
+}
+```
+
### Event
`markdown:docs/common/events.en.md`
diff --git a/docs/manual/plots/scatter.zh.md b/docs/manual/plots/scatter.zh.md
index e8c9d321436..c45e7e1cf64 100644
--- a/docs/manual/plots/scatter.zh.md
+++ b/docs/manual/plots/scatter.zh.md
@@ -72,9 +72,9 @@ scatterPlot.render();
点大小映射对应的数据字段名。
-#### size
+#### size
-**optional** \_number | [number, number] | Function_
+**optional** \_number | [number, number] | Function\_
[**DEMO1**](../../scatter/basic#color-mapping)
@@ -106,7 +106,7 @@ scatterPlot.render();
点形状映射对应的数据字段名。
-#### shape
+#### shape
**optional** \_string | string[] | Function\_
@@ -139,7 +139,7 @@ scatterPlot.render();
}
```
-#### pointStyle
+#### pointStyle
**optional** _object_
@@ -192,6 +192,48 @@ scatterPlot.render();
`markdown:docs/common/component.zh.md`
+#### quadrant
+
+[**DEMO**](../../scatter/basic#quadrant)
+
+**optional** _object_
+
+四象限组件。
+
+| 细分配置 | 类型 | 功能描述 |
+| ----------- | -------- | ------------------------------------------ |
+| xBaseline | number | x 方向上的象限分割基准线，默认为 0 |
+| yBaseline | number | y 方向上的象限分割基准线，默认为 0 |
+| lineStyle | object | 配置象限分割线的样式，详细配置参考绘图属性 |
+| regionStyle | object[] | 象限样式，详细配置参考绘图属性 |
+| labels | object[] | 象限文本配置，详细配置参考绘图属性 |
+
+#### regressionLine
+
+[**DEMO**](../../scatter/basic#line)
+
+**optional** _object_
+
+回归线。
+
+| 细分配置 | 类型 | 功能描述 |
+| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| type | string | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad |
+| style | object | 配置回归线样式，详细配置参考绘图属性 |
+| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type |
+
+```ts
+regressionLine: {
+ algorithm: () => {
+ return [
+ [8, 6],
+ [16, 7],
+ [24, 7],
+ ];
+ },
+}
+```
+
### 事件
`markdown:docs/common/events.zh.md`
diff --git a/examples/scatter/basic/demo/custom-shape.ts b/examples/scatter/basic/demo/custom-shape.ts
new file mode 100644
index 00000000000..5119940f6d1
--- /dev/null
+++ b/examples/scatter/basic/demo/custom-shape.ts
@@ -0,0 +1,61 @@
+import { Scatter, G2 } from '@antv/g2plot';
+
+// 注册主体有 point | interval | polygon | line 等，详细参考 G2: https://g2.antv.vision/
+G2.registerShape('point', 'custom-shape', {
+ draw(cfg, group) {
+ const cx = cfg.x;
+ const cy = cfg.y;
+ const radius = cfg.size || 5;
+ const polygon = group.addShape('path', {
+ attrs: {
+ path: [['M', cx - radius, cy - radius], ['L', cx + radius, cy - radius], ['L', cx, cy + radius], ['Z']],
+ ...cfg.defaultStyle,
+ ...cfg.style,
+ },
+ });
+ return polygon;
+ },
+});
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f42764a8.json')
+ .then((res) => res.json())
+ .then((data) => {
+ const scatterPlot = new Scatter('container', {
+ appendPadding: 30,
+ data,
+ xField: 'xG conceded',
+ yField: 'Shot conceded',
+ shape: 'custom-shape',
+ pointStyle: {
+ lineWidth: 2,
+ },
+ size: 6,
+ yAxis: {
+ nice: true,
+ line: {
+ style: {
+ stroke: '#aaa',
+ },
+ },
+ },
+ tooltip: {
+ showMarkers: false,
+ },
+ xAxis: {
+ grid: {
+ line: {
+ style: {
+ stroke: '#eee',
+ },
+ },
+ },
+ line: {
+ style: {
+ stroke: '#aaa',
+ },
+ },
+ },
+ label: {},
+ });
+ scatterPlot.render();
+ });
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
index 1209a15acef..680c8bf65ca 100644
--- a/examples/scatter/basic/demo/meta.json
+++ b/examples/scatter/basic/demo/meta.json
@@ -43,6 +43,14 @@
"en": "Bubble plot yAxis on the right"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0luHTJODdMUAAAAAAAAAAAAAARQnAQ"
+ },
+ {
+ "filename": "custom-shape.ts",
+ "title": {
+ "zh": "散点图-自定义图形",
+ "en": "Scatter plot custom shape"
+ },
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zfwOTZE7KwcAAAAAAAAAAAAAARQnAQ"
}
]
}
diff --git a/src/core/plot.ts b/src/core/plot.ts
index 37e144081fc..99677bc9a98 100644
--- a/src/core/plot.ts
+++ b/src/core/plot.ts
@@ -83,7 +83,7 @@ export abstract class Plot extends EE {
*/
private getChartSize(width: number, height: number): Size {
const chartSize = getContainerSize(this.container);
- return { width: width || chartSize.width, height: height || chartSize.height || 300 };
+ return { width: width || chartSize.width || 400, height: height || chartSize.height || 400 };
}
/**