, config: C) {
- const plotRef = useRef();
- const plotConfig = useRef();
- const containerRef = useRef(null);
- const { onReady } = config;
-
- // updateOption/changeData/updateMap
- useEffect(() => {
- if (!plotRef.current || !plotConfig.current || isEqual(plotConfig.current, config)) return;
- let changeData = false;
- let updateMap = false;
- let updateOption = false;
-
- const {
- onReady: currentOnReady,
- map: currentMap,
- source: { data: currentSourceData, ...currentSourceConfig },
- ...currentConfig
- } = plotConfig.current;
- const {
- onReady,
- map: inputMap,
- source: { data: inputSourceData, ...inputSourceDataConfig },
- ...inputConfig
- } = config;
- updateMap = !isEqual(currentMap, inputMap);
- changeData = !isEqual(currentSourceConfig, inputSourceDataConfig) || currentSourceData !== inputSourceData;
- updateOption = !isEqual(currentConfig, inputConfig);
- plotConfig.current = deepCloneMapConfig(config);
- if (updateMap) {
- const updateMapConfig = pick(inputMap, ['center', 'pitch', 'rotation', 'zoom', 'style']);
- plotRef.current.updateMap(updateMapConfig);
- }
-
- if (changeData) {
- if (plotRef.current.loaded) {
- plotRef.current.changeData(inputSourceData, inputSourceDataConfig);
- } else {
- plotRef.current.once('loaded', () => {
- plotRef.current?.changeData(inputSourceData, inputSourceDataConfig);
- });
- }
- }
-
- if (updateOption) {
- if (plotRef.current.loaded) {
- // @ts-ignore
- plotRef.current.update(inputConfig);
- } else {
- plotRef.current.once('loaded', () => {
- // @ts-ignore
- plotRef.current?.update(inputConfig);
- });
- }
- }
- }, [config]);
-
- useEffect(() => {
- if (!containerRef.current) {
- return () => null;
- }
- if (!plotConfig.current) {
- plotConfig.current = deepCloneMapConfig(config);
- }
-
- plotRef.current = new Ctor(containerRef.current, { ...config });
-
- if (onReady) {
- plotRef.current.once('loaded', () => {
- onReady(plotRef.current);
- });
- }
-
- // 组件销毁时销毁图表
- return () => {
- if (plotRef.current) {
- plotRef.current.destroy();
- plotRef.current = undefined;
- }
- };
- }, []);
-
- return {
- plotRef,
- containerRef,
- };
-}
diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts
deleted file mode 100644
index 43ef8ffb3..000000000
--- a/packages/maps/src/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export {
- registerImage,
- registerImages,
- unregisterImage,
- registerFontFace,
- unregisterFontFace,
- registerIconFont,
- registerIconFonts,
- unregisterIconFont,
-} from '@antv/l7plot';
-
-export type { ContainerConfig as MapContainerConfig, PlotRef } from './types';
-
-export { default as DotMap } from './components/dot-map';
-export type { DotMapConfig } from './components/dot-map';
-export { default as GeographicHeatmap } from './components/geographic-heatmap';
-export type { GeographicHeatmapConfig } from './components/geographic-heatmap';
-export { default as GridMap } from './components/grid-map';
-export type { GridMapConfig } from './components/grid-map';
-export { default as HexbinMap } from './components/hexbin-map';
-export type { HexbinMapConfig } from './components/hexbin-map';
-export { default as PathMap } from './components/path-map';
-export type { PathMapConfig } from './components/path-map';
-export { default as FlowMap } from './components/flow-map';
-export type { FlowMapConfig } from './components/flow-map';
-export { default as AreaMap } from './components/area-map';
-export type { AreaMapConfig } from './components/area-map';
-export { default as ChoroplethMap } from './components/choropleth-map';
-export type { ChoroplethMapConfig } from './components/choropleth-map';
diff --git a/packages/maps/src/types.ts b/packages/maps/src/types.ts
deleted file mode 100644
index ae2437599..000000000
--- a/packages/maps/src/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type PlotRef = ((plot: P) => void) | React.MutableRefObject
;
-
-export interface ContainerConfig {
- containerStyle?: React.CSSProperties;
- className?: string;
- loading?: boolean;
- loadingTemplate?: React.ReactElement;
- errorTemplate?: (e: Error) => React.ReactNode;
-}
diff --git a/packages/maps/src/util/config.ts b/packages/maps/src/util/config.ts
deleted file mode 100644
index d716a3afd..000000000
--- a/packages/maps/src/util/config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PlotOptions } from '@antv/l7plot';
-import { deepClone } from '../util';
-
-/**
- * 深克隆配置项
- * @param config 要深克隆的配置
- */
-export const deepCloneMapConfig = (config: T): T => {
- const { source, ...restConfig } = config;
- const target = { ...deepClone(restConfig), source: { ...source } };
-
- return target;
-};
diff --git a/packages/maps/src/util/createLoading.tsx b/packages/maps/src/util/createLoading.tsx
deleted file mode 100644
index 5b2e8fbfd..000000000
--- a/packages/maps/src/util/createLoading.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import ContentLoader from 'react-content-loader';
-
-interface Props {
- loadingTemplate?: React.ReactElement;
-}
-
-const ChartLoading = ({ loadingTemplate }: Props) => {
- const renderLoading = () => {
- if (loadingTemplate) {
- return loadingTemplate;
- }
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
- };
-
- return (
-
- {renderLoading()}
-
- );
-};
-
-export default ChartLoading;
diff --git a/packages/maps/src/util/getChart.ts b/packages/maps/src/util/getChart.ts
deleted file mode 100644
index d023a9f21..000000000
--- a/packages/maps/src/util/getChart.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isFunction } from '@antv/util';
-import { PlotRef } from '../types';
-
-/**
- * 获取或者绑定图表实例
- */
-export const getChart = (chartRef: PlotRef
| undefined, chart: P) => {
- if (!chartRef) {
- return;
- }
- if (isFunction(chartRef)) {
- chartRef(chart);
- } else {
- chartRef.current = chart;
- }
-};
diff --git a/packages/maps/src/util/index.ts b/packages/maps/src/util/index.ts
deleted file mode 100644
index c055fa9e2..000000000
--- a/packages/maps/src/util/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './getChart';
-export * from './config';
-export * from './utils';
-export { render, unmount } from './render';
diff --git a/packages/maps/src/util/render.ts b/packages/maps/src/util/render.ts
deleted file mode 100644
index db0eecbf6..000000000
--- a/packages/maps/src/util/render.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import type * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import type { Root } from 'react-dom/client';
-
-// Let compiler not to search module usage
-const fullClone = {
- ...ReactDOM,
-} as typeof ReactDOM & {
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
- usingClientEntryPoint?: boolean;
- };
- createRoot?: CreateRoot;
-};
-
-type CreateRoot = (container: ContainerType) => Root;
-
-const { version, render: reactRender, unmountComponentAtNode } = fullClone;
-
-let createRoot: CreateRoot;
-try {
- const mainVersion = Number((version || '').split('.')[0]);
- if (mainVersion >= 18) {
- ({ createRoot } = fullClone);
- }
-} catch (e) {
- // Do nothing;
-}
-
-function toggleWarning(skip: boolean) {
- const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
-
- if (
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
- typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object'
- ) {
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
- }
-}
-
-const MARK = '__rc_react_root__';
-
-// ========================== Render ==========================
-type ContainerType = (Element | DocumentFragment) & {
- [MARK]?: Root;
-};
-
-function modernRender(node: React.ReactNode, container: ContainerType) {
- toggleWarning(true);
- const root = container[MARK] || createRoot(container);
- toggleWarning(false);
-
- root.render(node);
-
- container[MARK] = root;
-}
-
-function legacyRender(node: React.ReactElement, container: ContainerType) {
- reactRender(node, container);
-}
-
-/** @private Test usage. Not work in prod */
-export function _r(node: React.ReactElement, container: ContainerType) {
- if (process.env.NODE_ENV !== 'production') {
- return legacyRender(node, container);
- }
-}
-
-export function render(node: React.ReactElement, container: ContainerType) {
- if (createRoot) {
- modernRender(node, container);
- return;
- }
-
- legacyRender(node, container);
-}
-
-// ========================= Unmount ==========================
-async function modernUnmount(container: ContainerType) {
- // Delay to unmount to avoid React 18 sync warning
- return Promise.resolve().then(() => {
- container[MARK]?.unmount();
-
- delete container[MARK];
- });
-}
-
-function legacyUnmount(container: ContainerType) {
- unmountComponentAtNode(container);
-}
-
-/** @private Test usage. Not work in prod */
-export function _u(container: ContainerType) {
- if (process.env.NODE_ENV !== 'production') {
- return legacyUnmount(container);
- }
-}
-
-export async function unmount(container: ContainerType) {
- if (createRoot !== undefined) {
- // Delay to unmount to avoid React 18 sync warning
- return modernUnmount(container);
- }
-
- legacyUnmount(container);
-}
diff --git a/packages/maps/src/util/utils.ts b/packages/maps/src/util/utils.ts
deleted file mode 100644
index 8b4d8cf6b..000000000
--- a/packages/maps/src/util/utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// 类型检测
-export const isType = (value: any, type: string): boolean => {
- const { toString } = {};
- return toString.call(value) === `[object ${type}]`;
-};
-
-export const getType = (n: Object) => {
- return Object.prototype.toString.call(n).slice(8, -1);
-};
-
-/**
- * 深克隆
- * @param source 要深克隆的目标对象
- */
-export const deepClone = (source: Object | undefined) => {
- if (!source || typeof source !== 'object') {
- return source;
- }
-
- let target;
- if (Array.isArray(source)) {
- target = source.map((item) => deepClone(item));
- } else {
- target = {};
- Object.keys(source).forEach((key) => {
- return (target[key] = deepClone(source[key]));
- });
- }
-
- return target;
-};
-
-export const clone = (source: Object) => {
- if (!source) {
- return source;
- }
- const target = {};
- // eslint-disable-next-line guard-for-in
- for (const k in source) {
- target[k] = source[k];
- }
- return target;
-};
diff --git a/packages/maps/tests/maps/heat-map.test.tsx b/packages/maps/tests/maps/heat-map.test.tsx
deleted file mode 100644
index 155eed9cb..000000000
--- a/packages/maps/tests/maps/heat-map.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import GeographicHeatmap from '../../src/components/geographic-heatmap';
-import { render } from '../../src/util';
-
-describe('Heat Map', () => {
- let container;
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
- const data = [
- {
- w: 21.5458,
- t: 22.2,
- s: '广东',
- l: 11,
- m: '电白',
- j: 110.9886,
- h: '59664',
- },
- {
- w: 22.9661,
- t: 21.9,
- s: '广东',
- l: 12,
- m: '东莞',
- j: 113.7389,
- h: '59289',
- },
- ];
- it('初始化以及销毁', () => {
- let chartRef = undefined;
- const props = {
- className: 'container',
- chartRef: (ref) => {
- chartRef = ref;
- },
- };
- const config = {
- map: { type: 'amap' },
- source: {
- data,
- parser: {
- type: 'json',
- x: 'j',
- y: 'w',
- },
- },
- size: {
- field: 't',
- value: [0, 1],
- },
- };
- act(() => {
- render(, container);
- });
- expect(chartRef).not.toBeUndefined();
- });
-});
diff --git a/packages/maps/tests/utils/error-boundary.test.tsx b/packages/maps/tests/utils/error-boundary.test.tsx
deleted file mode 100644
index 024ed05bf..000000000
--- a/packages/maps/tests/utils/error-boundary.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import AreaMap from '../../src/components/area-map';
-import { render } from '../../src/util';
-
-describe('Map render', () => {
- let container;
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
- afterEach(() => {
- document.body.removeChild(container);
- container = null;
- });
-
- it.skip('error template with ReactNode', () => {
- const props = {
- loading: true,
- // An object of type loadingTemplate is only used to trigger a boundary error
- loadingTemplate: {
- triggleError: true,
- },
- errorTemplate: custom error,
- };
- const chartProps = {
- map: { type: 'amap1' },
- source: {
- data: [{ w: 21.5458, t: 22.2, s: '广东', l: 11, m: '电白', j: 110.9886, h: '59664' }],
- parser: {
- type: 'json',
- x: 'j',
- y: 'w',
- },
- },
- };
- act(() => {
- render(, container);
- });
- expect(container.querySelector('#error').innerText).toBe('custom error');
- });
-});
diff --git a/packages/maps/tests/utils/util.test.ts b/packages/maps/tests/utils/util.test.ts
deleted file mode 100644
index dfb43bcd5..000000000
--- a/packages/maps/tests/utils/util.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { clone, isType } from '../../src/util';
-
-describe('utils', () => {
- it('is type', () => {
- expect(isType('s', 'String')).toBeTruthy();
- expect(isType(0, 'Number')).toBeTruthy();
- expect(isType({}, 'Object')).toBeTruthy();
- expect(isType(undefined, 'Undefined')).toBeTruthy();
- expect(isType(null, 'Null')).toBeTruthy();
- expect(isType(NaN, 'Number')).toBeTruthy();
- expect(isType([1, 2], 'Array')).toBeTruthy();
- });
-
- it('clone', () => {
- const config = {
- statistic: {
- content: {
- customHtml: 'html',
- },
- title: {},
- },
- };
- expect(clone(undefined)).toBeUndefined();
- expect(clone(config)).toEqual(config);
- // @ts-ignore
- config.__proto__.name = 'fj';
- expect(clone(config)).toEqual({
- statistic: {
- content: {
- customHtml: 'html',
- },
- title: {},
- },
- name: 'fj',
- });
- });
-});
diff --git a/packages/maps/tsconfig.json b/packages/maps/tsconfig.json
deleted file mode 100644
index 74ecfab18..000000000
--- a/packages/maps/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["src", "tests"]
-}
diff --git a/packages/maps/tsconfig.prod.json b/packages/maps/tsconfig.prod.json
deleted file mode 100644
index 596e2cf72..000000000
--- a/packages/maps/tsconfig.prod.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["src"]
-}
diff --git a/packages/maps/webpack.config.js b/packages/maps/webpack.config.js
deleted file mode 100644
index 7065af0de..000000000
--- a/packages/maps/webpack.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const { getWebpackConfig } = require('../../config/webpack');
-
-module.exports = getWebpackConfig('maps', 'Maps');
diff --git a/packages/plots/package.json b/packages/plots/package.json
index bb4154287..a1d8c0a30 100644
--- a/packages/plots/package.json
+++ b/packages/plots/package.json
@@ -36,14 +36,16 @@
"test:live": "DEBUG_MODE=1 jest --watch ./tests/plots/column-proxy-spec.tsx --no-cache"
},
"dependencies": {
- "@antv/g2plot": "^3.0.0-alpha.1",
- "@antv/util": "^2.0.9",
+ "@antv/event-emitter": "^0.1.3",
+ "@antv/g2": "^5.0.6",
+ "size-sensor": "^1.0.1",
"react-content-loader": "^5.0.4",
"rc-utils": "workspace:*"
},
"peerDependencies": {
"react": ">=16.8.4",
- "react-dom": ">=16.8.4"
+ "react-dom": ">=16.8.4",
+ "lodash-es": "^4.17.21"
},
"sideEffects": false,
"license": "MIT",
diff --git a/packages/plots/src/components/base/index.tsx b/packages/plots/src/components/base/index.tsx
index 17c032b12..23cff9c03 100644
--- a/packages/plots/src/components/base/index.tsx
+++ b/packages/plots/src/components/base/index.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
+import React, { useImperativeHandle, forwardRef } from 'react';
import { ErrorBoundary, ChartLoading } from 'rc-utils';
import useChart from '../../hooks/useChart';
-import { Plots } from './plots';
+import { Plots } from '../../g2-core';
import { CommonConfig, Chart } from '../../interface';
export const BaseChart: React.FC = forwardRef(({ chartType, ...config }: CommonConfig, ref) => {
diff --git a/packages/plots/src/components/base/plots.ts b/packages/plots/src/components/base/plots.ts
deleted file mode 100644
index 4e51ee6a9..000000000
--- a/packages/plots/src/components/base/plots.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * as Plots from '@antv/g2plot';
diff --git a/packages/plots/src/components/column/index.tsx b/packages/plots/src/components/column/index.tsx
index 1913cb0cc..065768a9e 100644
--- a/packages/plots/src/components/column/index.tsx
+++ b/packages/plots/src/components/column/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ColumnOptions } from '@antv/g2plot';
+import { ColumnOptions } from '../../g2-core';
import { CommonConfig } from '../../interface';
import { BaseChart } from '../base';
diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts
new file mode 100644
index 000000000..47b963d2a
--- /dev/null
+++ b/packages/plots/src/components/index.ts
@@ -0,0 +1,4 @@
+import Column from './column';
+import Line from './line';
+
+export { Column, Line };
diff --git a/packages/plots/src/components/interface.ts b/packages/plots/src/components/interface.ts
index 147cca843..7fc0412ef 100644
--- a/packages/plots/src/components/interface.ts
+++ b/packages/plots/src/components/interface.ts
@@ -1 +1,2 @@
export type { ColumnConfig } from './column';
+export type { LineConfig } from './line';
diff --git a/packages/plots/src/components/line/index.tsx b/packages/plots/src/components/line/index.tsx
new file mode 100644
index 000000000..dc7b54338
--- /dev/null
+++ b/packages/plots/src/components/line/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { LineOptions } from '../../g2-core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type LineConfig = CommonConfig;
+
+const LineChart = (props: LineConfig) => ;
+
+export default LineChart;
diff --git a/packages/plots/src/g2-core/components/index.ts b/packages/plots/src/g2-core/components/index.ts
new file mode 100644
index 000000000..18f02928a
--- /dev/null
+++ b/packages/plots/src/g2-core/components/index.ts
@@ -0,0 +1 @@
+export { mark } from './mark';
diff --git a/packages/plots/src/g2-core/components/mark.ts b/packages/plots/src/g2-core/components/mark.ts
new file mode 100644
index 000000000..89dc9457a
--- /dev/null
+++ b/packages/plots/src/g2-core/components/mark.ts
@@ -0,0 +1,8 @@
+import type { Adaptor } from '../types';
+
+/**
+ * 根据图表类型新增一些高阶 Mark
+ */
+export function mark(params: P) {
+ return params;
+}
diff --git a/packages/plots/src/g2-core/core/plot.ts b/packages/plots/src/g2-core/core/plot.ts
new file mode 100644
index 000000000..1d16ec4d0
--- /dev/null
+++ b/packages/plots/src/g2-core/core/plot.ts
@@ -0,0 +1,208 @@
+import EE from '@antv/event-emitter';
+import { Chart } from '@antv/g2';
+import { bind } from 'size-sensor';
+import { merge, omit, pick } from '../utils';
+import type { Options, Adaptor } from '../types';
+
+const SOURCE_ATTRIBUTE_NAME = 'data-chart-source-type';
+
+/** new Chart options */
+export const CHART_OPTIONS = ['width', 'height', 'renderer', 'autoFit', 'canvas', 'theme'];
+
+export abstract class Plot extends EE {
+ /** plot 类型名称 */
+ public abstract readonly type: string;
+ /** plot 绘制的 dom */
+ public readonly container: HTMLElement;
+ /** G2 Spec */
+ public options: O;
+ /** G2 chart 实例 */
+ public chart: Chart;
+ /** resizer unbind */
+ private unbind: () => void;
+
+ constructor(container: string | HTMLElement, options: O) {
+ super();
+ this.container = typeof container === 'string' ? document.getElementById(container) : container;
+ this.options = merge({}, this.getBaseOptions(), this.getDefaultOptions(), options);
+ this.createG2();
+ this.render();
+ this.bindEvents();
+ }
+
+ /**
+ * new Chart 所需配置
+ */
+ private getChartOptions() {
+ const { clientWidth, clientHeight } = this.container;
+ // 逻辑简化：如果存在 width 或 height，则直接使用，否则使用容器大小
+ const { width = clientWidth || 640, height = clientHeight || 480, autoFit = true } = this.options;
+ return {
+ ...pick(this.options, CHART_OPTIONS),
+ container: this.container,
+ width,
+ height,
+ autoFit,
+ };
+ }
+
+ /**
+ * G2 options(Spec) 配置
+ */
+ private getSpecOptions() {
+ return omit(this.options, CHART_OPTIONS);
+ }
+
+ /**
+ * 创建 G2 实例
+ */
+ private createG2() {
+ if (!this.container) {
+ throw Error('The container is not initialized!');
+ }
+ this.chart = new Chart(this.getChartOptions());
+ // 给容器增加标识，知道图表的来源区别于 G2
+ this.container.setAttribute(SOURCE_ATTRIBUTE_NAME, 'G2Plot');
+ }
+
+ /**
+ * 绑定代理所有 G2 的事件
+ */
+ private bindEvents() {
+ if (this.chart) {
+ this.chart.on('*', (e) => {
+ if (e?.type) {
+ this.emit(e.type, e);
+ }
+ });
+ }
+ }
+
+ private getBaseOptions(): Partial {
+ return { theme: 'classic' };
+ }
+
+ /**
+ * 获取默认的 options 配置项，每个组件都可以复写
+ */
+ protected getDefaultOptions(): Partial | void {}
+
+ /**
+ * 绘制
+ */
+ public render(): void {
+ // 执行 adaptor
+ this.execAdaptor();
+
+ // options 转换
+ this.chart.options(this.getSpecOptions());
+ // 渲染
+ this.chart.render();
+ // 绑定
+ this.bindSizeSensor();
+ }
+
+ /**
+ * 更新
+ * @param options
+ */
+ public update(options: Partial) {
+ this.updateOption(options);
+ }
+
+ /**
+ * 更新配置
+ * @param options
+ */
+ protected updateOption(options: Partial) {
+ this.options = merge({}, this.options, options);
+ }
+
+ /**
+ * 更新数据
+ * @override
+ * @param options
+ */
+ public changeData(data: any) {
+ this.chart.data(data);
+ }
+
+ /**
+ * 修改画布大小
+ * @param width
+ * @param height
+ */
+ public changeSize(width: number, height: number) {
+ this.chart.changeSize(width, height);
+ }
+
+ /**
+ * 销毁
+ */
+ public destroy() {
+ // 取消 size-sensor 的绑定
+ this.unbindSizeSensor();
+ // G2 的销毁
+ this.chart.destroy();
+ // 清空已经绑定的事件
+ this.off();
+
+ this.container.removeAttribute(SOURCE_ATTRIBUTE_NAME);
+ }
+
+ /**
+ * 每个组件有自己的 schema adaptor
+ */
+ protected abstract getSchemaAdaptor(): (params: Adaptor) => void;
+
+ /**
+ * 执行 adaptor 操作
+ */
+ protected execAdaptor() {
+ const adaptor = this.getSchemaAdaptor();
+
+ // 转化成 G2 Spec
+ adaptor({
+ chart: this.chart,
+ options: this.options,
+ });
+ }
+
+ /**
+ * 当图表容器大小变化的时候，执行的函数
+ */
+ protected triggerResize() {
+ this.chart.forceFit();
+ }
+
+ /**
+ * 绑定 dom 容器大小变化的事件
+ */
+ private bindSizeSensor() {
+ if (this.unbind) {
+ return;
+ }
+ const { autoFit = true } = this.options;
+ if (autoFit) {
+ this.unbind = bind(this.container, () => {
+ // 获取最新的宽高信息
+ const { clientHeight, clientWidth } = this.container;
+ const { width, height } = this.chart.options();
+ // 主要是防止绑定的时候触发 resize 回调
+ if (clientHeight !== width || clientWidth !== height) {
+ this.triggerResize();
+ }
+ });
+ }
+ }
+
+ /**
+ * 取消绑定
+ */
+ private unbindSizeSensor() {
+ if (this.unbind) {
+ this.unbind();
+ this.unbind = undefined;
+ }
+ }
+}
diff --git a/packages/plots/src/g2-core/index.ts b/packages/plots/src/g2-core/index.ts
new file mode 100644
index 000000000..cbc2c82ff
--- /dev/null
+++ b/packages/plots/src/g2-core/index.ts
@@ -0,0 +1,11 @@
+export * as G2 from '@antv/g2';
+
+export * from './types';
+
+import { Line } from './plots/line';
+import { Column } from './plots/column';
+
+export type { LineOptions } from './plots/line';
+export type { ColumnOptions } from './plots/column';
+
+export const Plots = { Line, Column };
diff --git a/packages/plots/src/g2-core/module.d.ts b/packages/plots/src/g2-core/module.d.ts
new file mode 100644
index 000000000..29ba14892
--- /dev/null
+++ b/packages/plots/src/g2-core/module.d.ts
@@ -0,0 +1 @@
+declare module 'size-sensor';
diff --git a/packages/plots/src/g2-core/plots/column/adaptor.ts b/packages/plots/src/g2-core/plots/column/adaptor.ts
new file mode 100644
index 000000000..28a3427bb
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/column/adaptor.ts
@@ -0,0 +1,21 @@
+import { flow } from '../../utils';
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import type { ColumnOptions } from './type';
+
+type Params = Adaptor;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+ /**
+ * 图表差异化处理
+ */
+ const init = (params: Params) => {
+ return params;
+ };
+
+ return flow(init, mark)(params);
+}
diff --git a/packages/plots/src/g2-core/plots/column/index.ts b/packages/plots/src/g2-core/plots/column/index.ts
new file mode 100644
index 000000000..a86ac6496
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/column/index.ts
@@ -0,0 +1,33 @@
+import { Plot } from '../../core/plot';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { ColumnOptions } from './type';
+
+export type { ColumnOptions };
+
+export class Column extends Plot {
+ /** 图表类型 */
+ public type = 'column';
+
+ /**
+ * 获取 折线图 默认配置项
+ * 供外部使用
+ */
+ static getDefaultOptions(): Partial {
+ return { type: 'interval' };
+ }
+
+ /**
+ * 获取 折线图 默认配置
+ */
+ protected getDefaultOptions() {
+ return Column.getDefaultOptions();
+ }
+
+ /**
+ * 折线图适配器
+ */
+ protected getSchemaAdaptor(): (params: Adaptor) => void {
+ return adaptor;
+ }
+}
diff --git a/packages/plots/src/g2-core/plots/column/type.ts b/packages/plots/src/g2-core/plots/column/type.ts
new file mode 100644
index 000000000..b24fc0627
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/column/type.ts
@@ -0,0 +1,3 @@
+import type { Options } from '../../types/common';
+
+export type ColumnOptions = Options;
diff --git a/packages/plots/src/g2-core/plots/line/adaptor.ts b/packages/plots/src/g2-core/plots/line/adaptor.ts
new file mode 100644
index 000000000..1dfed8bc8
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/line/adaptor.ts
@@ -0,0 +1,21 @@
+import { flow } from '../../utils';
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import type { LineOptions } from './type';
+
+type Params = Adaptor;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+ /**
+ * 图表差异化处理
+ */
+ const init = (params: Params) => {
+ return params;
+ };
+
+ return flow(init, mark)(params);
+}
diff --git a/packages/plots/src/g2-core/plots/line/index.ts b/packages/plots/src/g2-core/plots/line/index.ts
new file mode 100644
index 000000000..8a65b1fd8
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/line/index.ts
@@ -0,0 +1,33 @@
+import { Plot } from '../../core/plot';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { LineOptions } from './type';
+
+export type { LineOptions };
+
+export class Line extends Plot {
+ /** 图表类型 */
+ public type = 'line';
+
+ /**
+ * 获取 折线图 默认配置项
+ * 供外部使用
+ */
+ static getDefaultOptions(): Partial {
+ return { type: 'line' };
+ }
+
+ /**
+ * 获取 折线图 默认配置
+ */
+ protected getDefaultOptions() {
+ return Line.getDefaultOptions();
+ }
+
+ /**
+ * 折线图适配器
+ */
+ protected getSchemaAdaptor(): (params: Adaptor) => void {
+ return adaptor;
+ }
+}
diff --git a/packages/plots/src/g2-core/plots/line/type.ts b/packages/plots/src/g2-core/plots/line/type.ts
new file mode 100644
index 000000000..b73f2121a
--- /dev/null
+++ b/packages/plots/src/g2-core/plots/line/type.ts
@@ -0,0 +1,3 @@
+import type { Options } from '../../types/common';
+
+export type LineOptions = Options;
diff --git a/packages/plots/src/g2-core/types/common.ts b/packages/plots/src/g2-core/types/common.ts
new file mode 100644
index 000000000..02aed368c
--- /dev/null
+++ b/packages/plots/src/g2-core/types/common.ts
@@ -0,0 +1,10 @@
+import type { Chart, G2Spec } from '@antv/g2';
+
+export type Options = G2Spec & {
+ [key: string]: any;
+};
+
+export type Adaptor = {
+ chart: Chart;
+ options: P;
+};
diff --git a/packages/plots/src/g2-core/types/index.ts b/packages/plots/src/g2-core/types/index.ts
new file mode 100644
index 000000000..e251acdfe
--- /dev/null
+++ b/packages/plots/src/g2-core/types/index.ts
@@ -0,0 +1,3 @@
+export type { G2Spec } from '@antv/g2';
+
+export * from './common';
diff --git a/packages/plots/src/g2-core/utils/index.ts b/packages/plots/src/g2-core/utils/index.ts
new file mode 100644
index 000000000..d431bd922
--- /dev/null
+++ b/packages/plots/src/g2-core/utils/index.ts
@@ -0,0 +1,2 @@
+export { omit, pick, isArray, flatten, flow, merge } from 'lodash-es';
+export { isCompositePlot } from './is-composite-plot';
diff --git a/packages/plots/src/g2-core/utils/is-composite-plot.ts b/packages/plots/src/g2-core/utils/is-composite-plot.ts
new file mode 100644
index 000000000..2b3af88d8
--- /dev/null
+++ b/packages/plots/src/g2-core/utils/is-composite-plot.ts
@@ -0,0 +1,6 @@
+import { Options } from '../types';
+
+/**
+ * 是否是复合图表
+ */
+export const isCompositePlot = (options: Options) => options.children?.length > 0;
diff --git a/packages/plots/src/hooks/useChart.ts b/packages/plots/src/hooks/useChart.ts
index 94a8536d3..172c9dbd4 100644
--- a/packages/plots/src/hooks/useChart.ts
+++ b/packages/plots/src/hooks/useChart.ts
@@ -1,6 +1,5 @@
import React, { useRef, useEffect } from 'react';
-import { isEqual, get } from '@antv/util';
-import { G2 } from '@antv/g2plot';
+import { isEqual, get } from 'lodash-es';
import createNode from '../utils/createNode';
import { hasPath, isType, deepClone, clone, setPath, uuid } from '../utils';
import { CommonConfig, Chart } from '../interface';
diff --git a/packages/plots/src/index.ts b/packages/plots/src/index.ts
index ebf4bc09f..70d1725c9 100644
--- a/packages/plots/src/index.ts
+++ b/packages/plots/src/index.ts
@@ -1,9 +1,5 @@
-import Column from './components/column';
-import { G2 } from '@antv/g2plot';
+export * as G2 from '@antv/g2';
-export {
- Column,
- G2,
-};
+export * from './components';
export * from './interface';
diff --git a/packages/plots/src/interface.ts b/packages/plots/src/interface.ts
index 8f028403f..f855b695c 100644
--- a/packages/plots/src/interface.ts
+++ b/packages/plots/src/interface.ts
@@ -1,4 +1,4 @@
-import { Options, G2, G2Spec } from '@antv/g2plot';
+import { Options, G2Spec } from './g2-core';
/**
* @title 图表浮窗配置
@@ -110,4 +110,4 @@ export type CommonConfig = Common & TransformType;
export * from './components/interface';
-export { Options, G2 };
+export { Options };
diff --git a/scripts/ast/md-parse-l7plot.mjs b/scripts/ast/md-parse-l7plot.mjs
deleted file mode 100644
index 5c4cb035c..000000000
--- a/scripts/ast/md-parse-l7plot.mjs
+++ /dev/null
@@ -1,73 +0,0 @@
-import { resolve, dirname } from 'path';
-import { readSync } from 'to-vfile';
-import { fileURLToPath } from 'url';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkFrontmatter from 'remark-frontmatter';
-import remarkStringify from 'remark-stringify';
-import parseFile from './parse.js';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const setCode = (fileInfo) => {
- const { chartName, plotName, utilName, dataSet, code } = fileInfo;
- return `import React, { useState, useEffect }from 'react';
- import ReactDOM from 'react-dom';
- import {${plotName}} from '@ant-design/maps';
- ${utilName ? `import { ${utilName} } from '@antv/util';` : ''}
- ${dataSet ? `import { ${dataSet} } from '@antv/data-set';` : ''}
-
- const Demo${chartName} = () => {
- ${code.toString()}
- return <<%= chartName %> {...config} />;
- };
-
- ReactDOM.render(, document.getElementById('container'));`;
-};
-
-const mdParse = () => {
- return function transformer(tree) {
- recursionTree(tree);
- };
- function recursionTree(tree) {
- // 删除顶部导航
- if (tree.type === 'html') {
- tree.value = tree.value.replace(//g, (_) => {
- return _.replace(/\.ts/, '.js');
- });
- }
-
- // 示例代码转为 React 语法
- if (tree.type === 'code' && tree.value.indexOf('new ') !== -1) {
- const fileInfo = parseFile(tree.value, 'code');
- const { chartName, hasError } = fileInfo;
- if (chartName && !hasError) {
- tree.value = setCode(fileInfo);
- } else {
- tree.value = '';
- }
- }
-
- // 解析套娃路径
- if (tree.type === 'inlineCode' && tree.value.indexOf('markdown:') !== -1) {
- const filePath = tree.value.split(':')[1];
- const docsPath = resolve(__dirname, '../../../L7Plot/website', filePath);
- const res = unified()
- .use(remarkParse)
- .use(remarkStringify)
- .use(mdParse, { extname: '.md' })
- .use(remarkFrontmatter, ['yaml', 'toml'])
- .processSync(readSync(docsPath));
- tree.type = 'html';
- tree.value = res.toString();
- }
-
- if (tree.children && tree.children.length) {
- tree.children.forEach((children) => {
- recursionTree(children);
- });
- }
- }
-};
-
-export default mdParse;
diff --git a/scripts/ast/md-parse.mjs b/scripts/ast/md-parse.mjs
deleted file mode 100644
index d35b8fc7e..000000000
--- a/scripts/ast/md-parse.mjs
+++ /dev/null
@@ -1,73 +0,0 @@
-import { resolve, dirname } from 'path';
-import { readSync } from 'to-vfile';
-import { fileURLToPath } from 'url';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkFrontmatter from 'remark-frontmatter';
-import remarkStringify from 'remark-stringify';
-import parseFile from './parse.js';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const setCode = (fileInfo) => {
- const { chartName, plotName, utilName, dataSet, code } = fileInfo;
- return `import React, { useState, useEffect }from 'react';
- import ReactDOM from 'react-dom';
- import {${plotName}} from '@ant-design/charts';
- ${utilName ? `import { ${utilName} } from '@antv/util';` : ''}
- ${dataSet ? `import { ${dataSet} } from '@antv/data-set';` : ''}
-
- const Demo${chartName} = () => {
- ${code.toString()}
- return <<%= chartName %> {...config} />;
- };
-
- ReactDOM.render(, document.getElementById('container'));`;
-};
-
-const mdParse = () => {
- return function transformer(tree) {
- recursionTree(tree);
- };
- function recursionTree(tree) {
- // 删除顶部导航
- if (tree.type === 'html') {
- tree.value = tree.value.replace(//g, (_) => {
- return _.replace(/\.ts/, '.js');
- });
- }
-
- // 示例代码转为 React 语法
- if (tree.type === 'code' && tree.value.indexOf('new ') !== -1) {
- const fileInfo = parseFile(tree.value, 'code');
- const { chartName, hasError } = fileInfo;
- if (chartName && !hasError) {
- tree.value = setCode(fileInfo);
- } else {
- tree.value = '';
- }
- }
-
- // 解析套娃路径
- if (tree.type === 'inlineCode' && tree.value.indexOf('markdown:') !== -1) {
- const filePath = tree.value.split(':')[1];
- const docsPath = resolve(__dirname, '../../../G2Plot', filePath);
- const res = unified()
- .use(remarkParse)
- .use(remarkStringify)
- .use(mdParse, { extname: '.md' })
- .use(remarkFrontmatter, ['yaml', 'toml'])
- .processSync(readSync(docsPath));
- tree.type = 'html';
- tree.value = res.toString();
- }
-
- if (tree.children && tree.children.length) {
- tree.children.forEach((children) => {
- recursionTree(children);
- });
- }
- }
-};
-
-export default mdParse;
diff --git a/scripts/ast/parse.js b/scripts/ast/parse.js
deleted file mode 100644
index 90bdef642..000000000
--- a/scripts/ast/parse.js
+++ /dev/null
@@ -1,252 +0,0 @@
-const fs = require('fs');
-const babel = require('@babel/core');
-const chalk = require('chalk');
-const types = require('babel-types');
-const { get, find } = require('lodash');
-const log = console.log;
-
-let fetchUrl = '';
-let chartName = ''; // 组件名称
-let plotName = ''; // 插件名称
-let utilName = ''; // util 名称
-let dataKey = ''; // 存放 data 的变量
-let dataSet = ''; // dataset
-let isGeojson = false; // 是否 geojson
-
-/**
- * render
- * @param {*} node
- */
-const isRender = (node) => {
- return node.type === 'CallExpression' && get(node, 'callee.property.name') === 'render';
-};
-
-/**
- * nullExpression
- * @param {*} node
- */
-const isNullExpression = (node) => {
- return node.type === 'ExpressionStatement' && !node.expression;
-};
-
-/**
- * isFetch
- * @param {*} node
- */
-const isFetch = (node) => {
- return node.type === 'MemberExpression' && get(node, 'object.callee.name') === 'fetch';
-};
-
-/**
- * isFetchExpression
- * @param {*} node
- */
-const isFetchExpression = (node) => {
- return node.type === 'CallExpression' && get(node, 'callee.object.callee.object.callee.name') === 'fetch';
-};
-
-/**
- * new表达式
- * @param {*} node
- */
-const isNewExpression = (node) => {
- return (
- (node.type === 'VariableDeclarator' && get(node, 'init.type') === 'NewExpression') || node.type === 'NewExpression'
- );
-};
-
-// 状态重置
-const reset = () => {
- fetchUrl = '';
- chartName = '';
- plotName = '';
- dataKey = '';
- utilName = '';
- dataSet = '';
- isGeojson = false;
-};
-
-const excludeFunctionNames = ['formatter'];
-
-const initCode = (code) => {
- let key = dataKey;
- let isPattern = false;
- if (dataKey.endsWith('-Pattern')) {
- key = key.replace('-Pattern', '');
- isPattern = true;
- }
- const reg = new RegExp(/\.csv|\.txt/);
- const useText = fetchUrl.match(reg);
- return `
- const [${key}, setData] = useState(${isGeojson ? `{ type: 'FeatureCollection', features: [] }` : `[]`});
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch("${fetchUrl}")
- .then((response) => ${!useText ? 'response.json()' : 'response.text()'})
- .then((${isPattern ? `{${key}}` : 'json'}) => setData(${isPattern ? key : 'json'}))
- .catch((error) => {
- console.log("fetch data failed", error);
- });
- };
- ${
- useText &&
- `if (!data.length) {
- return null;
- }`
- }
- ${code}
- `;
-};
-
-const setImport = (path) => {
- const { node } = path;
- if (['@antv/g2plot', '@antv/l7plot'].includes(node.source.value)) {
- node.specifiers?.forEach((item) => {
- plotName += plotName ? ', ' : '';
- plotName += item.imported.name;
- });
- }
- if (node.source.value === '@antv/util') {
- node.specifiers?.forEach((item) => {
- utilName += utilName ? ', ' : '';
- utilName += item.imported.name;
- });
- }
- if (node.source.value === '@antv/data-set') {
- node.specifiers?.forEach((item) => {
- dataSet += dataSet ? ', ' : '';
- dataSet += item.imported.name;
- });
- }
-};
-
-const parseFile = (params, type) => {
- try {
- reset();
- let jsCode = '';
- if (type === 'code') {
- jsCode = params;
- } else {
- jsCode = fs.readFileSync(params, 'utf-8');
-
- if (params.indexOf('.ts') !== -1) {
- // 提取关键信息，正常情况应该全部使用 babel ，由于时间原因，暂不考虑全量修改
- const visitorExpressions = {
- // import 信息
- ImportDeclaration(path) {
- setImport(path);
- path.remove();
- },
- ExportNamedDeclaration(path) {
- const { node } = path;
- path.replaceWith(node.declaration);
- },
- // 获取 fetch 地址
- MemberExpression(path) {
- const { node } = path;
- if (isFetch(node)) {
- fetchUrl = node.object.arguments[0].value || get(node, 'object.arguments.0.quasis.0.value.raw');
- }
- },
- /** 提取 type 类型， 设置默认值 */
- Literal(path) {
- const { node } = path;
- if (get(node, 'value') === 'geojson') {
- isGeojson = true;
- }
- },
- // 抽取 config
- VariableDeclarator(path) {
- const { node } = path;
- if (isNewExpression(node)) {
- if (get(node, 'init.callee.type') === 'Identifier' && get(node, 'init.callee.name') !== 'DataView') {
- chartName = get(node, 'init.callee.name');
- node.id.name = 'config';
- node.init = node.init.arguments[1];
- path.replaceWith(node);
- }
- }
- },
- // 提取 data 变量
- 'FunctionExpression|ArrowFunctionExpression'(path) {
- const { node } = path;
- if (
- ['data', 'fetchData', 'csv', 'response', 'list'].includes(get(node, ['params', 0, 'name'])) &&
- get(node, ['body', 'type']) === 'BlockStatement' &&
- !excludeFunctionNames.includes(get(node, ['id', 'name']))
- ) {
- dataKey = get(node, ['params', 0, 'name']);
- } else if (
- get(node, ['params', 0, 'type']) === 'ObjectPattern' &&
- ['list', 'data'].includes(get(node, ['params', 0, 'properties', 0, 'key', 'name']))
- ) {
- // list 解构
- dataKey = `${get(node, ['params', 0, 'properties', 0, 'key', 'name'])}-Pattern`;
- }
- },
- // 删除空值
- ExpressionStatement(path) {
- const { node } = path;
- if (isNullExpression(node)) {
- path.remove();
- }
- /** l7plot new 表达式 */
- if (
- get(node, 'expression.type') === 'NewExpression' &&
- get(node, 'expression.arguments.0.value') === 'container'
- ) {
- const name = get(node, 'expression.callee.name');
- chartName = name === 'Heatmap' ? 'HeatMap' : `${name}Map`;
- const func = types.variableDeclaration('const', [
- types.variableDeclarator(types.identifier('config'), get(node, 'expression.arguments.1')),
- ]);
- path.replaceWith(func);
- }
- },
- CallExpression(path) {
- const { node } = path;
- // remove render
- if (isRender(node)) {
- path.remove();
- }
- // recursive
- path.traverse(visitorExpressions);
- if (isFetchExpression(node)) {
- path.replaceWithMultiple(node.arguments[0].body.body);
- }
- },
- };
- const vistorPlugins = {
- visitor: visitorExpressions,
- };
- const { code } = babel.transform(fs.readFileSync(params, 'utf-8'), {
- plugins: [vistorPlugins],
- });
- // fs.writeFileSync('./temp.js', initCode(code));
- jsCode = fetchUrl ? initCode(code) : code;
- }
- }
- return {
- code: chartName && jsCode,
- chartName,
- plotName,
- utilName,
- dataSet,
- hasError: false,
- errPath: '',
- };
- } catch (err) {
- log(chalk.red(`解析出错：params: ${params}; type: ${type}`));
- log(chalk.red(`出错信息：${err}`));
- return {
- hasError: true,
- errPath: params,
- };
- }
-};
-
-module.exports = parseFile;
diff --git a/scripts/docs/l7plot.mjs b/scripts/docs/l7plot.mjs
deleted file mode 100644
index 781615c62..000000000
--- a/scripts/docs/l7plot.mjs
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * 一键同步 L7Plot API 文档
- * eg:
- * -全量同步：`node scripts/docs/l7plot.mjs`
- *
- * 该文件下引用的包和主包会有冲突，使用时在强制安装
- * ```zx
- * npm install unified to-vfile remark-parse remark-frontmatter remark-stringify --force
- * ```
- */
-import { dirname, resolve, join } from 'path';
-import { fileURLToPath } from 'url';
-import fs from 'node:fs/promises';
-import { readSync } from 'to-vfile';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkFrontmatter from 'remark-frontmatter';
-import remarkStringify from 'remark-stringify';
-import mdParse from '../ast/md-parse-l7plot.mjs';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const apiWriteBasePath = '../../packages/site/docs';
-const arg = process.argv.splice(2);
-const docsPath = arg[1] || 'website/docs';
-const plot = arg[0] || 'L7Plot';
-const fp = resolve('../', `${plot}/${docsPath}`);
-
-const excludePath = ['manual'];
-
-// 文件路径是否存在，不存在时直接创建
-const checkDirExist = async (folderpath) => {
- const pathArr = folderpath.split('/');
- if (!pathArr.includes('site')) {
- return;
- }
- let _path = '';
- for (let i = 0; i < pathArr.length; i++) {
- if (pathArr[i]) {
- _path += `/${pathArr[i]}`;
- if (_path.indexOf('site/docs/map-') === -1) {
- continue;
- }
- try {
- // fsPromise 不再支持 exists，没想到好方法
- await fs.mkdir(_path);
- } catch (err) {
- // await fs.mkdir(_path);
- }
- }
- }
-};
-
-const hasSameEl = (source, target) => {
- return new Set(source.concat(target)).size !== source.length + target.length;
-};
-
-const apiGenerator = async (apiPath, filename) => {
- // 文件路径，上层自动扫描
- const res = unified()
- .use(remarkParse)
- .use(remarkStringify)
- .use(mdParse, { extname: '.md' })
- .use(remarkFrontmatter, ['yaml', 'toml'])
- .processSync(readSync(apiPath));
- let writePath = join(__dirname, apiWriteBasePath, apiPath.split(docsPath)[1]);
- // 统一加上 map 前缀
- writePath = writePath.replace(/docs\//, 'docs/map-');
- await checkDirExist(writePath.split(filename)[0]);
- await fs.writeFile(
- writePath,
- res
- .toString()
- .replace(/docs\//g, 'docs/map-')
- .replace(/@antv\/l7plot/g, '@ant-design/charts'),
- );
-};
-
-/**
- * 文件扫描，获取所有 *.md 文件路径
- * @param {foldPath} string 扫描路径
- */
-const scanL7PlotFiles = async (foldPath, dir) => {
- console.log('文档生成中....');
- try {
- const files = await fs.readdir(foldPath);
- files.forEach(async (filename) => {
- const director = join(foldPath + '/', filename);
- const stats = await fs.stat(director);
- if (stats.isDirectory()) {
- scanL7PlotFiles(director, dir ? `${dir}.${filename}` : filename);
- }
- if (stats.isFile() && filename.endsWith('.md') && !hasSameEl(excludePath, dir.split('.').concat(filename))) {
- const apiPath = resolve(__dirname, `../../../${plot}/${docsPath}`, dir.split('.').join('/'), filename);
- apiGenerator(apiPath, filename);
- }
- });
- } catch (err) {
- console.log(err);
- }
-};
-
-scanL7PlotFiles(fp);
diff --git a/scripts/examples/l7plot.js b/scripts/examples/l7plot.js
deleted file mode 100644
index 3f11b4b96..000000000
--- a/scripts/examples/l7plot.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * 扫描 L7Plot 所有 demo 文件，生成 demo
- * eg:
- * - `node scripts/examples/l7plot.js`
- */
-const fs = require('fs');
-const path = require('path');
-const ejs = require('ejs');
-const chalk = require('chalk');
-const { checkDirExist, removeDir } = require('../util');
-const parseFile = require('../ast/parse');
-const demoWriteBasePath = '../../packages/site/examples';
-const templateDemoPath = path.join(__dirname, '../../template/doc/demo.ejs');
-const arg = process.argv.splice(2);
-const demoPath = 'website/examples';
-const plot = arg[0] || 'L7Plot';
-const fp = path.resolve('../', `${plot}/${demoPath}`);
-
-const examples = [];
-// 特殊路径不处理
-const excludePath = ['administrative-switch.tsx', 'component', 'gallery', 'line'];
-
-const hasSameEl = (source, target) => {
- return new Set(source.concat(target)).size !== source.length + target.length;
-};
-
-const checkDir = (filePath, filename) => {
- let writePath = path.join(__dirname, demoWriteBasePath, filePath.split(demoPath)[1]);
- // 统一加上 map 前缀, 避免和 G2Plot 组件名冲突
- writePath = writePath
- .replace(/examples\//, 'examples/map-')
- .replace(/scatter\//, 'map-scatter/')
- .replace(/bubble\//, 'map-bubble/');
- checkDirExist(writePath.split(filename)[0]);
- return writePath;
-};
-
-// md
-const apiGenerator = (filePath, filename) => {
- const writePath = checkDir(filePath, filename);
- // example 目录下不会有示例代码，不需要解析
- let content = fs.readFileSync(filePath, {
- encoding: 'utf-8',
- });
-
- if (content) {
- content = content
- .replace(/markdown:docs\//g, 'markdown:docs/map-')
- .replace(/散点图/g, '地图散点图')
- .replace(/气泡图/g, '地图气泡图')
- .replace(/Scatter/g, 'Scatter Map')
- .replace(/Bubble/g, 'Bubble Map');
- }
- fs.writeFileSync(writePath, content);
-};
-
-// 非 ts | js 直接 copy
-const copyGenerator = (filePath, filename) => {
- const writePath = checkDir(filePath, filename);
- let content = fs.readFileSync(filePath, {
- encoding: 'utf-8',
- });
- if (filename === 'meta.json') {
- content = content.replace(/\.ts/g, '.js');
- }
- fs.writeFileSync(writePath, content);
-};
-
-// ts | js
-const demoGenerator = (filePath, filename) => {
- const chartContent = parseFile(filePath);
- const { chartName, plotName, utilName, dataSet, code, errPath } = chartContent;
- if (!errPath) {
- // 生成文件
- ejs.renderFile(
- templateDemoPath,
- {
- plotName: chartName, // 没有多余依赖，先使用 chartName
- utilName,
- chartName,
- dataSet,
- chartContent: code,
- lib: 'maps',
- }, // 渲染的数据key: 对应到了ejs中的index
- (err, data) => {
- if (err) {
- console.log(chalk.red(`模版文件读取失败： ${err}`));
- return;
- }
- const writePath = checkDir(filePath, filename);
- // 生成文件内容
- fs.writeFileSync(writePath.replace(/\.ts/, '.js'), data.replace(/\s+null\s+/g, '\n'));
- },
- );
- }
-};
-
-/**
- * 文件扫描，获取所有 *.md 文件路径
- * @param {foldPath} string 扫描路径
- */
-const scanDir = (foldPath, dir) => {
- try {
- const files = fs.readdirSync(foldPath);
- files.forEach((filename) => {
- const director = path.join(foldPath + '/', filename);
- const stats = fs.statSync(director);
- if (stats.isDirectory()) {
- scanDir(director, dir ? `${dir}.${filename}` : filename);
- }
- if (stats.isFile()) {
- const filePath = path.resolve(__dirname, `../../../${plot}/${demoPath}`, dir.split('.').join('/'), filename);
- if (!hasSameEl(excludePath, dir.split('.').concat(filename))) {
- examples.push({
- filePath,
- filename,
- });
- }
- }
- });
- } catch (err) {
- console.info(chalk.red(err));
- }
-};
-
-const writeFiles = () => {
- console.info(chalk.green('示例生成中....'));
- examples.forEach((item) => {
- const { filePath, filename } = item;
- if (filename.endsWith('.md')) {
- apiGenerator(filePath, filename);
- } else if (filename.endsWith('.ts') || filename.endsWith('.js')) {
- demoGenerator(filePath, filename);
- } else {
- copyGenerator(filePath, filename);
- }
- });
-};
-
-const cleanPath = () => {
- const paths = [];
- const getMapsPath = (foldPath) => {
- try {
- const files = fs.readdirSync(foldPath);
- files.forEach((dir) => {
- if (dir.startsWith('map-')) paths.push(path.join(__dirname, demoWriteBasePath, dir));
- });
- } catch (err) {
- console.info(chalk.red(err));
- }
- };
- getMapsPath(path.join(__dirname, demoWriteBasePath));
- paths.forEach((dir) => {
- removeDir(dir);
- });
-};
-
-scanDir(fp);
-cleanPath();
-writeFiles();
diff --git a/scripts/website/build-website.sh b/scripts/website/build-website.sh
index 9f47beefb..a7feb3938 100644
--- a/scripts/website/build-website.sh
+++ b/scripts/website/build-website.sh
@@ -26,13 +26,11 @@ echo "\033[49;32m \n******* removing node_modules *******\n \033[0m"
echo "auto-install-peers=false \nstrict-peer-dependencies=false\nshamefully-hoist=true" >> .npmrc
-rm -rf ./package.json
rm -rf ./pnpm-lock.yaml
rm -rf ./node_modules
-cp ./scripts/website/package.json ./
echo "\033[49;32m \n******* installing website dependencies *******\n \033[0m"
diff --git a/scripts/website/package.json b/scripts/website/package.json
deleted file mode 100644
index 3c9becde5..000000000
--- a/scripts/website/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
- "name": "charts",
- "private": true,
- "scripts": {
- "start:site": "pnpm -r --stream --filter=./packages/site run start",
- "build:site": "pnpm -r --stream --filter=./packages/site run build"
- },
- "devDependencies": {
- "@antv/data-set": "^0.11.8",
- "@babel/core": "^7.11.6",
- "@babel/polyfill": "^7.12.1",
- "@babel/preset-env": "^7.13.9",
- "@babel/preset-typescript": "^7.10.4",
- "@testing-library/jest-dom": "^5.5.0",
- "@types/enzyme": "^3.10.5",
- "@types/node": "^14.0.10",
- "@umijs/fabric": "^2.0.7",
- "babel-plugin-named-asset-import": "^0.3.7",
- "babel-preset-react-app": "^10.0.0",
- "babel-types": "^6.26.0",
- "chalk": "^4.1.0",
- "ejs": "^3.0.2",
- "enzyme": "^3.11.0",
- "enzyme-to-json": "^3.4.4",
- "eslint": "^7.32.0",
- "jest-canvas-mock": "^2.2.0",
- "less": "^4.1.2",
- "lodash": "^4.17.20",
- "np": "*",
- "npm-run-all": "^4.1.5",
- "prettier": "^2.0.2",
- "pretty-quick": "^3.0.1",
- "react-test-renderer": "^17.0.1",
- "rimraf": "^3.0.2",
- "typescript": "^4.0.3",
- "vfile-reporter": "^7.0.2",
- "whatwg-fetch": "^3.0.0",
- "yorkie": "^2.0.0",
- "react": "^16.14.0",
- "react-dom": "^16.14.0"
- },
- "pnpm": {
- "overrides": {
- "@typescript-eslint/eslint-plugin": "^4.1.1",
- "@typescript-eslint/parser": "^4.1.1",
- "monaco-editor": "0.21.3",
- "react-i18next": "~11.7.0"
- }
- },
- "gitHooks": {
- "pre-commit": "pretty-quick --staged"
- },
- "sideEffects": false,
- "license": "MIT",
- "dependencies": {
- "less-plugin-npm-import": "^2.1.0"
- }
-}
diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts
index dfadb3e2e..add89791d 100644
--- a/site/.dumi/global.ts
+++ b/site/.dumi/global.ts
@@ -1,13 +1,8 @@
if (window) {
(window as any).insertCss = require('insert-css');
- (window as any).dataSet = require('@antv/data-set');
(window as any).antd = require('antd');
- (window as any).util = require('@antv/util');
(window as any).react = require('react');
(window as any).reactDom = require('react-dom');
/** 不要使用 link, react-dom 冲突 */
(window as any).plots = require('@ant-design/plots');
- (window as any).flowchart = require('@ant-design/flowchart');
- (window as any).maps = require('@ant-design/maps');
- (window as any).graphs = require('@ant-design/graphs');
}
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index 95845f059..13b8fdebe 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -57,14 +57,6 @@ export default defineConfig({
},
order: 1,
},
- {
- slug: 'docs/map-api',
- title: {
- zh: 'API-地图',
- en: 'API-Map',
- },
- order: 0,
- },
],
docs: [
{
@@ -75,56 +67,8 @@ export default defineConfig({
},
order: 1,
},
- {
- slug: 'api/common-graph',
- title: {
- zh: '通用配置-关系图',
- en: 'Common Configuration Relation Graph',
- },
- order: 2,
- },
- {
- slug: 'map-api/plots',
- title: {
- zh: '基础图表 - Plots',
- en: 'Plots',
- },
- order: 2,
- },
- {
- slug: 'map-api/components',
- title: {
- zh: '组件 - Components',
- en: 'Components',
- },
- order: 3,
- },
- {
- slug: 'map-api/layers',
- title: {
- zh: '图层 - Layers',
- en: 'Layers',
- },
- order: 5,
- },
],
examples: [
- {
- slug: 'flowchart',
- icon: 'sankey',
- title: {
- zh: '流程图',
- en: 'Flowchart',
- },
- },
- {
- slug: 'relation-graph',
- icon: 'sankey',
- title: {
- zh: '关系图',
- en: 'Relation Graph',
- },
- },
{
slug: 'column',
icon: 'column',
@@ -134,43 +78,11 @@ export default defineConfig({
},
},
{
- slug: 'map-area',
- icon: 'polygon',
- title: {
- zh: '区域地图',
- en: 'Area Map',
- },
- },
- {
- slug: 'map-choropleth',
- icon: 'polygon',
- title: {
- zh: '行政区域地图',
- en: 'Choropleth Map',
- },
- },
- {
- slug: 'map-dot',
- icon: 'point',
- title: {
- zh: '散点地图',
- en: 'Dot Map',
- },
- },
- {
- slug: 'map-heat',
- icon: 'heatmap',
- title: {
- zh: '热力地图',
- en: 'Heat Map',
- },
- },
- {
- slug: 'map-advanced-plot',
- icon: 'other',
+ slug: 'line',
+ icon: 'line',
title: {
- zh: '多图层',
- en: 'Advanced Map',
+ zh: '折线图',
+ en: 'Line',
},
},
],
diff --git a/site/docs/api/common-graph/common-graph.en.md b/site/docs/api/common-graph/common-graph.en.md
deleted file mode 100644
index eb12325ec..000000000
--- a/site/docs/api/common-graph/common-graph.en.md
+++ /dev/null
@@ -1,637 +0,0 @@
----
-title: Configuration
-order: 3
----
-
-## Basic configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type. Built-in nodes include `icon-node ,card，circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut`,
-
-##### size
-
-**optional** _Number[]_
-
-The (minimum) size of the node, some graphs may adapt the size according to the node content, default value [120, 40].
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a Shape are shown below, the range of each x and y is [0, 1]:
-
-##### padding
-
-**optional** _number | number[]_
-
-Item content padding .
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### customContent
-
-**optional** _Function_
-
-Custom items, returns the maximum height of a custom items.
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // Unique field within group
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker configuration, support callback.
-
-```ts
-interface MarkerCfg {
- show?: boolean;
- collapsed?: boolean;
- position?: 'left' | 'right' | 'top' | 'bottom';
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-### customLayout
-
-**optional** _Boolean_
-
-Whether to turn on custom layout, layout is invalid and x、y in data is used for data layout when enabled.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### fitCenter
-
-**optional** _Boolean_
-
-Whether to translate the graph to align its center with the canvas. Its priority is lower than fitView, Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _object_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| container | Object | false | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined |
-| className | String | false | The className of the DOM element of the Minimap |
-| viewportClassName | String | false | The className of the DOM element of the view port on the Minimap |
-| type | String | false | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default |
-| size | Array | false | The size of the Minimap |
-| delegateStyle | Object | false | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |
-
-The `delegateStyle` has the properties:
-
-| Name | Type | Required | Description |
-| ----------- | ------ | -------- | ----------------------- |
-| fill | String | false | Filling color |
-| stroke | String | false | Stroke color |
-| lineWidth | Number | false | The width of the stroke |
-| opacity | Number | false | Opacity |
-| fillOpacity | Number | false | Filling opacity |
-
-#### toolbarCfg
-
-**optional** _object_
-
-Toolbar configruation.
-
-```ts
-interface ToolbarCfg {
- /** toolbar classname */
- className?: string;
- /** container style */
- style?: React.CSSProperties;
- /** Whether to show */
- show?: boolean;
- /** zoom factor */
- zoomFactor?: number;
- /** custom icon */
- customContent?: ({
- zoomIn,
- zoomOut,
- toggleFullscreen,
- fullscreen,
- }: {
- zoomIn: () => void;
- zoomOut: () => void;
- toggleFullscreen: () => void;
- fullscreen: boolean;
- }) => React.ReactElement;
-}
-```
-
-#### tooltipCfg
-
-**optional** _object_
-
-Tooltip configuration.
-
-```ts
-interface ToolbarCfg {
- /** toolbar classname */
- className?: string;
- /** container style */
- style?: React.CSSProperties;
- /** whether to show */
- show?: boolean;
- /** custom content */
- customContent: (item?: NodeConfig) => React.ReactElement;
-}
-```
-#### menuCgf
-
-**optional** _object_
-
-MenuCfg configuration.
-
-```ts
-interface MenuCfg {
- container?: HTMLDivElement | string | null;
- className?: string;
- handleMenuClick?: (target: HTMLElement, item: Item) => void;
- customContent?: (evt?: IG6GraphEvent) => React.ReactNode;
- // offsetX 与 offsetY 需要加上父容器的 padding
- offsetX?: number;
- offsetY?: number;
- shouldBegin?: (evt?: IG6GraphEvent) => boolean;
- // 允许出现 tooltip 的 item 类型
- itemTypes?: string[];
- trigger?: 'click' | 'contextmenu';
-}
-```
-## Functions
-
-#### graph.downloadFullImage(name, type, imageConfig)
-
-Export the whole graph as an image, whatever (a part of) the graph is out of the screen.
-
-**Parameters**
-
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| name | String | false | The name of the image. 'graph' by default. |
-| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | The type of the image. When the `renderer` of the graph is `'canvas'`(default), `type` takes effect. When the `renderer` is `'svg'`, `toFullDataURL` will export a svg file |
-| imageConfig | Object | false | The configuration for the exported image, detials are shown below |
-
-where the `imageConfig` is the configuration for exported image:
-
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| backgroundColor | String | false | The background color of the image. If it is not assigned, the background will be transparent. |
-| padding | Number / Number[] | false | The top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same |
-
-**Usage**
-
-```javascript
-{
- onReady: (graph) => {
- graph.downloadFullImage('tree-graph', {
- backgroundColor: '#ddd',
- padding: [30, 15, 15, 15],
- });
- };
-}
-```
-
-#### graph.toFullDataURL(callback, type, backgroundColor)
-
-Generate url of the image of the whole graph including the part out of the view port.
-
-**Parameters**
-
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| callback | Function | true | The callback function after finish generating the dataUrl of the full graph |
-| Asynchronously |
-| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | The type of the image. When the `renderer` of the graph is `'canvas'`(default), `type` takes effect. When the `renderer` is `'svg'`, `toFullDataURL` will export a svg file |
-| imageConfig | Object | false | The configuration for the exported image, detials are shown below |
-
-where the `imageConfig` is the configuration for exported image:
-
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| backgroundColor | String | false | The background color of the image. If it is not assigned, the background will be transparent. |
-| padding | Number / Number[] | false | The top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same |
-
-No return value, you can process the result in the callback function as shown below:
-
-**Usage**
-
-```ts
- onReady: (graph) => {
- graph.toFullDataUrl(
- // The first parameter: callback, required
- (res) => {
- // ... something
- console.log(res); // e.g. print the result
- },
- // The second and third parameter is not required
- 'image/jpeg',
- (imageConfig: {
- backgroundColor: '#fff',
- padding: 10,
- }),
- );
- }
-```
-
-#### graph.zoom(ratio, center)
-
-Zoom Graph.
-
-**Usage**
-
-```ts
-{
- onReady: (graph) => {
- // Zoom 0.5x
- graph.zoom(0.5);
- // Zoom 0.5x and set the center to [100,100]
- graph.zoom(0.5, { x: 100, y: 100 });
- };
-}
-```
-
-## Events
-
-Events are bound to the Graph by 'on' and removed by 'off'. OnReady returns the Graph instance.
-
-```ts
-graph.on(eventName, (evt) => {});
-graph.off(eventName, (evt) => {});
-```
-
-```ts
-{
- onReady: (graph) => {
- graph.on('node:mouseenter', (evt) => {
- const item = evt.item;
- graph.setItemState(item, 'hover', true);
- });
- graph.on('node:mouseleave', (evt) => {
- const item = evt.item;
- graph.setItemState(item, 'hover', false);
- });
- };
-}
-```
-
-Where, the event object `evt` has the properties:
-
-- `type`: The type of the event
-- `name`: The name of the event
-- `x`: The x coordinate on the canvas
-- `y`: The y coordinate on the canvas
-- `clientX`: The x coordinate about the client
-- `clientY`: The y coordinate about the client
-- `canvasX`: The x coordinate about parent DOM of the canvas
-- `canvasY`: The y coordinate about parent DOM of the canvas
-- `item`: The item being manipulated, which can be a node, an edge, or a Combo）
-- `target`: The target Shape on the `item` being manupulated, or the canvas instance
-- `bubbles`: Whether bubbles
-- `defaultPrevented`: Whether prevent the original event
-- `originalEvent`: The original client event object. where the `button` can be used to distinguish the left/middle/right button of the mouse on some events like `click` or `dblclick`
-- `timeStamp`: The time stamp the event triggered
-- `propagationStopped`: Wheher stop the propogation
-- `propagationPath`: The triggering path
-
-`eventName` can be refered to the following parts.
-
-### Common Interaction Event
-
-| Event Name | Description |
-| --- | --- |
-| click | Activated by clicking the **left button** of mouse or Enter button. |
-| dblclick | Activated by double clicking the **left button** of mouse. |
-| mouseenter | Activated when mouse enters an item. **This is not a bubbled event**, which means this event will not be activated when the mouse moves to the descendant items. |
-| mousemove | Activated while the mouse is moving inside an item. It cannot be activated by keyboard. |
-| mouseout | Activated while the mouse moves out of an item. |
-| mouseover | Activated when the mouse moves over an item. |
-| mouseleave | Activated when the mouse leaves an item. **This is not a bubbled event**, which means this event will not be activated when the mouse leaves the descendant items. |
-| mousedown | Activated when the left or right button is clicked down. It cannot be activated by keyboard. |
-| mouseup | Activated when the left or right button is released. It cannot be activated by keyboard. |
-| contextmenu | Open the context menu when user clicks the right button of mouse |
-| dragstart | Activated when user begins to drag. This event is applied on a dragged item. |
-| drag | Activated during the dragging process. This event is applied on a dragged item. |
-| dragend | Activated when user stops dragging. This event is applied on a dragged item. |
-| dragenter | Activated when user drags an item into a target item. This event is applied on a dragged item. |
-| dragleave | Activated when user drags an item out of a target item. This event is applied on the target item. |
-| drop | Activated when user drops an item on a target item. This event is applied on the target item. |
-| keydown | Activated when user presses down a button on keyboard. |
-| keyup | Activated when user releases a button on keyboard. |
-| wheel | Activated when user scroll the wheel. |
-| touchstart | Activated when a finger touches the screen. If there are fingers on the screen already, it will be activated too. |
-| touchmove | Activated during the processes of finger moving on the screen. Call `preventDefault()` to prevent scrolling. |
-| touchend | Activated when a finger leaves the screen. |
-
-### Node Interaction Event
-
-| Event Name | Description |
-| --- | --- |
-| node:click | Activated when user clicks the **left button** of the mouse on the node. |
-| node:dblclick | Activated when user double clicks the **left button** of the mouse on the node. |
-| node:mouseenter | Activated when the mouse enters the node. |
-| node:mousemove | Activated while the mouse is moving inside the node. It cannot be activated by keyboard. |
-| node:mouseout | Activated while the mouse moves out of the node. |
-| node:mouseover | Activated when the mouse moves over the node. |
-| node:mouseleave | Activated when the mouse leaves the node. |
-| node:mousedown | Activated when the left or right button is clicked down on the node. It cannot be activated by keyboard. |
-| node:mouseup | Activated when the left or right button is released on the node. It cannot be activated by keyboard. |
-| node:dragstart | Activated when user begins to drag the node. This event is applied on the dragged node. |
-| node:drag | Activated during the dragging process on the node. This event is applied on the dragged node. |
-| node:dragend | Activated when user stops dragging on the node. This event is applied on the dragged node. |
-| node:dragenter | Activated when user drags an item into a target node item. This event is applied on the target node item. |
-| node:dragleave | Activated when user drags an item out of a target node item. This event is applied on the target node item. |
-| node:dragover | Activated when user drags an item over a target node item. This event is applied on the target node item |
-| node:drop | Activated when user drops an item on a target item. This event is applied on the target item. |
-| node:touchstart | On touch screen, this event is activated when user begin to touch the node |
-| node:touchmove | On touch screen, this event is activated when user is touching the node |
-| node:touchend | On touch screen, this event is activated when user finish touching the node |
-| node:contextmenu | Open the context menu when user clicks the right button of mouse on the node. |
-
-### Edge Interaction Event
-
-| Event Name | Description |
-| --- | --- |
-| edge:click | Activated when user clicks the **left button** of the mouse on the edge. |
-| edge:dblclick | Activated when user double clicks the **left button** of the mouse on the edge. |
-| edge:mouseenter | Activated when the mouse enters the edge. |
-| edge:mousemove | Activated while the mouse is moving inside the edge. It cannot be activated by keyboard. |
-| edge:mouseout | Activated while the mouse moves out of the edge. |
-| edge:mouseover | Activated when the mouse moves over the edge. |
-| edge:mouseleave | Activated when the mouse leaves the edge. |
-| edge:mousedown | Activated when the left or right button is clicked down on the edge. It cannot be activated by keyboard. |
-| edge:mouseup | Activated when the left or right button is released on the edge. It cannot be activated by keyboard. |
-| edge:dragenter | Activated when user drags an item into a target edge item. This event is applied on the target edge item. |
-| edge:dragleave | Activated when user drags an item out of a target edge item. This event is applied on the target edge item. |
-| edge:dragover | Activated when user drags an item over a target edge item. This event is applied on the target edge item |
-| edge:drop | Activated when user drops an item on a target edge item. This event is applied on the target edge item. |
-| edge:contextmenu | Open the context menu when user clicks the right button of mouse on the edge |
-
-## Canvas Interaction Event
-
-| Event Name | Description |
-| --- | --- |
-| canvas:click | Activated when user clicks the **left button** of the mouse on the canvas. |
-| canvas:dblclick | Activated when user double clicks the **left button** of the mouse on the canvas. |
-| canvas:mouseenter | Activated when the mouse enters the canvas. |
-| canvas:mousemove | Activated while the mouse is moving inside the canvas. It cannot be activated by keyboard. |
-| canvas:mouseout | Activated while the mouse moves out of the canvas. |
-| canvas:mouseover | Activated when the mouse moves over the canvas. |
-| canvas:mouseleave | Activated when the mouse leaves the canvas. |
-| canvas:mousedown | Activated when the left or right button is clicked down on the canvas. It cannot be activated by keyboard. |
-| canvas:mouseup | Activated when the left or right button is released on the canvas. It cannot be activated by keyboard. |
-| canvas:contextmenu | Open the context menu when user clicks the right button of mouse on the canvas. |
-| canvas:dragstart | Activated when user begins to drag the canvas. This event is applied on the dragged canvas. |
-| canvas:drag | Activated during the dragging process on the canvas. This event is applied on the dragged canvas. |
-| canvas:dragend | Activated when user stops dragging on the canvas. This event is applied on the dragged canvas. |
-| canvas:dragenter | Activated when user drags the canvas into a target item. This event is applied on the target item. |
-| canvas:dragleave | Activated when user drags the canvas out of a target item. This event is applied on the target item. |
-| canvas:drop | Activated when user drags and drops an item on the canvas. |
-| canvas:touchstart | On touch screen, this event is activated when user begin to touch the canvas |
-| canvas:touchmove | On touch screen, this event is activated when user is touching the canvas |
-| canvas:touchend | On touch screen, this event is activated when user finish touching the canvas |
diff --git a/site/docs/api/common-graph/common-graph.zh.md b/site/docs/api/common-graph/common-graph.zh.md
deleted file mode 100644
index 9fd187dbb..000000000
--- a/site/docs/api/common-graph/common-graph.zh.md
+++ /dev/null
@@ -1,638 +0,0 @@
----
-title: 通用配置
-order: 3
----
-
-## 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型， 内置节点包括 icon-node ,card，circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut，这些内置节点的默认样式分别如下图所示。
-
-##### size
-
-**optional** _Number[]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小， 默认值 [120, 40]。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置，默认值 `[[0.5, 0], [0.5, 1]]`。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 Shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
-
-##### padding
-
-**optional** _number | number[]_
-
-文本 padding。
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### customContent
-
-**optional** _Function_
-
-自定义 items，需要返回自定义元素的最大高度。
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型。
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker 配置， 支持回调。
-
-```ts
-interface MarkerCfg {
- /** 是否展示 */
- show?: boolean;
- /** 是否折叠态 */
- collapsed?: boolean;
- /** 位置 */
- position?: 'left' | 'right' | 'top' | 'bottom';
- /** 样式 */
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-### customLayout
-
-**optional** _Boolean_
-
-开启后，layout 失效，使用 data 里面的 x、y 进行数据布局。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### fitCenter
-
-**optional** _Boolean_
-
-开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView，默认为 true。
-
-#### minimapCfg
-
-**optional** _object_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-| 名称 | 类型 | 描述 |
-| --- | --- | --- |
-| container | Object | 放置 Minimap 的 DOM 容器。若不指定则自动生成 |
-| className | String | 生成的 DOM 元素的 className |
-| viewportClassName | String | Minimap 上视窗 DOM 元素的 className |
-| type | String | 选项：`'default'`：渲染图上所有图形；`'keyShape'`：只渲染图上元素的 keyShape，以减少渲染成本；`'delegate'`：只渲染图上元素的大致图形，以降低渲染成本。渲染成本 `'default'` > `'keyShape'` > `'delegate'`。默认为 `'default'` |
-| size | Array | Minimap 的大小 |
-| delegateStyle | Object | 在 `type` 为 `'delegate'` 时生效，代表元素大致图形的样式 |
-
-其中，delegateStyle 可以设置如下属性：
-
-| 名称 | 类型 | 描述 |
-| ----------- | ------ | ---------- |
-| fill | String | 填充颜色 |
-| stroke | String | 描边颜色 |
-| lineWidth | Number | 描边宽度 |
-| opacity | Number | 透明度 |
-| fillOpacity | Number | 填充透明度 |
-
-#### toolbarCfg
-
-**optional** _object_
-
-Toolbar 配置。
-
-```ts
-interface ToolbarCfg {
- /** toolbar css 类名 */
- className?: string;
- /** toolbar 容器样式 */
- style?: React.CSSProperties;
- /** 是否展示 */
- show?: boolean;
- /** 缩放因子 */
- zoomFactor?: number;
- /** 自定义 icon */
- customContent?: ({
- zoomIn,
- zoomOut,
- toggleFullscreen,
- fullscreen,
- }: {
- zoomIn: () => void;
- zoomOut: () => void;
- toggleFullscreen: () => void;
- fullscreen: boolean;
- }) => React.ReactElement;
-}
-```
-
-#### tooltipCfg
-
-**optional** _object_
-
-Tooltip 配置。
-
-```ts
-interface ToolbarCfg {
- /** toolbar css 类名 */
- className?: string;
- /** toolbar 容器样式 */
- style?: React.CSSProperties;
- /** 是否展示 */
- show?: boolean;
- /** 自定义模板 */
- customContent: (item?: NodeConfig) => React.ReactElement;
-}
-```
-
-#### menuCgf
-
-**optional** _object_
-
-MenuCfg 配置。
-
-```ts
-interface MenuCfg {
- container?: HTMLDivElement | string | null;
- className?: string;
- handleMenuClick?: (target: HTMLElement, item: Item) => void;
- customContent?: (evt?: IG6GraphEvent) => React.ReactNode;
- // offsetX 与 offsetY 需要加上父容器的 padding
- offsetX?: number;
- offsetY?: number;
- shouldBegin?: (evt?: IG6GraphEvent) => boolean;
- // 允许出现 tooltip 的 item 类型
- itemTypes?: string[];
- trigger?: 'click' | 'contextmenu';
-}
-```
-
-## 方法
-
-#### graph.downloadFullImage(name, type, imageConfig)
-
-将画布上的元素导出为图片。
-
-**参数**
-
-| 名称 | 类型 | 是否必选 | 描述 |
-| --- | --- | --- | --- |
-| name | String | false | 图片的名称，不指定则为 'graph' |
-| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | 图片的类型。图的 `renderer` 为默认的 `'canvas'` 时生效，图的 `renderer` 为 `'svg'` 时将导出 svg 文件 |
-| imageConfig | Object | false | 图片的配置项，可选，具体字段见下方 |
-
-其中，imageConfig 为导出图片的配置参数：
-
-| 名称 | 类型 | 是否必选 | 描述 |
-| --- | --- | --- | --- |
-| backgroundColor | String | false | 图片的背景色，可选，不传值时将导出透明背景的图片 |
-| padding | Number / Number[] | false | 导出图片的上左下右 padding 值。当 `padding` 为 number 类型时，四周 `padding` 相等 |
-
-**用法**
-
-```ts
-{
- onReady: (graph) => {
- graph.downloadFullImage('tree-graph', {
- backgroundColor: '#ddd',
- padding: [30, 15, 15, 15],
- });
- };
-}
-```
-
-#### graph.toFullDataURL(callback, type, imageConfig)
-
-将画布上元素生成为图片的 URL。
-
-**参数**
-
-| 名称 | 类型 | 是否必选 | 描述 |
-| --- | --- | --- | --- |
-| callback | Function | true | 异步生成 dataUrl 完成后的回调函数，在这里处理生成的 dataUrl 字符串 |
-| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | 图片的类型。图的 `renderer` 为默认的 `'canvas'` 时生效，图的 `renderer` 为 `'svg'` 时将导出 svg 文件 |
-| imageConfig | Object | false | 图片的配置项，可选，具体字段见下方 |
-
-其中，imageConfig 为导出图片的配置参数：
-
-| 名称 | 类型 | 是否必选 | 描述 |
-| --- | --- | --- | --- |
-| backgroundColor | String | false | 图片的背景色，可选，不传值时将导出透明背景的图片 |
-| padding | Number / Number[] | false | 导出图片的上左下右 padding 值。当 `padding` 为 number 类型时，四周 `padding` 相等 |
-
-无返回值，生成的结果请在 callback 中处理。如下示例：
-
-**用法**
-
-```ts
-{
- onReady: (graph) => {
- graph.toFullDataUrl(
- // 第一个参数为 callback，必须
- (res) => {
- // ... something
- console.log(res); // 打印出结果
- },
- // 后两个参数不是必须
- 'image/jpeg',
- (imageConfig: {
- backgroundColor: '#fff',
- padding: 10,
- }),
- );
- };
-}
-```
-
-#### graph.zoom(ratio, center)
-
-图表缩放。
-
-**用法**
-
-```ts
-{
- onReady: (graph) => {
- // 缩小 0.5
- graph.zoom(0.5);
- // 以[100, 100]为中心缩小 0.5
- graph.zoom(0.5, { x: 100, y: 100 });
- };
-}
-```
-
-## 事件
-
-事件通过 `on` 统一绑定到 graph 上，通过 `off` 移除，onReady 会返回 graph 实例。
-
-```ts
-graph.on(eventName, (evt) => {});
-graph.off(eventName, (evt) => {});
-```
-
-```ts
-{
- onReady: (graph) => {
- graph.on('node:click', (evt) => {
- console.log(evt);
- });
- };
-}
-```
-
-其中，事件对象 `evt` 的属性值有：
-
-- `type`: 事件类型
-- `name`: 事件名称
-- `x`: 画布上的 x 坐标
-- `y`: 画布上的 y 坐标
-- `clientX`: 浏览器窗口上的 x 坐标
-- `clientY`: 浏览器窗口上的 y 坐标
-- `canvasX`: 画布父容器视口上的 x 坐标
-- `canvasY`: 画布父容器视口上的 y 坐标
-- `item`: 事件的触发元素（节点/边/ Combo）
-- `target`: 事件的触发图形 Shape 或画布对象
-- `bubbles`: 是否允许冒泡
-- `defaultPrevented`: 是否阻止了原生事件
-- `originalEvent`: 原始浏览器事件对象，其中的 `button` 可以用于区分 `click` 事件的左/中/右键
-- `timeStamp`: 触发事件的时间
-- `propagationStopped`: 是否阻止传播（向上冒泡）
-- `propagationPath`: 触发事件的路径
-
-`eventName` 见下方内容。
-
-#### 通用交互事件
-
-| 事件名称 | 描述 |
-| --- | --- |
-| click | 单击鼠标**左键**或者按下回车键时触发 |
-| dblclick | 双击鼠标**左键**时触发，同时会触发两次 click |
-| mouseenter | 鼠标移入元素范围内触发，**该事件不冒泡**，即鼠标移到其后代元素上时不会触发 |
-| mousemove | 鼠标在元素内部移到时不断触发，不能通过键盘触发 |
-| mouseout | 鼠标移出目标元素后触发 |
-| mouseover | 鼠标移入目标元素上方，鼠标移到其后代元素上时会触发 |
-| mouseleave | 鼠标移出元素范围时触发，**该事件不冒泡**，即鼠标移到其后代元素时不会触发 |
-| mousedown | 鼠标按钮被按下（左键或者右键）时触发，不能通过键盘触发 |
-| mouseup | 鼠标按钮被释放弹起时触发，不能通过键盘触发 |
-| contextmenu | 用户右击鼠标时触发并打开上下文菜单 |
-| dragstart | 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 |
-| drag | 当拖拽元素在拖动过程中时触发的事件，此事件作用于被拖拽元素上 |
-| dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 |
-| dragenter | 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 |
-| dragleave | 当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上 |
-| drop | 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
-| keydown | 按下键盘键触发该事件 |
-| keyup | 释放键盘键触发该事件 |
-| wheel | 鼠标滚轮滚动时触发该事件 |
-| touchstart | 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 |
-| touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 `preventDefault()` 事件可以阻止滚动。 |
-| touchend | 当手指从屏幕上离开的时候触发 |
-
-#### Node 交互事件
-
-| 事件名称 | 描述 |
-| ---------------- | ---------------------------------------------------------------------- |
-| node:click | 鼠标**左键**单击节点时触发 |
-| node:dblclick | 鼠标双击**左键**节点时触发，同时会触发两次 node:click |
-| node:mouseenter | 鼠标移入节点时触发 |
-| node:mousemove | 鼠标在节点内部移到时不断触发，不能通过键盘触发 |
-| node:mouseout | 鼠标移出节点后触发 |
-| node:mouseover | 鼠标移入节点上方时触发 |
-| node:mouseleave | 鼠标移出节点时触发 |
-| node:mousedown | 鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发 |
-| node:mouseup | 节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 |
-| node:dragstart | 当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上 |
-| node:drag | 当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上 |
-| node:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳节点上 |
-| node:dragenter | 当拖曳节点进入目标元素的时候触发的事件，此事件作用在目标元素上 |
-| node:dragleave | 当拖曳节点离开目标元素的时候触发的事件，此事件作用在目标元素上 |
-| node:dragover | 当拖曳节点在另一目标元素上移动时触发此事件，此事件作用在目标元素上 |
-| node:drop | 被拖拽的节点在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
-| node:touchstart | 在触控屏上，当节点开始被触碰的时候触发的事件 |
-| node:touchmove | 在触控屏上，当节点开始被触碰过程中触发的事件 |
-| node:touchend | 在触控屏上，当节点开始被触碰结束的时候触发的事件 |
-| node:contextmenu | 用户在节点上右击鼠标时触发并打开右键菜单 |
-
-#### Edge 交互事件
-
-| 事件名称 | 描述 |
-| ---------------- | -------------------------------------------------------------------------- |
-| edge:click | 鼠标**左键**单击边时触发 |
-| edge:dblclick | 鼠标双击**左键**边时触发，同时会触发两次 edge:click |
-| edge:mouseenter | 鼠标移入边时触发 |
-| edge:mousemove | 鼠标在边上移到时不断触发，不能通过键盘触发 |
-| edge:mouseout | 鼠标移出边后触发 |
-| edge:mouseover | 鼠标移入边上方时触发 |
-| edge:mouseleave | 鼠标移出边时触发 |
-| edge:mousedown | 鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发 |
-| edge:mouseup | 边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 |
-| edge:dragenter | 当拖曳元素进入目标边元素的时候触发的事件，此事件作用在目标边元素上 |
-| edge:dragleave | 当拖曳元素离开目标边元素的时候触发的事件，此事件作用在目标边元素上 |
-| edge:dragover | 当拖曳元素在另一目标边上移动时触发此事件，此事件作用在目标边元素上 |
-| edge:drop | 被拖拽的元素在目标边元素上同时鼠标放开触发的事件，此事件作用在目标边元素上 |
-| edge:contextmenu | 用户在边上右击鼠标时触发并打开右键菜单 |
-
-#### Canvas 交互事件
-
-| 事件名称 | 描述 |
-| ------------------ | ---------------------------------------------------------------------- |
-| canvas:click | 鼠标**左键**单击画布时触发 |
-| canvas:dblclick | 鼠标双击**左键**画布时触发 |
-| canvas:mouseenter | 鼠标移入画布时触发 |
-| canvas:mousemove | 鼠标在画布内部移到时不断触发，不能通过键盘触发 |
-| canvas:mouseout | 鼠标移出画布后触发 |
-| canvas:mouseover | 鼠标移入画布上方时触发 |
-| canvas:mouseleave | 鼠标移出画布时触发 |
-| canvas:mousedown | 鼠标按钮在画布上按下（左键或者右键）时触发，不能通过键盘触发 |
-| canvas:mouseup | 画布上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 |
-| canvas:contextmenu | 用户在画布上右击鼠标时触发并打开右键菜单 |
-| canvas:dragstart | 当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上 |
-| canvas:drag | 当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上 |
-| canvas:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳画布上 |
-| canvas:dragenter | 当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标画布上 |
-| canvas:dragleave | 当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标画布上 |
-| canvas:drop | 被拖拽的元素在空白画布上同时鼠标放开触发的事件，此事件作用在目标画布上 |
-| canvas:touchstart | 在触控屏上，当画布开始被触碰的时候触发的事件 |
-| canvas:touchmove | 在触控屏上，当画布开始被触碰过程中触发的事件 |
-| canvas:touchend | 在触控屏上，当画布开始被触碰结束的时候触发的事件 |
diff --git a/site/docs/api/flowchart/flowchart-api.zh.md b/site/docs/api/flowchart/flowchart-api.zh.md
deleted file mode 100644
index 0479d6f1e..000000000
--- a/site/docs/api/flowchart/flowchart-api.zh.md
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Flowchart
-order: 1
----
-
-### 基本配置
-
-#### data
-
-**optional** *Datum*
-
-默认数据
-
-```ts
-type Datum = {
- nodes?: unknown[];
- egdes?: unknown[];
-};
-```
-
-#### isAutoCenter
-
-**optional** *boolean* *default:* `false`
-
-画布是否自动居中
-
-
-#### nodePanelProps
-
-**optional** *NodePanelProps*
-
-节点面板配置
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| showHeader | boolean | 是否展示 header | true | false |
-| defaultActiveKey | string[] | 默认展开的面板，custom: 自定义节点；official: 内置节点 | ['custom', 'official'] | ['custom'] |
-| registerNode | RegisterNode | 自定义节点 | - | false |
-
-*RegisterNode*
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| title | string | 自定义节点标题 | 自定级节点 | false |
-| nodes | CustomNode[] | 节点数组 | - | false |
-
-```ts
-interface CustomNode {
- /** 节点名称，唯一 */
- name: string;
- /** 节点 React 组件 */
- component: NsGraph.INodeRender;
- /** popover 组件 */
- popover?: React.Component;
- /** 默认标签 */
- label?: string;
- /** 默认宽度 */
- width?: number;
- /** 默认高度 */
- height?: number;
- /** 连接锚点配置，默认上下左右四个 */
- ports?: NsGraph.INodeConfig['ports'];
-}
-```
-
-#### canvasProps
-
-**optional** *CanvasProps*
-
-主画布配置
-
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| position | IPosition | 位置配置 | `{ top: 40, left: 240, right: 240, bottom: 0 }` | false |
-| config | X6Config | 网格线等配置 | - | false |
-
-```ts
-interface IPosition {
- width?: number;
- height?: number;
- lineHeight?: number;
- top?: number;
- left?: number;
- right?: number;
- bottom?: number;
-}
-```
-
-#### toolbarPanelProps
-
-**optional** *ToolbarPanelProps*
-
-Toolbar 配置
-
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| position | IPosition | 位置配置 | `{ top: 0, left: 240, right: 240, bottom: 0 }` | false |
-| commands | CommandItem[] | 自定义命令 | - | false |
-
-```ts
-type Command =
- | 'undo-cmd'
- | 'redo-cmd'
- | 'front-node'
- | 'back-node'
- | 'save-graph-data'
- | 'multi-select'
- | 'add-group'
- | 'del-group'
- | 'graph-toggle-multi-select'
- | 'graph-copy-selection'
- | 'graph-paste-selection';
-
-type CommandItem = {
- /** 命令 */
- command: Command;
- /** 名称 */
- text?: string;
- /** tooltip */
- tooltip?: string;
- /**
- * iconName
- * 对应 antd/icons，不存在时需要先注册
- * eg: 'RedoOutlined'
- */
- iconName?: string;
-}
-```
-
-```tsx
-import { IconStore } from '@ant-design/charts'
-import { SaveOutlined } from '@ant-design/icons';
-
-IconStore.set('SaveOutlined', SaveOutlined);
-```
-
-#### scaleToolbarPanelProps
-
-**optional** *ScaleToolbarPanelProps*
-
-缩放控件
-
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| position | IPosition | 位置配置 | `{ top: 12, right: 12 }` | false |
-| layout | 'horizontal'、'vertical' | 布局 | vertical | false |
-
-
-#### detailPanelProps
-
-**optional** *DetailPanelProps*
-
-form 表单
-
-| 属性名 | 类型 | 描述 | 默认值 | 是否必填 |
-|-------|-------|------|------|---------|
-| position | IPosition | 位置配置 | `{ width: 240, top: 0, bottom: 0, right: 0 }` | false |
-| controlMapService | ControlMapService | 注册自定义`Form`组件，参考示例 | - | false |
-| formSchemaService | FormSchemaService | 控制面板切换逻辑，参考示例 | - | false |
-
-
-
-#### contextMenuPanelProps
-
-**optional** *ContextMenuPanelProps*
-
-右键菜单
-
-#### mode
-
-**optional** *'edit'|'scan'*
-
-默认 `edit` 模式， `scan` 模式下部分交互事件会被禁用。
-
-### 事件
-
-#### onReady
-
-**optional** *Function*
-
-组件装载完成回调，返回图表实例。
-
-#### onSave
-
-**optional** *Function*
-
-点击回调，仅支持 save-graph-data ，返回画布数据，可用于 data 配置。
-
-
-#### onAddNode
-
-**optional** *Function*
-
-新增画布节点时的回调，返回节点配置。
-
-
-#### onAddEdge
-
-**optional** *Function*
-
-新增边时的回调，返回边配置。
-
-
-#### onConfigChange
-
-**optional** *Function*
-
-节点或边更新数据时的回调，
-
-```ts
- /** 节点或边更新数据时调用 */
- onConfigChange?: (params: { data: Datum; type: string; config?: NsGraph.INodeConfig | NsGraph.IEdgeConfig }) => void;
-```
-
-#### onDestroy
-
-**optional** *Function*
-
-app 销毁前的回调
-
diff --git a/site/docs/api/graphs/decomposition-tree-graph.en.md b/site/docs/api/graphs/decomposition-tree-graph.en.md
deleted file mode 100644
index e6f8fb23d..000000000
--- a/site/docs/api/graphs/decomposition-tree-graph.en.md
+++ /dev/null
@@ -1,461 +0,0 @@
----
-title: Decomposition Tree Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default 'indicator-card', the configuration may not be effective after modification.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a Shape are shown below, the range of each x and y is [0, 1]:
-
-##### title
-
-**optional** _object_
-
-Node title configuration.
-
-```ts
-{
- title: {
- /** title container style */
- containerStyle?: IShapeStyle;
- /** title style */
- style?: ILabelStyle;
- /** auto ellipsis */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-Node items configuration.
-
-```ts
-{
- items?: {
- /** items conatiner style */
- containerStyle?: IShapeStyle;
- /** item style */
- style?: ILabelStyle;
- /**
- * item layout methods
- * - flex: text、value、icon divide the container width equally
- * - bundled: text、(value、icon) divide the container width equally
- * sort: true is invalid
- */
- layout?: 'bundled' | 'flex';
- /** sort by item keys */
- sort?: boolean;
- /** item padding */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-Item content padding .
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-Item status configuration, style supports callback.
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-Item percent configuration, style supports callback.
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-Whether to dynamically adjust the node width. If set to true, the title autoEllipsis configuration is invalid.
-
-##### getChildren
-
-**optional** _Function_
-
-Asynchronously load data when Marker is clicked.
-
-##### customContent
-
-**optional** _Function_
-
-Custom items, returns the maximum height of a custom items.
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // Unique field within group
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `cubic-horizontal`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### level
-
-**optional** _number_
-
-Set the default expansion level, default 100.
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker configuration, support callback.
-
-```ts
-interface MarkerCfg {
- show?: boolean;
- collapsed?: boolean;
- position?: 'left' | 'right' | 'top' | 'bottom';
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- direction: 'LR',
- getWidth: () => {
- // The width of the node used to calculate the layout is recommended as size[0]
- return 16;
- },
- getHeight: () => {
- // The width of the node used to calculate the layout is recommended as size[1]
- return 60;
- },
- getVGap: () => {
- // The vertical clearance of each node is used in conjunction with the getHeight return value
- return 16;
- },
- getHGap: () => {
- // The vertical clearance of each node is used in conjunction with the getWidth return value
- return 100;
- },
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/decomposition-tree-graph.zh.md b/site/docs/api/graphs/decomposition-tree-graph.zh.md
deleted file mode 100644
index 95ce894b7..000000000
--- a/site/docs/api/graphs/decomposition-tree-graph.zh.md
+++ /dev/null
@@ -1,464 +0,0 @@
----
-title: 拆解树
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `indicator-card`, 修改后配置可能不生效。
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置，默认值 `[[0.5, 0], [0.5, 1]]`。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 Shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
-
-##### title
-
-**optional** _object_
-
-节点 title 配置。
-
-```ts
-{
- title: {
- /** title 容器样式 */
- containerStyle?: IShapeStyle;
- /** title 样式 */
- style?: ILabelStyle;
- /** 超出自动隐藏 */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-节点内容配置。
-
-```ts
-{
- items?: {
- /** items 容器样式 */
- containerStyle?: IShapeStyle;
- /** item 样式 */
- style?: ILabelStyle;
- /**
- * item 布局方式
- * - flex: text、value、icon 均分容器宽度
- * - bundled: text、(value、icon) 均分容器宽度
- * sort: true 时无效
- */
- layout?: 'bundled' | 'flex';
- /** 是否根据 item 顺序绘制 */
- sort?: boolean;
- /** item 容器填充 */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-文本 padding 。
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-节点状态配置，style 支持回调。
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-节点占比配置，style 支持回调。
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-是否动态调整节点宽度，设置为 true 时，title autoEllipsis 配置无效。
-
-##### getChildren
-
-**optional** _Function_
-
-点击 Marker 时异步加载数据。
-
-##### customContent
-
-**optional** _Function_
-
-自定义 items，需要返回自定义元素的最大高度。
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'cubic-horizontal'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### level
-
-**optional** _number_
-
-设置默认展开层级，默认 100。
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker 配置， 支持回调。
-
-```ts
-interface MarkerCfg {
- /** 是否展示 */
- show?: boolean;
- /** 是否折叠态 */
- collapsed?: boolean;
- /** 位置 */
- position?: 'left' | 'right' | 'top' | 'bottom';
- /** 样式 */
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- direction: 'TB',
- getWidth: () => {
- // 用于计算布局的节点宽度，建议设置为 size[0]
- return 16;
- },
- getHeight: () => {
- // 用于计算布局的节点高度，建议设置为 size[1]
- return 60;
- },
- getVGap: () => {
- // 每个节点的垂直间隙，会结合 getHeight 返回值使用
- return 16;
- },
- getHGap: () => {
- // 每个节点的水平间隙，会结合 getWidth 返回值使用
- return 100;
- },
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/api/graphs/flow-analysis-graph.en.md b/site/docs/api/graphs/flow-analysis-graph.en.md
deleted file mode 100644
index a2539902d..000000000
--- a/site/docs/api/graphs/flow-analysis-graph.en.md
+++ /dev/null
@@ -1,512 +0,0 @@
----
-title: Flow Analysis Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default 'indicator-card', the configuration may not be effective after modification.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a Shape are shown below, the range of each x and y is [0, 1]:
-
-##### title
-
-**optional** _object_
-
-Node title configuration.
-
-```ts
-{
- title: {
- /** title container style */
- containerStyle?: IShapeStyle;
- /** title style */
- style?: ILabelStyle;
- /** auto ellipsis */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-Node items configuration.
-
-```ts
-{
- items?: {
- /** items conatiner style */
- containerStyle?: IShapeStyle;
- /** item style */
- style?: ILabelStyle;
- /**
- * item layout methods
- * - flex: text、value、icon divide the container width equally
- * - bundled: text、(value、icon) divide the container width equally(true is invalid)
- * - follow: Arrange from left to right
- */
- layout?: 'bundled' | 'flex' | 'follow';
- /**
- * Horizontal spacing of content
- * layout: 'follow' takes effct
- */
- itemSpacing?: number;
- /** sort by item keys */
- sort?: boolean;
- /** item padding */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-Item content padding .
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-Item status configuration, style supports callback.
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-Item percent configuration, style supports callback.
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-Whether to dynamically adjust the node width. If set to true, the title autoEllipsis configuration is invalid.
-
-##### customContent
-
-**optional** _Function_
-
-Custom items, returns the maximum height of a custom items.
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // Unique field within group
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-##### asyncData
-
-**optional** _Function_
-
-Async Data
-
-```ts
-const fetchData = () => {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve({
- nodes: [
- {
- id: Math.random().toString(),
- value: {
- title: 'Target page',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: Math.random().toString(),
- value: {
- title: 'Target page',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- edges: [],
- });
- }, 1000);
- });
-};
-const asyncData = async () => {
- return await fetchData();
-};
-
-const config = {
- nodeCfg: { asyncData },
- markerCfg: (cfg) => {
- const { children = [] } = cfg;
- return {
- position: 'right',
- show: true,
- collapsed: !children?.length,
- };
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `cubic-horizontal`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker configuration, support callback.
-
-```ts
-interface MarkerCfg {
- show?: boolean;
- collapsed?: boolean;
- position?: 'left' | 'right' | 'top' | 'bottom';
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- rankdir: 'LR',
- /** Layout center. */
- center: [0, 0],
- /** Number of pixels that separate nodes vertically in the layout. */
- nodesepFunc: () => 1,
- /** Number of pixels that separate nodes horizontally in the layout. */
- ranksepFunc: () => 1,
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/flow-analysis-graph.zh.md b/site/docs/api/graphs/flow-analysis-graph.zh.md
deleted file mode 100644
index 46e5a3fc6..000000000
--- a/site/docs/api/graphs/flow-analysis-graph.zh.md
+++ /dev/null
@@ -1,515 +0,0 @@
----
-title: 来源去向图
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `indicator-card`, 修改后配置可能不生效。
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置，默认值 `[[0.5, 0], [0.5, 1]]`。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 Shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
-
-##### title
-
-**optional** _object_
-
-节点 title 配置。
-
-```ts
-{
- title: {
- /** title 容器样式 */
- containerStyle?: IShapeStyle;
- /** title 样式 */
- style?: ILabelStyle;
- /** 超出自动隐藏 */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-节点内容配置。
-
-```ts
-{
- items?: {
- /** items 容器样式 */
- containerStyle?: IShapeStyle;
- /** item 样式 */
- style?: ILabelStyle;
- /**
- * item 布局方式
- * - flex: text、value、icon 均分容器宽度
- * - bundled: text、(value、icon) 均分容器宽度(sort: true 时无效)
- * - follow: 从左到右依次排列
- */
- layout?: 'bundled' | 'flex' | 'follow';
- /**
- * 内容横向间距
- * layout: 'follow' 时生效
- */
- itemSpacing?: number;
- /** 是否根据 item 顺序绘制 */
- sort?: boolean;
- /** item 容器填充 */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-文本 padding 。
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-节点状态配置，style 支持回调。
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-节点占比配置，style 支持回调。
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-是否动态调整节点宽度，设置为 true 时，title autoEllipsis 配置无效。
-
-##### customContent
-
-**optional** _Function_
-
-自定义 items，需要返回自定义元素的最大高度。
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-##### asyncData
-
-**optional** _Function_
-
-异步获取数据
-
-```ts
-const fetchData = () => {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve({
- nodes: [
- {
- id: Math.random().toString(),
- value: {
- title: '去向页面xx',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: Math.random().toString(),
- value: {
- title: '去向页面xxx',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- edges: [],
- });
- }, 1000);
- });
-};
-const asyncData = async () => {
- return await fetchData();
-};
-
-const config = {
- nodeCfg: { asyncData },
- markerCfg: (cfg) => {
- const { children = [] } = cfg;
- return {
- position: 'right',
- show: true,
- collapsed: !children?.length,
- };
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'cubic-horizontal'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker 配置， 支持回调。
-
-```ts
-interface MarkerCfg {
- /** 是否展示 */
- show?: boolean;
- /** 是否折叠态 */
- collapsed?: boolean;
- /** 位置 */
- position?: 'left' | 'right' | 'top' | 'bottom';
- /** 样式 */
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- rankdir: 'LR',
- /** Layout center. */
- center: [0, 0],
- /** Number of pixels that separate nodes vertically in the layout. */
- nodesepFunc: () => 1,
- /** Number of pixels that separate nodes horizontally in the layout. */
- ranksepFunc: () => 1,
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/api/graphs/fund-flow-graph.en.md b/site/docs/api/graphs/fund-flow-graph.en.md
deleted file mode 100644
index ad1337c33..000000000
--- a/site/docs/api/graphs/fund-flow-graph.en.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Fund Flow Graph
----
-
-### Base configuration
-
-> Please combine with [General Configuration](/en/docs/api/common-graph/common-graph#basic-configuration)
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- text: string;
- icon?: string;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: {
- text?: string;
- subText?: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-Node configration.
-
-##### type
-
-**optional** _`string`_
-
-The default edge type is `fund-card`, Some configurations may not take effect after the modification.
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-The default edge type is 'fund-line'. Some configurations may not take effect after modification.
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- rankdir: 'LR',
- /** Number of pixels that separate nodes vertically in the layout. */
- nodesep: 30,
- /** Number of pixels that separate nodes horizontally in the layout. */
- ranksep: 50,
-}
-```
diff --git a/site/docs/api/graphs/fund-flow-graph.zh.md b/site/docs/api/graphs/fund-flow-graph.zh.md
deleted file mode 100644
index 5b5481201..000000000
--- a/site/docs/api/graphs/fund-flow-graph.zh.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 资金流向图
----
-
-### 基础配置
-
-> 请结合[通用配置](/zh/docs/api/common-graph/common-graph#基础配置)
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- text: string;
- icon?: string;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: {
- text?: string;
- subText?: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `fund-card`, 修改后部分配置可能不生效。
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'fund-line'，修改后部分配置可能不生效。
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- rankdir: 'LR',
- /** Number of pixels that separate nodes vertically in the layout. */
- nodesep: 30,
- /** Number of pixels that separate nodes horizontally in the layout. */
- ranksep: 50,
-}
-```
diff --git a/site/docs/api/graphs/mind-map-graph.en.md b/site/docs/api/graphs/mind-map-graph.en.md
deleted file mode 100644
index 9871c3c1d..000000000
--- a/site/docs/api/graphs/mind-map-graph.en.md
+++ /dev/null
@@ -1,461 +0,0 @@
----
-title: Mind Map Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default 'indicator-card', the configuration may not be effective after modification.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a Shape are shown below, the range of each x and y is [0, 1]:
-
-##### title
-
-**optional** _object_
-
-Node title configuration.
-
-```ts
-{
- title: {
- /** title container style */
- containerStyle?: IShapeStyle;
- /** title style */
- style?: ILabelStyle;
- /** auto ellipsis */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-Node items configuration.
-
-```ts
-{
- items?: {
- /** items conatiner style */
- containerStyle?: IShapeStyle;
- /** item style */
- style?: ILabelStyle;
- /**
- * item layout methods
- * - flex: text、value、icon divide the container width equally
- * - bundled: text、(value、icon) divide the container width equally
- * sort: true is invalid
- */
- layout?: 'bundled' | 'flex';
- /** sort by item keys */
- sort?: boolean;
- /** item padding */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-Item content padding .
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-Item status configuration, style supports callback.
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-Item percent configuration, style supports callback.
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-Whether to dynamically adjust the node width. If set to true, the title autoEllipsis configuration is invalid.
-
-##### getChildren
-
-**optional** _Function_
-
-Asynchronously load data when Marker is clicked.
-
-##### customContent
-
-**optional** _Function_
-
-Custom items, returns the maximum height of a custom items.
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // Unique field within group
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `cubic-horizontal`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### level
-
-**optional** _number_
-
-Set the default expansion level, default 100.
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker configuration, support callback.
-
-```ts
-interface MarkerCfg {
- show?: boolean;
- collapsed?: boolean;
- position?: 'left' | 'right' | 'top' | 'bottom';
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be 'LR' | 'RL' | 'H'. */
- direction: 'H',
- getWidth: () => {
- // The width of the node used to calculate the layout is recommended as size[0]
- return 16;
- },
- getHeight: () => {
- // The width of the node used to calculate the layout is recommended as size[1]
- return 60;
- },
- getVGap: () => {
- // The vertical clearance of each node is used in conjunction with the getHeight return value
- return 16;
- },
- getHGap: () => {
- // The vertical clearance of each node is used in conjunction with the getWidth return value
- return 100;
- },
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/mind-map-graph.zh.md b/site/docs/api/graphs/mind-map-graph.zh.md
deleted file mode 100644
index 3b63a05a9..000000000
--- a/site/docs/api/graphs/mind-map-graph.zh.md
+++ /dev/null
@@ -1,464 +0,0 @@
----
-title: 脑图
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `indicator-card`, 修改后配置可能不生效。
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置，默认值 `[[0.5, 0], [0.5, 1]]`。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 Shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
-
-##### title
-
-**optional** _object_
-
-节点 title 配置。
-
-```ts
-{
- title: {
- /** title 容器样式 */
- containerStyle?: IShapeStyle;
- /** title 样式 */
- style?: ILabelStyle;
- /** 超出自动隐藏 */
- autoEllipsis?: boolean;
- },
-}
-```
-
-##### items
-
-**optional** _object_
-
-节点内容配置。
-
-```ts
-{
- items?: {
- /** items 容器样式 */
- containerStyle?: IShapeStyle;
- /** item 样式 */
- style?: ILabelStyle;
- /**
- * item 布局方式
- * - flex: text、value、icon 均分容器宽度
- * - bundled: text、(value、icon) 均分容器宽度
- * sort: true 时无效
- */
- layout?: 'bundled' | 'flex';
- /** 是否根据 item 顺序绘制 */
- sort?: boolean;
- /** item 容器填充 */
- padding?: number | number[];
- };
-}
-```
-
-##### padding
-
-**optional** _number | number[]_
-
-文本 padding 。
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### badge
-
-**optional** _Object_
-
-节点状态配置，style 支持回调。
-
-```ts
- /** 节点标记配置 */
- badge?: {
- /** 标记位置 */
- position?: 'left' | 'top' | 'right' | 'bottom';
- /** 标记大小 */
- size?: number | number[];
- /** 标记样式 */
- style?: IShapeStyle;
- };
-```
-
-##### percent
-
-**optional** _Object_
-
-节点占比配置，style 支持回调。
-
-```ts
- /** 节点占比配置 */
- badge?: {
- /** 占比位置 */
- position?: 'top' | 'bottom';
- /** 背景高度 */
- size?: number;
- /** 占比样式 */
- style?: IShapeStyle;
- /** 占比背景样式 */
- backgroundStyle?: IShapeStyle;
- };
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-是否动态调整节点宽度，设置为 true 时，title autoEllipsis 配置无效。
-
-##### getChildren
-
-**optional** _Function_
-
-点击 Marker 时异步加载数据。
-
-##### customContent
-
-**optional** _Function_
-
-自定义 items，需要返回自定义元素的最大高度。
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon } = item;
- let textShape, valueShape, iconShape;
- textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- valueShape =
- value &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + width / 2,
- y: startY,
- text: value,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
- iconShape =
- icon &&
- group!.addShape('image', {
- attrs: {
- x: startX,
- y: startY,
- width: 72,
- height: 72,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- return Math.max(
- textShape?.getBBox().height ?? 0,
- valueShape?.getBBox().height ?? 0,
- iconShape?.getBBox().height ?? 0,
- );
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'cubic-horizontal'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### level
-
-**optional** _number_
-
-设置默认展开层级，默认 100。
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker 配置， 支持回调。
-
-```ts
-interface MarkerCfg {
- /** 是否展示 */
- show?: boolean;
- /** 是否折叠态 */
- collapsed?: boolean;
- /** 位置 */
- position?: 'left' | 'right' | 'top' | 'bottom';
- /** 样式 */
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- /** Direction for rank nodes. Can be 'LR' | 'RL' | 'H'. */
- direction: 'H',
- getWidth: () => {
- // 用于计算布局的节点宽度，建议设置为 size[0]
- return 16;
- },
- getHeight: () => {
- // 用于计算布局的节点高度，建议设置为 size[1]
- return 60;
- },
- getVGap: () => {
- // 每个节点的垂直间隙，会结合 getHeight 返回值使用
- return 16;
- },
- getHGap: () => {
- // 每个节点的水平间隙，会结合 getWidth 返回值使用
- return 100;
- },
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/api/graphs/organization-graph.en.md b/site/docs/api/graphs/organization-graph.en.md
deleted file mode 100644
index 3afe95c3d..000000000
--- a/site/docs/api/graphs/organization-graph.en.md
+++ /dev/null
@@ -1,337 +0,0 @@
----
-title: Organization Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- children: Data[];
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default 'indicator-card', the configuration may not be effective after modification.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a Shape are shown below, the range of each x and y is [0, 1]:
-
-##### padding
-
-**optional** _number | number[]_
-
-Item content padding .
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-Whether to dynamically adjust the node width.
-
-##### customContent
-
-**optional** _Function_
-
-Custom items, returns the maximum height of a custom items.
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text } = item;
- const textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- return textShape?.getBBox().height ?? 0;
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `polyline`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker configuration, support callback.
-
-```ts
-interface MarkerCfg {
- show?: boolean;
- collapsed?: boolean;
- position?: 'left' | 'right' | 'top' | 'bottom';
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- direction: 'TB',
- getWidth: () => {
- // The width of the node used to calculate the layout is recommended as size[0]
- return 16;
- },
- getHeight: () => {
- // The height of the node used to calculate the layout is recommended as size[1]
- return 16;
- },
- getVGap: () => {
- // The vertical clearance of each node is used in conjunction with the getHeight return value
- return 16;
- },
- getHGap: () => {
- // The vertical clearance of each node is used in conjunction with the getWidth return value
- return 100;
- },
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/organization-graph.zh.md b/site/docs/api/graphs/organization-graph.zh.md
deleted file mode 100644
index 3b2d3b8ba..000000000
--- a/site/docs/api/graphs/organization-graph.zh.md
+++ /dev/null
@@ -1,340 +0,0 @@
----
-title: 组织架构图
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- children: Data[];
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `organization-card`, 修改后配置可能不生效。
-
-##### size
-
-**optional** _Number[] | false | [100, 44]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### label
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- label: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### anchorPoints
-
-**optional** _Number[]_
-
-节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置，默认值 `[[0.5, 0], [0.5, 1]]`。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 Shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
-
-##### padding
-
-**optional** _number | number[]_
-
-文本 padding 。
-
-```ts
-{
- padding: 8,
-}
-```
-
-##### autoWidth
-
-**optional** _Boolean_
-
-是否动态调整节点宽度，设置为 true 时。
-
-##### customContent
-
-**optional** _Function_
-
-自定义 items，需要返回自定义元素的最大高度。
-
-```ts
-{
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text } = item;
- const textShape =
- text &&
- group!.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- return textShape?.getBBox().height ?? 0;
- },
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'polyline'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-#### markerCfg
-
-**optional** _Boolean | MarkerCfg_
-
-Marker 配置， 支持回调。
-
-```ts
-interface MarkerCfg {
- /** 是否展示 */
- show?: boolean;
- /** 是否折叠态 */
- collapsed?: boolean;
- /** 位置 */
- position?: 'left' | 'right' | 'top' | 'bottom';
- /** 样式 */
- style?: ShapeStyle;
-}
-```
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- // 方向
- direction: 'TB',
- getWidth: () => {
- // 用于计算布局的节点高度，建议设置为 size[0]
- return 16;
- },
- getHeight: () => {
- // 用于计算布局的节点高度，建议设置为 size[1]
- return 16;
- },
- getVGap: () => {
- // 每个节点的垂直间隙，会结合 getHeight 返回值使用
- return 40;
- },
- getHGap: () => {
- // 每个节点的水平间隙，会结合 getWidth 返回值使用
- return 70;
- },
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/api/graphs/radial-graph.en.md b/site/docs/api/graphs/radial-graph.en.md
deleted file mode 100644
index 1ec149fea..000000000
--- a/site/docs/api/graphs/radial-graph.en.md
+++ /dev/null
@@ -1,289 +0,0 @@
----
-title: Radial Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default `rect`, support `icon-node`, Built-in nodes include `circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut`.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### labelCfg
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- labelCfg: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### asyncData
-
-**optional** _Function_
-
-Asynchronously data when a node is double-clicked, and the acquisition time can also be set automatically through Menu. See the example for details
-
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `polyline`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-interface Layout{
- /** 布局中心 */
- center?: PointTuple;
- /** 停止迭代的最大迭代数 */
- maxIteration?: number;
- /** 中心点，默认为数据中第一个点 */
- focusNode?: string | Node | null;
- /** 每一圈半径 */
- unitRadius?: number | null;
- /** 默认边长度 */
- linkDistance?: number;
- /** 是否防止重叠 */
- preventOverlap?: boolean;
- /** 节点直径 */
- nodeSize?: number | number[] | undefined;
- /** 节点间距，防止节点重叠时节点之间的最小距离（两节点边缘最短距离） */
- nodeSpacing?: number | Function | undefined;
- /** 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效 */
- strictRadial?: boolean;
- /** 防止重叠步骤的最大迭代次数 */
- maxPreventOverlapIteration?: number;
- sortBy?: string | undefined;
- sortStrength?: number;
- width?: number | undefined;
- height?: number | undefined;
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/radial-graph.zh.md b/site/docs/api/graphs/radial-graph.zh.md
deleted file mode 100644
index a2cb433cd..000000000
--- a/site/docs/api/graphs/radial-graph.zh.md
+++ /dev/null
@@ -1,288 +0,0 @@
----
-title: 辐射图
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- nodes: Array<{
- id: string;
- value: {
- title: string;
- items: Array<{
- text: string;
- value: string;
- icon: string;
- }>;
- };
- }>;
- edges: Array<{
- source: string;
- target: string;
- value: string;
- }>;
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `circle`, 支持 icon-node，内置节点包括 icon-node ,card，circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut，这些内置节点的默认样式分别如下图所示。
-
-##### size
-
-**optional** _Number[] | false | [100, 44]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### labelCfg
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- labelCfg: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### asyncData
-
-**optional** _Function_
-
-双击节点时异步获取数据，也可通过 menu 自动设置获取时机，详见示例。
-
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'polyline'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-interface Layout{
- /** 布局中心 */
- center?: PointTuple;
- /** 停止迭代的最大迭代数 */
- maxIteration?: number;
- /** 中心点，默认为数据中第一个点 */
- focusNode?: string | Node | null;
- /** 每一圈半径 */
- unitRadius?: number | null;
- /** 默认边长度 */
- linkDistance?: number;
- /** 是否防止重叠 */
- preventOverlap?: boolean;
- /** 节点直径 */
- nodeSize?: number | number[] | undefined;
- /** 节点间距，防止节点重叠时节点之间的最小距离（两节点边缘最短距离） */
- nodeSpacing?: number | Function | undefined;
- /** 是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效 */
- strictRadial?: boolean;
- /** 防止重叠步骤的最大迭代次数 */
- maxPreventOverlapIteration?: number;
- sortBy?: string | undefined;
- sortStrength?: number;
- width?: number | undefined;
- height?: number | undefined;
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/api/graphs/radial-tree-graph.en.md b/site/docs/api/graphs/radial-tree-graph.en.md
deleted file mode 100644
index b83cfcd3e..000000000
--- a/site/docs/api/graphs/radial-tree-graph.en.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-title: Radial Tree Graph
----
-
-### Base configuration
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-Set the width of the graph.
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-Set the height of the graph.
-
-#### data
-
-Data, see the sample code.
-
-```ts
-// Refer to the sample code for details.
-interface Data {
- id: string;
- value: {
- id: string;
- value: string;
- };
- children: Data[];
-}
-```
-
-#### nodeCfg
-
-Node configuration.
-
-##### type
-
-**optional** _`string`_
-
-Node type, default `rect`, support `icon-node`, Built-in nodes include `circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut`.
-
-##### size
-
-**optional** _Number[] | false | [120, 40]_
-
-The (minimum) size of the node. Some graphs may be adapted to the size of the node content.
-
-##### style
-
-**optional** _object | Function_
-
-Node style with support for callbacks.
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### labelCfg
-
-**optional** _object_
-
-Node text styles, style supports callbacks.
-
-```ts
-{
- labelCfg: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-Node style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-Edge configuration.
-
-##### type
-
-Edge type, default `polyline`
-
-- line: straight line without control points;
-- polyline: polyline with one or more control points;
-- arc;
-- quadratic: quadratic bezier curve;
-- cubic: cubic bezier curve;
-- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
-- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
-- loop: self-loop edge.
-
-
-
-
-##### label
-
-**optional** _object_
-
-Edge text styles, style supports callbacks.
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-Edge start arrow.
-
-```ts
-interface ArrowConfig {
- /** Arrow type */
- type?: 'vee' | 'triangle';
- /** Arrow offset */
- d?: number;
- /** Arrow path */
- path?: string;
- /** Arrow stroke */
- stroke?: string;
- /** Arrow fill */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-Edge end arrow.
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-Side style configuration items in different states.
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-Interaction mode, default `['drag-canvas', 'zoom-canvas']`.
-
-- drag-canvas: Drag canvas
-- scroll-canvas: Scroll canvas
-- zoom-canvas: Zoom canvas
-- drag-node: Drag node
-
-
-#### animate
-
-**optional** _Boolean_
-
-Whether to turn on animation, default to 'true'.
-
-#### autoFit
-
-**optional** _Boolean_
-
-Whether to scale node size adaptive container. Default value is 'true '.
-
-#### minimapCfg
-
-**optional** _objecr_
-
-Min map configruation.
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-Layout.
-
-```ts
-{
- /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
- direction: 'TB',
- nodeSep: 20,
- rankSep: 100,
-}
-```
-
-### Functions
-
-[Reference](/en/docs/api/common-graph/common-graph#functions)
-
-### Events
-
-[Reference](/en/docs/api/common-graph/common-graph#events)
diff --git a/site/docs/api/graphs/radial-tree-graph.zh.md b/site/docs/api/graphs/radial-tree-graph.zh.md
deleted file mode 100644
index eb8b62df1..000000000
--- a/site/docs/api/graphs/radial-tree-graph.zh.md
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: 辐射树图
----
-
-### 基础配置
-
-#### width
-
-**optional** _number_ _default:_ `500`
-
-设置图表宽度。
-
-#### height
-
-**optional** _number_ _default:_ `500`
-
-设置图表高度。
-
-#### data
-
-数据，详见示例代码。
-
-```ts
-// 具体参考示例代码
-interface Data {
- id: string;
- value: {
- id: string;
- value: string;
- };
- children: Data[];
-}
-```
-
-#### nodeCfg
-
-节点配置
-
-##### type
-
-**optional** _`string`_
-
-节点类型，默认 `circle`, 支持 icon-node，内置节点包括 icon-node ,card，circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut，这些内置节点的默认样式分别如下图所示。
-
-##### size
-
-**optional** _Number[] | false | [100, 44]_
-
-节点的（最小）大小，部分图表可能会根据节点内容自适应大小。
-
-##### style
-
-**optional** _object | Function_
-
-节点样式, 支持回调。
-
-```ts
-{
- style: {
- stroke: 'red';
- }
-}
-```
-
-##### labelCfg
-
-**optional** _object_
-
-节点文本样式, style 支持回调。
-
-```ts
-{
- labelCfg: {
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### nodeStateStyles
-
-**optional** _object_
-
-节点在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### edgeCfg
-
-边配置
-
-##### type
-
-边类型，默认 'polyline'
-
-- line：直线，不支持控制点；
-- polyline：折线，支持多个控制点；
-- arc：圆弧线；
-- quadratic：二阶贝塞尔曲线；
-- cubic：三阶贝塞尔曲线；
-- cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
-- loop：自环。
-
-这些内置边的默认样式分别如下图所示。
-
-##### label
-
-**optional** _object_
-
-边文本样式, style 支持回调。
-
-```ts
-{
- label: {
- content: string | ((edge: EdgeCfg) => string);
- style: {
- fill: 'red';
- }
- }
-}
-```
-
-##### startArrow
-
-**optional** _object_
-
-边开始箭头。
-
-```ts
-interface ArrowConfig {
- /** 箭头类型 */
- type?: 'vee' | 'triangle';
- /** 偏移量 */
- d?: number;
- /** 绘制路径 */
- path?: string;
- /** 描边 */
- stroke?: string;
- /** 填充 */
- fill?: string;
-}
-// eg
-{
- startArrow: {
- fill: 'red';
- },
-}
-```
-
-##### endArrow
-
-**optional** _object_
-
-边结束箭头。
-
-```ts
-{
- endArrow: {
- fill: 'red';
- },
-}
-```
-
-##### edgeStateStyles
-
-**optional** _object_
-
-边在不同状态下的样式配置项。
-
-```ts
-{
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
-}
-```
-
-#### behaviors
-
-**optional** _Number[]_
-
-交互模式， 默认值 `['drag-canvas', 'zoom-canvas']`。
-
-- drag-canvas: 拖拽画布
-- scroll-canvas: 滚轮滚动画布
-- zoom-canvas: 缩放画布
-- drag-node: 拖拽节点
-
-
-#### animate
-
-**optional** _Boolean_
-
-是否开启动画，默认值 `true`。
-
-#### autoFit
-
-**optional** _Boolean_
-
-是否缩放节点大小自适应容器，默认为 true。
-
-#### minimapCfg
-
-**optional** _objecr_
-
-迷你 map 配置。
-
-```ts
-interface MiniMapConfig {
- show?: boolean;
- viewportClassName?: string;
- type?: 'default' | 'keyShape' | 'delegate';
- size?: number[];
- delegateStyle?: ShapeStyle;
- refresh?: boolean;
- padding?: number;
-}
-```
-
-#### layout
-
-**optional** _object_
-
-布局。
-
-```ts
-{
- // 方向
- direction: 'LR',
- nodeSep: 20,
- rankSep: 100,
-}
-```
-
-### 方法
-
-[详见](/zh/docs/api/common-graph/common-graph#方法)
-
-### 事件
-
-[详见](/zh/docs/api/common-graph/common-graph#事件)
diff --git a/site/docs/map-api/advanced-plot/index.en.md b/site/docs/map-api/advanced-plot/index.en.md
deleted file mode 100644
index 7f5f7794b..000000000
--- a/site/docs/map-api/advanced-plot/index.en.md
+++ /dev/null
@@ -1,602 +0,0 @@
----
-title: Advanced Plot
-order: 9
----
-
----
-title: 高级图表 - Advanced Plot
-order: 9
----
-
-Unstable API
-
-`L7Plot` 是高级图表类，可以组合多个图层以及图表。
-
-```js
-constructor(container: string | HTMLDivElement, options: L7PlotOptions)
-```
-
-## 一、配置
-
-### container
-
-`string|HTMLDivElement` required
-
-图表渲染的 DOM 容器。
-
-### options
-
-`L7PlotOptions` required
-
-配置项。
-
-### `options.`width
-
-`number` optional default: `null`
-
-设置容器宽度。
-
-### `options.`height
-
-`number` optional default: `null`
-
-设置容器高度。
-
-### `options.`map
-
-`MapConfig` required
-
-地图容器配置项。
-
-#### `map.`type
-
-`string` optional default: `'amap'`
-
-地图底图类型，支持以下两种类型：
-
-* amap: 高德地图
-* mapbox: Mapbox 地图
-
-地图底图类型不同时，`map` 下面的有的配置项不相同，比如 `maxZoom`，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。除此之外还有，底图的交互状态配置，`zoomEnable`、`dragEnable`等。各配置项可详见各官网：高德地图 [配置项](https://lbs.amap.com/api/javascript-api/reference/map)；Mapbox 地图 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters)。
-
-#### `map.`token
-
-`string` required
-
-地图服务 token，需服务平台申请。
-
-#### `map.`center
-
-`number[]` optional default: `[0, 0]`
-
-初始中心经纬度。
-
-#### `map.`pitch
-
-`number` optional default: `0`
-
-初始倾角。
-
-#### `map.`rotation
-
-`number` optional default: `0`
-
-初始旋转角度。
-
-#### `map.`zoom
-
-`number` optional default: `0`
-
-初始缩放层级，底图可缩放层级分布为：
-
-* Mapbox （0-24）
-* 高德 （2-19）
-
-#### `map.`minZoom
-
-`number` optional default: `0`
-
-地图最小缩放等级。
-
-#### `map.`maxZoom
-
-`number` optional default: `20`
-
-地图最大缩放等级，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。
-
-#### `map.`style
-
-`string` optional default: `dark`
-
-内置样式:
-
-* dark: 黑暗
-* light: 明亮
-* normal: 普通
-* blank: 无底图
-
-自定义样式:
-
-```js
-{
- style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true';
-}
-```
-
-
-### `options.`antialias
-
-`boolean` optional default: `true`
-
-是否开启抗锯齿。
-
-### `options.`preserveDrawingBuffer
-
-`boolean` optional default: `false`
-
-是否保留缓冲区数据。
-
-### `options.`logo
-
-`bool` optional default: `true`
-
-是否显示 logo。
-
-### `options.`layers
-
-`LayerConfigType[]` optional default: `[]`
-
-图层组配置，图层类型支持 L7Plot 内置的图层。
-
-```js
-{
- layers: [
- {
- name: 'myDotLayer',
- type: 'dotLayer',
- zIndex: 1,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- color: '#ffed11',
- size: 40,
- },
- {
- name: 'myLabelLayer',
- type: 'textLayer',
- zIndex: 2,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- field: 'name',
- },
- ],
-}
-```
-
-### `options.`plots
-
-`PlotConfigType[]` optional default: `[]`
-
-图表组配置，图表类型支持 L7Plot 内置的图表。
-
-```js
-{
- plots: [
- {
- type: 'choropleth',
- zIndex: 1,
- source: {
- data: [],
- joinBy: {
- sourceField: 'code',
- geoField: 'adcode',
- },
- },
- viewLevel: {
- level: 'world',
- adcode: 'all',
- },
- autoFit: true,
- },
- {
- type: 'dot',
- zIndex: 2,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- color: '#1AA9FF',
- tooltip: {
- items: ['name', 'value'],
- },
- },
- ],
-}
-```
-
-### `options.`theme
-
-`string|object` optional default: `'light'`
-
-图表主题，详见 [Theme](/zh/docs/map-api/theme)。
-
-
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-
-
-## 二、属性
-
-### DefaultOptions
-
-`object` **static**
-
-### container
-
-`HTMLDivElement`
-
-渲染的 DOM 容器。
-
-### options
-
-`PlotOptions`
-
-配置项。
-
-### scene
-
-`Scene`
-
-地图场景实例。
-
-### layerGroup
-
-`LayerGroup`
-
-图层组。
-
-### sceneLoaded
-
-`boolean`
-
-地图场景是否加载完成。
-
-### layersLoaded
-
-`boolean`
-
-图层是否加载完成。
-
-### zoomControl
-
-`undefined｜Zoom`
-
-放缩器控件实例。
-
-### scaleControl
-
-`undefined｜Scale`
-
-比例尺控件实例。
-
-
-
-
-
-
-
-## 三、方法
-
-
-
-### changeSize
-
-修改容器大小。
-
-```js
-plot.changeSize(width: number, height: number);
-```
-
-### getScene
-
-获取地图 scene 实例。
-
-```js
-plot.getScene() : Scene;
-```
-
-### getMap
-
-获取 map 实例。
-
-```js
-plot.getMap() : MapboxInstance | AMapInstance;
-```
-
-### addLayer
-
-添加图层。
-
-```js
-plot.addLayer(layer: LayerConfigType | IPlotLayer);
-```
-
-### getLayers
-
-获取所有图层。
-
-```js
-plot.getLayers(): PlotLayer[];
-```
-
-### getLayerByName
-
-根据图层名称获取图层。
-
-```js
-plot.getLayerByName(name: string): PlotLayer | undefined;
-```
-
-### removeLayer
-
-移除图层。
-
-```js
-plot.removeLayer(layer: PlotLayer);
-```
-
-### removeLayerByName
-
-根据图层名称移除图层。
-
-```js
-plot.removeLayerByName(name: string);
-```
-
-### removeAllLayer
-
-移除容器内所有的图层。
-
-```js
-plot.removeAllLayer();
-```
-
-### addPlot
-
-添加图表。
-
-```js
-plot.addPlot(plotConfig: PlotConfigType);
-```
-
-### getPlots
-
-获取所有图表。
-
-```js
-plot.getPlots(): Plot[];
-```
-
-### getPlotByName
-
-根据图表名称获取图表。
-
-```js
-plot.getPlotByName(name: string): Plot | undefined;
-```
-
-### removePlotByName
-
-移除图表。
-
-```js
-plot.removePlotByName(name: string);
-```
-
-### removeAllPlot
-
-移除容器内所有的图表。
-
-```js
-plot.removeAllPlot();
-```
-
-### zoomIn
-
-地图放大一级。
-
-```js
-plot.zoomIn();
-```
-
-### zoomOut
-
-地图缩小一级。
-
-```js
-plot.zoomOut();
-```
-
-### setPitch
-
-设置地图倾角。
-
-```js
-plot.setPitch(pitch: number);
-```
-
-### fitBounds
-
-设置地图缩放范围。
-
-```js
-plot.fitBounds(bound: Bounds);
-```
-
-### addZoomControl
-
-添加地图缩放器控件。
-
-```js
-plot.addZoomControl(options: ZoomControlOptions);
-```
-
-### removeZoomControl
-
-移除地图缩放器控件。
-
-```js
-plot.removeZoomControl();
-```
-
-### addScaleControl
-
-添加地图比例尺控件。
-
-```js
-plot.addScaleControl(options: ScaleControlOptions);
-```
-
-### removeScaleControl
-
-移除地图比例尺控件。
-
-```js
-plot.removeScaleControl();
-```
-
-
-
-
-
-### exportPng
-
-```js
-plot.exportPng(type?: 'png' | 'jpg');
-```
-
-### on
-
-绑定事件。
-
-```js
-plot.on(event: string, callback: Function);
-```
-
-### once
-
-绑定一次事件。
-
-```js
-plot.once(event: string, callback: Function);
-```
-
-### off
-
-解绑事件。
-
-```js
-plot.off(event: string, callback: Function);
-```
-
-### destroy
-
-```js
-plot.destroy();
-```
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-plot.on(event: string, callback: Function);
-```
-
-#### 绑定一次事件
-
-```js
-plot.once(event: string, callback: Function);
-```
-
-#### 解绑事件
-
-```js
-plot.off(event: string, callback: Function);
-```
diff --git a/site/docs/map-api/advanced-plot/index.zh.md b/site/docs/map-api/advanced-plot/index.zh.md
deleted file mode 100644
index 35d02734a..000000000
--- a/site/docs/map-api/advanced-plot/index.zh.md
+++ /dev/null
@@ -1,597 +0,0 @@
----
-title: 高级图表 - Advanced Plot
-order: 9
----
-
-Unstable API
-
-`L7Plot` 是高级图表类，可以组合多个图层以及图表。
-
-```js
-constructor(container: string | HTMLDivElement, options: L7PlotOptions)
-```
-
-## 一、配置
-
-### container
-
-`string|HTMLDivElement` required
-
-图表渲染的 DOM 容器。
-
-### options
-
-`L7PlotOptions` required
-
-配置项。
-
-### `options.`width
-
-`number` optional default: `null`
-
-设置容器宽度。
-
-### `options.`height
-
-`number` optional default: `null`
-
-设置容器高度。
-
-### `options.`map
-
-`MapConfig` required
-
-地图容器配置项。
-
-#### `map.`type
-
-`string` optional default: `'amap'`
-
-地图底图类型，支持以下两种类型：
-
-* amap: 高德地图
-* mapbox: Mapbox 地图
-
-地图底图类型不同时，`map` 下面的有的配置项不相同，比如 `maxZoom`，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。除此之外还有，底图的交互状态配置，`zoomEnable`、`dragEnable`等。各配置项可详见各官网：高德地图 [配置项](https://lbs.amap.com/api/javascript-api/reference/map)；Mapbox 地图 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters)。
-
-#### `map.`token
-
-`string` required
-
-地图服务 token，需服务平台申请。
-
-#### `map.`center
-
-`number[]` optional default: `[0, 0]`
-
-初始中心经纬度。
-
-#### `map.`pitch
-
-`number` optional default: `0`
-
-初始倾角。
-
-#### `map.`rotation
-
-`number` optional default: `0`
-
-初始旋转角度。
-
-#### `map.`zoom
-
-`number` optional default: `0`
-
-初始缩放层级，底图可缩放层级分布为：
-
-* Mapbox （0-24）
-* 高德 （2-19）
-
-#### `map.`minZoom
-
-`number` optional default: `0`
-
-地图最小缩放等级。
-
-#### `map.`maxZoom
-
-`number` optional default: `20`
-
-地图最大缩放等级，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。
-
-#### `map.`style
-
-`string` optional default: `dark`
-
-内置样式:
-
-* dark: 黑暗
-* light: 明亮
-* normal: 普通
-* blank: 无底图
-
-自定义样式:
-
-```js
-{
- style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true';
-}
-```
-
-
-### `options.`antialias
-
-`boolean` optional default: `true`
-
-是否开启抗锯齿。
-
-### `options.`preserveDrawingBuffer
-
-`boolean` optional default: `false`
-
-是否保留缓冲区数据。
-
-### `options.`logo
-
-`bool` optional default: `true`
-
-是否显示 logo。
-
-### `options.`layers
-
-`LayerConfigType[]` optional default: `[]`
-
-图层组配置，图层类型支持 L7Plot 内置的图层。
-
-```js
-{
- layers: [
- {
- name: 'myDotLayer',
- type: 'dotLayer',
- zIndex: 1,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- color: '#ffed11',
- size: 40,
- },
- {
- name: 'myLabelLayer',
- type: 'textLayer',
- zIndex: 2,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- field: 'name',
- },
- ],
-}
-```
-
-### `options.`plots
-
-`PlotConfigType[]` optional default: `[]`
-
-图表组配置，图表类型支持 L7Plot 内置的图表。
-
-```js
-{
- plots: [
- {
- type: 'choropleth',
- zIndex: 1,
- source: {
- data: [],
- joinBy: {
- sourceField: 'code',
- geoField: 'adcode',
- },
- },
- viewLevel: {
- level: 'world',
- adcode: 'all',
- },
- autoFit: true,
- },
- {
- type: 'dot',
- zIndex: 2,
- source: {
- data: data,
- parser: { type: 'json', x: 'lng', y: 'lat' },
- },
- color: '#1AA9FF',
- tooltip: {
- items: ['name', 'value'],
- },
- },
- ],
-}
-```
-
-### `options.`theme
-
-`string|object` optional default: `'light'`
-
-图表主题，详见 [Theme](/zh/docs/map-api/theme)。
-
-
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-
-
-## 二、属性
-
-### DefaultOptions
-
-`object` **static**
-
-### container
-
-`HTMLDivElement`
-
-渲染的 DOM 容器。
-
-### options
-
-`PlotOptions`
-
-配置项。
-
-### scene
-
-`Scene`
-
-地图场景实例。
-
-### layerGroup
-
-`LayerGroup`
-
-图层组。
-
-### sceneLoaded
-
-`boolean`
-
-地图场景是否加载完成。
-
-### layersLoaded
-
-`boolean`
-
-图层是否加载完成。
-
-### zoomControl
-
-`undefined｜Zoom`
-
-放缩器控件实例。
-
-### scaleControl
-
-`undefined｜Scale`
-
-比例尺控件实例。
-
-
-
-
-
-
-
-## 三、方法
-
-
-
-### changeSize
-
-修改容器大小。
-
-```js
-plot.changeSize(width: number, height: number);
-```
-
-### getScene
-
-获取地图 scene 实例。
-
-```js
-plot.getScene() : Scene;
-```
-
-### getMap
-
-获取 map 实例。
-
-```js
-plot.getMap() : MapboxInstance | AMapInstance;
-```
-
-### addLayer
-
-添加图层。
-
-```js
-plot.addLayer(layer: LayerConfigType | IPlotLayer);
-```
-
-### getLayers
-
-获取所有图层。
-
-```js
-plot.getLayers(): PlotLayer[];
-```
-
-### getLayerByName
-
-根据图层名称获取图层。
-
-```js
-plot.getLayerByName(name: string): PlotLayer | undefined;
-```
-
-### removeLayer
-
-移除图层。
-
-```js
-plot.removeLayer(layer: PlotLayer);
-```
-
-### removeLayerByName
-
-根据图层名称移除图层。
-
-```js
-plot.removeLayerByName(name: string);
-```
-
-### removeAllLayer
-
-移除容器内所有的图层。
-
-```js
-plot.removeAllLayer();
-```
-
-### addPlot
-
-添加图表。
-
-```js
-plot.addPlot(plotConfig: PlotConfigType);
-```
-
-### getPlots
-
-获取所有图表。
-
-```js
-plot.getPlots(): Plot[];
-```
-
-### getPlotByName
-
-根据图表名称获取图表。
-
-```js
-plot.getPlotByName(name: string): Plot | undefined;
-```
-
-### removePlotByName
-
-移除图表。
-
-```js
-plot.removePlotByName(name: string);
-```
-
-### removeAllPlot
-
-移除容器内所有的图表。
-
-```js
-plot.removeAllPlot();
-```
-
-### zoomIn
-
-地图放大一级。
-
-```js
-plot.zoomIn();
-```
-
-### zoomOut
-
-地图缩小一级。
-
-```js
-plot.zoomOut();
-```
-
-### setPitch
-
-设置地图倾角。
-
-```js
-plot.setPitch(pitch: number);
-```
-
-### fitBounds
-
-设置地图缩放范围。
-
-```js
-plot.fitBounds(bound: Bounds);
-```
-
-### addZoomControl
-
-添加地图缩放器控件。
-
-```js
-plot.addZoomControl(options: ZoomControlOptions);
-```
-
-### removeZoomControl
-
-移除地图缩放器控件。
-
-```js
-plot.removeZoomControl();
-```
-
-### addScaleControl
-
-添加地图比例尺控件。
-
-```js
-plot.addScaleControl(options: ScaleControlOptions);
-```
-
-### removeScaleControl
-
-移除地图比例尺控件。
-
-```js
-plot.removeScaleControl();
-```
-
-
-
-
-
-### exportPng
-
-```js
-plot.exportPng(type?: 'png' | 'jpg');
-```
-
-### on
-
-绑定事件。
-
-```js
-plot.on(event: string, callback: Function);
-```
-
-### once
-
-绑定一次事件。
-
-```js
-plot.once(event: string, callback: Function);
-```
-
-### off
-
-解绑事件。
-
-```js
-plot.off(event: string, callback: Function);
-```
-
-### destroy
-
-```js
-plot.destroy();
-```
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-plot.on(event: string, callback: Function);
-```
-
-#### 绑定一次事件
-
-```js
-plot.once(event: string, callback: Function);
-```
-
-#### 解绑事件
-
-```js
-plot.off(event: string, callback: Function);
-```
diff --git a/site/docs/map-api/components/label.en.md b/site/docs/map-api/components/label.en.md
deleted file mode 100644
index e0475e41e..000000000
--- a/site/docs/map-api/components/label.en.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Label
-order: 3
----
-
----
-title: 数据标签 - Label
-order: 3
----
-
-## `label.`field
-
-`string` required
-
-映射的标签数据字段。
-
-
-
-## `label.`style
-
-`PointTextLayerStyleOptions` optional
-
-字体样式，PointTextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-## `label.`state
-
-`IStateAttribute` optional
-
-标签交互反馈效果。
-
-### `state.`active
-
-`boolean｜IActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 标签高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 标签高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-### `state.`select
-
-`boolean｜IActiveOption` optional default: `false`
-
-标签 mouseclick 选中高亮效果，开启 mouseclick 标签高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 标签高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
diff --git a/site/docs/map-api/components/label.zh.md b/site/docs/map-api/components/label.zh.md
deleted file mode 100644
index 4076bda80..000000000
--- a/site/docs/map-api/components/label.zh.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: 数据标签 - Label
-order: 3
----
-
-## `label.`field
-
-`string` required
-
-映射的标签数据字段。
-
-
-
-## `label.`style
-
-`PointTextLayerStyleOptions` optional
-
-字体样式，PointTextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-## `label.`state
-
-`IStateAttribute` optional
-
-标签交互反馈效果。
-
-### `state.`active
-
-`boolean｜IActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 标签高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 标签高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-### `state.`select
-
-`boolean｜IActiveOption` optional default: `false`
-
-标签 mouseclick 选中高亮效果，开启 mouseclick 标签高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 标签高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
diff --git a/site/docs/map-api/components/layer-menu.en.md b/site/docs/map-api/components/layer-menu.en.md
deleted file mode 100644
index 759bc0456..000000000
--- a/site/docs/map-api/components/layer-menu.en.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: LayerMenu
-order: 5
----
-
----
-title: 图层列表 - LayerMenu
-order: 5
----
-
-## `layerMenu.`position
-
-`string` optional default: `'topright'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `layerMenu.`collapsed
-
-`boolean` optional default: `true`
-
-默认状态下是否将控件折叠。
-
-## `layerMenu.`autoZIndex
-
-`boolean` optional default: `true`
-
-显示隐藏时是否保持原图层顺序。
-
-## `layerMenu.`hideSingleBase
-
-`boolean` optional default: `false`
-
-当只有一个图层时，控件是否隐藏。
-
-## `layerMenu.`sortLayers
-
-`boolean` optional default: `false`
-
-是否对图层列表进行排序。
-
-## `layerMenu.`sortFunction
-
-`Function: (a.layer, b.layer, a.name, b.name) => number` optional
-
-自定义图层列表[排序](https://developer.mozilla.org/docs/map-Web/JavaScript/Reference/Global_Objects/Array/sort)函数。
diff --git a/site/docs/map-api/components/layer-menu.zh.md b/site/docs/map-api/components/layer-menu.zh.md
deleted file mode 100644
index 2c6a0c19f..000000000
--- a/site/docs/map-api/components/layer-menu.zh.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: 图层列表 - LayerMenu
-order: 5
----
-
-## `layerMenu.`position
-
-`string` optional default: `'topright'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `layerMenu.`collapsed
-
-`boolean` optional default: `true`
-
-默认状态下是否将控件折叠。
-
-## `layerMenu.`autoZIndex
-
-`boolean` optional default: `true`
-
-显示隐藏时是否保持原图层顺序。
-
-## `layerMenu.`hideSingleBase
-
-`boolean` optional default: `false`
-
-当只有一个图层时，控件是否隐藏。
-
-## `layerMenu.`sortLayers
-
-`boolean` optional default: `false`
-
-是否对图层列表进行排序。
-
-## `layerMenu.`sortFunction
-
-`Function: (a.layer, b.layer, a.name, b.name) => number` optional
-
-自定义图层列表[排序](https://developer.mozilla.org/docs/map-Web/JavaScript/Reference/Global_Objects/Array/sort)函数。
diff --git a/site/docs/map-api/components/legend.en.md b/site/docs/map-api/components/legend.en.md
deleted file mode 100644
index 436b43f68..000000000
--- a/site/docs/map-api/components/legend.en.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Legend
-order: 0
----
-
----
-title: 图例 - Legend
-order: 0
----
-
-## `legend.`type
-
-`'category'|'continue'` optional
-
-图例类型，支持以下类型图例：
-
-* 'category'：分类性图例
-* 'continue'：连续性图例
-
-## `legend.`position
-
-`string` optional default: `'bottomleft'`
-
-图例控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `legend.`title
-
-`string` optional default: `''`
-
-图例标题内容。
-
-## `legend.`className
-
-`string` optional default: `''`
-
-DOM 容器自定义 className 。
-
-## `legend.`domStyles
-
-`object` optional default: `{}`
-
-自定义 legend 样式。
-
-分类图例 CSS 样式自定义：
-
-```ts
-{
- domStyles: {
- 'l7plot-legend__category'?: CSSProperties;
- 'l7plot-legend__title'?: CSSProperties;
- 'l7plot-legend__category-list'?: CSSProperties;
- 'l7plot-legend__list-item'?: CSSProperties;
- 'l7plot-legend__category-marker'?: CSSProperties;
- 'l7plot-legend__category-value'?: CSSProperties;
- }
-}
-```
-
-连续图例 CSS 样式自定义：
-
-```ts
-{
- domStyles: {
- 'l7plot-legend__continue'?: CSSProperties;
- 'l7plot-legend__title'?: CSSProperties;
- 'l7plot-legend__ribbon'?: CSSProperties;
- 'l7plot-legend__gradient-bar'?: CSSProperties;
- 'l7plot-legend__value-range'?: CSSProperties;
- }
-}
-```
-
-## `legend.`items
-
-`CategoryLegendListItem[]` optional
-
-适用于 分类图例，自定义配置图例项的内容。*CategoryLegendListItem* 配置如下：
-
-| 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
-| ------ | ------ | -------- | ------ | ---------------- |
-| id | string | optional | - | 唯一值，用于查找 |
-| color | string | required | - | 颜色 |
-| value | any | required | - | 值 |
-
-## `legend.`min
-
-`number` optional
-
-适用于 连续图例，范围的最小值。
-
-## `legend.`max
-
-`number` optional
-
-适用于 连续图例，范围的最大值。
-
-## `legend.`colors
-
-`string[]` optional
-
-适用于 连续图例，自定义色带。
-
-## `legend.`customContent
-
-`CategoryLegendCustomContent|ContinueLegendCustomContent` optional
-
-* 分类图例 *CategoryLegendCustomContent*: `(title: string, items: ILegendListItem[]) => stringHTML | HTMLElement`
-* 连续图例 *ContinueLegendCustomContent*: `(title: string, min: number, max: number, colors: string[]) => stringHTML | HTMLElement`
-
-自定义 legend 内容，注意 是 [HTMLElement](https://developer.mozilla.org/zh-CN/docs/map-Web/API/HTMLElement) 或拼接好的 HTML 字符串，不是纯文本类型。
-
-```js
-customContent (title: string, items: ILegendListItem[]) {
- const container = document.createElement('div');
- container.innerHTML = '内容'
- return container;
-}
-```
diff --git a/site/docs/map-api/components/legend.zh.md b/site/docs/map-api/components/legend.zh.md
deleted file mode 100644
index 14552380e..000000000
--- a/site/docs/map-api/components/legend.zh.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: 图例 - Legend
-order: 0
----
-
-## `legend.`type
-
-`'category'|'continue'` optional
-
-图例类型，支持以下类型图例：
-
-* 'category'：分类性图例
-* 'continue'：连续性图例
-
-## `legend.`position
-
-`string` optional default: `'bottomleft'`
-
-图例控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `legend.`title
-
-`string` optional default: `''`
-
-图例标题内容。
-
-## `legend.`className
-
-`string` optional default: `''`
-
-DOM 容器自定义 className 。
-
-## `legend.`domStyles
-
-`object` optional default: `{}`
-
-自定义 legend 样式。
-
-分类图例 CSS 样式自定义：
-
-```ts
-{
- domStyles: {
- 'l7plot-legend__category'?: CSSProperties;
- 'l7plot-legend__title'?: CSSProperties;
- 'l7plot-legend__category-list'?: CSSProperties;
- 'l7plot-legend__list-item'?: CSSProperties;
- 'l7plot-legend__category-marker'?: CSSProperties;
- 'l7plot-legend__category-value'?: CSSProperties;
- }
-}
-```
-
-连续图例 CSS 样式自定义：
-
-```ts
-{
- domStyles: {
- 'l7plot-legend__continue'?: CSSProperties;
- 'l7plot-legend__title'?: CSSProperties;
- 'l7plot-legend__ribbon'?: CSSProperties;
- 'l7plot-legend__gradient-bar'?: CSSProperties;
- 'l7plot-legend__value-range'?: CSSProperties;
- }
-}
-```
-
-## `legend.`items
-
-`CategoryLegendListItem[]` optional
-
-适用于 分类图例，自定义配置图例项的内容。*CategoryLegendListItem* 配置如下：
-
-| 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
-| ------ | ------ | -------- | ------ | ---------------- |
-| id | string | optional | - | 唯一值，用于查找 |
-| color | string | required | - | 颜色 |
-| value | any | required | - | 值 |
-
-## `legend.`min
-
-`number` optional
-
-适用于 连续图例，范围的最小值。
-
-## `legend.`max
-
-`number` optional
-
-适用于 连续图例，范围的最大值。
-
-## `legend.`colors
-
-`string[]` optional
-
-适用于 连续图例，自定义色带。
-
-## `legend.`customContent
-
-`CategoryLegendCustomContent|ContinueLegendCustomContent` optional
-
-* 分类图例 *CategoryLegendCustomContent*: `(title: string, items: ILegendListItem[]) => stringHTML | HTMLElement`
-* 连续图例 *ContinueLegendCustomContent*: `(title: string, min: number, max: number, colors: string[]) => stringHTML | HTMLElement`
-
-自定义 legend 内容，注意 是 [HTMLElement](https://developer.mozilla.org/zh-CN/docs/map-Web/API/HTMLElement) 或拼接好的 HTML 字符串，不是纯文本类型。
-
-```js
-customContent (title: string, items: ILegendListItem[]) {
- const container = document.createElement('div');
- container.innerHTML = '内容'
- return container;
-}
-```
diff --git a/site/docs/map-api/components/scale.en.md b/site/docs/map-api/components/scale.en.md
deleted file mode 100644
index 1eebf300f..000000000
--- a/site/docs/map-api/components/scale.en.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Scale
-order: 2
----
-
----
-title: 比例尺 - Scale
-order: 2
----
-
-## `scale.`position
-
-`string` optional default: `'bottomleft'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `scale.`maxWidth
-
-`number` optional default: `100`
-
-控件的最大宽度，单位 `px`。
-
-## `scale.`updateWhenIdle
-
-`boolean` optional default: `false`
-
-是否地图 move 过程中更新比例尺，否则 moveend 更新。
-
-## `scale.`metric
-
-`boolean` optional default: `true`
-
-是否显示公制刻度线（m/km）。
-
-## `scale.`metric
-
-`boolean` optional default: `false`
-
-是否显示英制刻度线（mi/ft）。
diff --git a/site/docs/map-api/components/scale.zh.md b/site/docs/map-api/components/scale.zh.md
deleted file mode 100644
index fc93c3a80..000000000
--- a/site/docs/map-api/components/scale.zh.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 比例尺 - Scale
-order: 2
----
-
-## `scale.`position
-
-`string` optional default: `'bottomleft'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `scale.`maxWidth
-
-`number` optional default: `100`
-
-控件的最大宽度，单位 `px`。
-
-## `scale.`updateWhenIdle
-
-`boolean` optional default: `false`
-
-是否地图 move 过程中更新比例尺，否则 moveend 更新。
-
-## `scale.`metric
-
-`boolean` optional default: `true`
-
-是否显示公制刻度线（m/km）。
-
-## `scale.`metric
-
-`boolean` optional default: `false`
-
-是否显示英制刻度线（mi/ft）。
diff --git a/site/docs/map-api/components/tooltip.en.md b/site/docs/map-api/components/tooltip.en.md
deleted file mode 100644
index 447a597e3..000000000
--- a/site/docs/map-api/components/tooltip.en.md
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: Tooltip
-order: 4
----
-
----
-title: 悬浮提示 - Tooltip
-order: 4
----
-
-## 配置属性
-
-### `tooltip.`title
-
-`string` optional default: `''`
-
-tooltip 标题内容。
-
-### `tooltip.`customTitle
-
-`Function: (data: any) => string` optional
-
-自定义 tooltip 标题内容。
-
-### `tooltip.`showTitle
-
-`boolean` optional default: `true`
-
-是否显示标题。
-
-### `tooltip.`trigger
-
-`string` optional default: `'mousemove'`
-
-触发图层事件显示 tooltip ，有以下触发事件方式：
-
-* mousemove
-* click
-
-### `tooltip.`items
-
-`string[]｜TooltipItem` optional default: `[]`
-
-tooltip 显示内容关联字段。
-
-### `items.`field
-
-`string` required
-
-关联字段。
-
-### `items.`alias
-
-`string` optional default: `''`
-
-关联字段别名。
-
-### `items.`customValue
-
-`Function: (value: any, data: any) => any` optional
-
-自定义关联字取值。
-
-### `tooltip.`className
-
-`string` optional default: `''`
-
-tooltip 自定义 className 。
-
-### `tooltip.`anchor
-
-`string` optional default: `'top-left'`
-
-tooltip 相对锚点的位置，支持以下相对锚点的位置：
-
-* 'center'
-* 'top'
-* 'top-left'
-* 'top-right'
-* 'bottom'
-* 'bottom-left'
-* 'left'
-* 'right'
-
-### `tooltip.`offsets
-
-`number[]` optional default: `[15, 0]`
-
-tooltip 相对锚点的偏移量。
-
-### `tooltip.`customContent
-
-`Function: (title: string, items: TooltipListItem[]) => stringHTML | HTMLElement` optional
-
-自定义 tooltip 内容，注意 是 [HTMLElement](https://developer.mozilla.org/zh-CN/docs/map-Web/API/HTMLElement) 或拼接好的 HTML 字符串，不是纯文本类型。
-
-```js
-customContent (title: string, items: TooltipListItem[]) {
- const container = document.createElement('div');
- container.innerHTML = '内容'
- return container;
-}
-```
-
-### `tooltip.`domStyles
-
-`object` optional default: `{}`
-
-自定义 tooltip 样式，CSS 样式自定义如下：
-
-```ts
-{
- domStyles: {
- 'l7plot-tooltip'?: CSSProperties;
- 'l7plot-tooltip__title'?: CSSProperties;
- 'l7plot-tooltip__list'?: CSSProperties;
- 'l7plot-tooltip__list-item'?: CSSProperties;
- 'l7plot-tooltip__name'?: CSSProperties;
- 'l7plot-tooltip__value'?: CSSProperties;
- }
-}
-```
-
-### `tooltip.`showComponent
-
-`boolean` optional default: `true`
-
-是否显示 tooltip 组件，一般用于通过监听 tooltip 事件自实现 tooltip 组件。
-
-## 组件事件
-
-### 显示
-
-tooltip 显示时触发
-
-```js
-plot.on('tooltip:show', (event: TooltipEvent) => void);
-```
-
-### 隐藏
-
-tooltip 隐藏时触发
-
-```js
-plot.on('tooltip:hide', () => void);
-```
-
-### 改变
-
-tooltip 位置及内容发生改变时触发
-
-```js
-plot.on('tooltip:change', (event: TooltipEvent) => void);
-```
diff --git a/site/docs/map-api/components/tooltip.zh.md b/site/docs/map-api/components/tooltip.zh.md
deleted file mode 100644
index 6d35c7b5a..000000000
--- a/site/docs/map-api/components/tooltip.zh.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: 悬浮提示 - Tooltip
-order: 4
----
-
-## 配置属性
-
-### `tooltip.`title
-
-`string` optional default: `''`
-
-tooltip 标题内容。
-
-### `tooltip.`customTitle
-
-`Function: (data: any) => string` optional
-
-自定义 tooltip 标题内容。
-
-### `tooltip.`showTitle
-
-`boolean` optional default: `true`
-
-是否显示标题。
-
-### `tooltip.`trigger
-
-`string` optional default: `'mousemove'`
-
-触发图层事件显示 tooltip ，有以下触发事件方式：
-
-* mousemove
-* click
-
-### `tooltip.`items
-
-`string[]｜TooltipItem` optional default: `[]`
-
-tooltip 显示内容关联字段。
-
-### `items.`field
-
-`string` required
-
-关联字段。
-
-### `items.`alias
-
-`string` optional default: `''`
-
-关联字段别名。
-
-### `items.`customValue
-
-`Function: (value: any, data: any) => any` optional
-
-自定义关联字取值。
-
-### `tooltip.`className
-
-`string` optional default: `''`
-
-tooltip 自定义 className 。
-
-### `tooltip.`anchor
-
-`string` optional default: `'top-left'`
-
-tooltip 相对锚点的位置，支持以下相对锚点的位置：
-
-* 'center'
-* 'top'
-* 'top-left'
-* 'top-right'
-* 'bottom'
-* 'bottom-left'
-* 'left'
-* 'right'
-
-### `tooltip.`offsets
-
-`number[]` optional default: `[15, 0]`
-
-tooltip 相对锚点的偏移量。
-
-### `tooltip.`customContent
-
-`Function: (title: string, items: TooltipListItem[]) => stringHTML | HTMLElement` optional
-
-自定义 tooltip 内容，注意 是 [HTMLElement](https://developer.mozilla.org/zh-CN/docs/map-Web/API/HTMLElement) 或拼接好的 HTML 字符串，不是纯文本类型。
-
-```js
-customContent (title: string, items: TooltipListItem[]) {
- const container = document.createElement('div');
- container.innerHTML = '内容'
- return container;
-}
-```
-
-### `tooltip.`domStyles
-
-`object` optional default: `{}`
-
-自定义 tooltip 样式，CSS 样式自定义如下：
-
-```ts
-{
- domStyles: {
- 'l7plot-tooltip'?: CSSProperties;
- 'l7plot-tooltip__title'?: CSSProperties;
- 'l7plot-tooltip__list'?: CSSProperties;
- 'l7plot-tooltip__list-item'?: CSSProperties;
- 'l7plot-tooltip__name'?: CSSProperties;
- 'l7plot-tooltip__value'?: CSSProperties;
- }
-}
-```
-
-### `tooltip.`showComponent
-
-`boolean` optional default: `true`
-
-是否显示 tooltip 组件，一般用于通过监听 tooltip 事件自实现 tooltip 组件。
-
-## 组件事件
-
-### 显示
-
-tooltip 显示时触发
-
-```js
-plot.on('tooltip:show', (event: TooltipEvent) => void);
-```
-
-### 隐藏
-
-tooltip 隐藏时触发
-
-```js
-plot.on('tooltip:hide', () => void);
-```
-
-### 改变
-
-tooltip 位置及内容发生改变时触发
-
-```js
-plot.on('tooltip:change', (event: TooltipEvent) => void);
-```
diff --git a/site/docs/map-api/components/zoom.en.md b/site/docs/map-api/components/zoom.en.md
deleted file mode 100644
index 46f4d2407..000000000
--- a/site/docs/map-api/components/zoom.en.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Zoom
-order: 1
----
-
----
-title: 缩放器 - Zoom
-order: 1
----
-
-## `zoom.`position
-
-`string` optional default: `'topleft'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `zoom.`zoomInText
-
-`string` optional default: `'+'`
-
-放大按钮文本。
-
-## `zoom.`zoomInTitle
-
-`string` optional default: `Zoom in`
-
-放大按钮名称。
-
-## `zoom.`zoomOutText
-
-`string` optional default: `'−'`
-
-缩小按钮文本。
-
-## `zoom.`zoomOutTitle
-
-`string` optional default: `Zoom out`
-
-缩小按钮名称。
diff --git a/site/docs/map-api/components/zoom.zh.md b/site/docs/map-api/components/zoom.zh.md
deleted file mode 100644
index abcf526ff..000000000
--- a/site/docs/map-api/components/zoom.zh.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 缩放器 - Zoom
-order: 1
----
-
-## `zoom.`position
-
-`string` optional default: `'topleft'`
-
-控件的位置，支持以下定位位置：
-
-* 'topright'
-* 'topleft'
-* 'bottomright'
-* 'bottomleft'
-
-## `zoom.`zoomInText
-
-`string` optional default: `'+'`
-
-放大按钮文本。
-
-## `zoom.`zoomInTitle
-
-`string` optional default: `Zoom in`
-
-放大按钮名称。
-
-## `zoom.`zoomOutText
-
-`string` optional default: `'−'`
-
-缩小按钮文本。
-
-## `zoom.`zoomOutTitle
-
-`string` optional default: `Zoom out`
-
-缩小按钮名称。
diff --git a/site/docs/map-api/composite-layers/bubble-layer.en.md b/site/docs/map-api/composite-layers/bubble-layer.en.md
deleted file mode 100644
index 1ef57c805..000000000
--- a/site/docs/map-api/composite-layers/bubble-layer.en.md
+++ /dev/null
@@ -1,586 +0,0 @@
----
-title: BubbleLayer
-order: 5
----
-
----
-title: 气泡图层 - BubbleLayer
-order: 5
----
-
-Composite Layer
-
-`BubbleLayer` 用于点数据图层展示，支持描边、文本标注、多选等功能。
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`radius
-
-`number|SizeStyleAttribute|Function` optional
-
-气泡半径大小
-
-```js
-{ radius: 12, }
-```
-
-#### `radius.`field
-
-`string` optional
-
-半径大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- radius: { field: 's' },
-}
-```
-
-#### `radius.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- radius: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `radius.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- radius: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-### `options.`fillColor
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-填充颜色。
-
-```js
-{ fillColor: 'red', }
-```
-
-#### `fillColor.`field
-
-`string` optional
-
-填充颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- fillColor: { field: 'c', }
-}
-```
-
-#### `fillColor.`value
-
-`string|string[]|Function` optional
-
-填充颜色值映射值。
-
-```js
-{
- fillColor: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `fillColor.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- fillColor: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-### `options.`opacity
-
-`number` optional default: `1`
-
-填充透明度。
-
-### `options.`lineWidth
-
-`number` optional default: `1`
-
-描边线宽。
-
-### `options.`strokeColor
-
-`string` optional default: `#fff`
-
-描边颜色。
-
-### `options.`lineOpacity
-
-`number` optional default: `1`
-
-描边透明度。
-
-### `options.`label
-
-`TextLayerOptions` optional
-
-标签标注。
-
-#### `label.`field
-
-`string` optional
-
-标签值映射关联字段。
-
-#### `label.`visible
-
-`boolean` optional default: `true`
-
-标签是否可见。
-
-#### `label.`style
-
-标签样式详细配置见 [TextLayerStyleOptions](/zh/docs/map-api/composite-layers/text-layer#code-classlanguage-textoptionscodestyle)。
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜BubbleLayerActiveOptions` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1.5,
- lineOpacity: 1,
- },
- }
-}
-```
-
-BubbleLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fillColor | 填充颜色 | `false｜string` | `false` | optional |
-| strokeColor | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `1` | optional |
-
-#### `state.`select
-
-`boolean｜BubbleLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1.5,
- lineOpacity: 1,
- }
- }
-}
-```
-
-
-
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-### setActive
-
-设置图层高亮状态。
-
-```js
-layer.setActive(field: string, value: number | string);
-```
-
-### setSelect
-
-设置图层选中状态。
-
-```js
-layer.setSelect(field: string, value: number | string);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
-
-
-#### 选择事件
-
-| 事件名 | 类型 | 描述 |
-| -------- | ------------ | ---------------------------- |
-| select | 选择事件 | 鼠标点击选中图层要素事件 |
-| unselect | 取消选择事件 | 鼠标点击取消选中图层要素事件 |
diff --git a/site/docs/map-api/composite-layers/bubble-layer.zh.md b/site/docs/map-api/composite-layers/bubble-layer.zh.md
deleted file mode 100644
index ecb26737c..000000000
--- a/site/docs/map-api/composite-layers/bubble-layer.zh.md
+++ /dev/null
@@ -1,581 +0,0 @@
----
-title: 气泡图层 - BubbleLayer
-order: 5
----
-
-Composite Layer
-
-`BubbleLayer` 用于点数据图层展示，支持描边、文本标注、多选等功能。
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`radius
-
-`number|SizeStyleAttribute|Function` optional
-
-气泡半径大小
-
-```js
-{ radius: 12, }
-```
-
-#### `radius.`field
-
-`string` optional
-
-半径大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- radius: { field: 's' },
-}
-```
-
-#### `radius.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- radius: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `radius.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- radius: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-### `options.`fillColor
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-填充颜色。
-
-```js
-{ fillColor: 'red', }
-```
-
-#### `fillColor.`field
-
-`string` optional
-
-填充颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- fillColor: { field: 'c', }
-}
-```
-
-#### `fillColor.`value
-
-`string|string[]|Function` optional
-
-填充颜色值映射值。
-
-```js
-{
- fillColor: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `fillColor.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- fillColor: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-### `options.`opacity
-
-`number` optional default: `1`
-
-填充透明度。
-
-### `options.`lineWidth
-
-`number` optional default: `1`
-
-描边线宽。
-
-### `options.`strokeColor
-
-`string` optional default: `#fff`
-
-描边颜色。
-
-### `options.`lineOpacity
-
-`number` optional default: `1`
-
-描边透明度。
-
-### `options.`label
-
-`TextLayerOptions` optional
-
-标签标注。
-
-#### `label.`field
-
-`string` optional
-
-标签值映射关联字段。
-
-#### `label.`visible
-
-`boolean` optional default: `true`
-
-标签是否可见。
-
-#### `label.`style
-
-标签样式详细配置见 [TextLayerStyleOptions](/zh/docs/map-api/composite-layers/text-layer#code-classlanguage-textoptionscodestyle)。
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜BubbleLayerActiveOptions` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1.5,
- lineOpacity: 1,
- },
- }
-}
-```
-
-BubbleLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fillColor | 填充颜色 | `false｜string` | `false` | optional |
-| strokeColor | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `1` | optional |
-
-#### `state.`select
-
-`boolean｜BubbleLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1.5,
- lineOpacity: 1,
- }
- }
-}
-```
-
-
-
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-### setActive
-
-设置图层高亮状态。
-
-```js
-layer.setActive(field: string, value: number | string);
-```
-
-### setSelect
-
-设置图层选中状态。
-
-```js
-layer.setSelect(field: string, value: number | string);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
-
-
-#### 选择事件
-
-| 事件名 | 类型 | 描述 |
-| -------- | ------------ | ---------------------------- |
-| select | 选择事件 | 鼠标点击选中图层要素事件 |
-| unselect | 取消选择事件 | 鼠标点击取消选中图层要素事件 |
diff --git a/site/docs/map-api/composite-layers/choropleth-layer.en.md b/site/docs/map-api/composite-layers/choropleth-layer.en.md
deleted file mode 100644
index f1a6cd628..000000000
--- a/site/docs/map-api/composite-layers/choropleth-layer.en.md
+++ /dev/null
@@ -1,567 +0,0 @@
----
-title: ChoroplethLayer
-order: 6
----
-
----
-title: 区域图层 - ChoroplethLayer
-order: 6
----
-
-Composite Layer
-
-`ChoroplethLayer` 用于面数据图层展示，支持描边、文本标注、多选等功能。
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`fillColor
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-填充颜色。
-
-```js
-{ fillColor: 'red', }
-```
-
-#### `fillColor.`field
-
-`string` optional
-
-填充颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- fillColor: { field: 'c', }
-}
-```
-
-#### `fillColor.`value
-
-`string|string[]|Function` optional
-
-填充颜色值映射值。
-
-```js
-{
- fillColor: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `fillColor.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- fillColor: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-### `options.`opacity
-
-`number` optional default: `1`
-
-填充透明度。
-
-### `options.`lineWidth
-
-`number` optional default: `1`
-
-描边线宽。
-
-### `options.`strokeColor
-
-`string` optional default: `#fff`
-
-描边颜色。
-
-### `options.`lineOpacity
-
-`number` optional default: `1`
-
-描边透明度。
-
-### `options.`lineType
-
-`‘solid’｜'dash'` optional default: `‘solid’`
-
-描边线类型，支持实线与虚线。
-
-### `options.`lineDash
-
-`[number, number]` optional
-
-描边的虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-### `options.`label
-
-`TextLayerOptions` optional
-
-标签标注。
-
-#### `label.`field
-
-`string` optional
-
-标签值映射关联字段。
-
-#### `label.`visible
-
-`boolean` optional default: `true`
-
-标签是否可见。
-
-#### `label.`style
-
-标签样式详细配置见 [TextLayerStyleOptions](/zh/docs/map-api/composite-layers/text-layer#code-classlanguage-textoptionscodestyle)。
-
-### `options.`state
-
-`object` optional
-
-区域面交互反馈效果。
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜ChoroplethLayerActiveOptions` optional default: `false`
-
-ChoroplethLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fillColor | 填充颜色 | `false｜string` | `false` | optional |
-| strokeColor | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1` | optional |
-| lineOpacity | 描边透明度 | `number` | `1` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
-
-
-
-
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-### setActive
-
-设置图层高亮状态。
-
-```js
-layer.setActive(field: string, value: number | string);
-```
-
-### setSelect
-
-设置图层选中状态。
-
-```js
-layer.setSelect(field: string, value: number | string);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
-
-
-#### 选择事件
-
-| 事件名 | 类型 | 描述 |
-| -------- | ------------ | ---------------------------- |
-| select | 选择事件 | 鼠标点击选中图层要素事件 |
-| unselect | 取消选择事件 | 鼠标点击取消选中图层要素事件 |
diff --git a/site/docs/map-api/composite-layers/choropleth-layer.zh.md b/site/docs/map-api/composite-layers/choropleth-layer.zh.md
deleted file mode 100644
index 17576fcae..000000000
--- a/site/docs/map-api/composite-layers/choropleth-layer.zh.md
+++ /dev/null
@@ -1,562 +0,0 @@
----
-title: 区域图层 - ChoroplethLayer
-order: 6
----
-
-Composite Layer
-
-`ChoroplethLayer` 用于面数据图层展示，支持描边、文本标注、多选等功能。
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`fillColor
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-填充颜色。
-
-```js
-{ fillColor: 'red', }
-```
-
-#### `fillColor.`field
-
-`string` optional
-
-填充颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- fillColor: { field: 'c', }
-}
-```
-
-#### `fillColor.`value
-
-`string|string[]|Function` optional
-
-填充颜色值映射值。
-
-```js
-{
- fillColor: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `fillColor.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- fillColor: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-### `options.`opacity
-
-`number` optional default: `1`
-
-填充透明度。
-
-### `options.`lineWidth
-
-`number` optional default: `1`
-
-描边线宽。
-
-### `options.`strokeColor
-
-`string` optional default: `#fff`
-
-描边颜色。
-
-### `options.`lineOpacity
-
-`number` optional default: `1`
-
-描边透明度。
-
-### `options.`lineType
-
-`‘solid’｜'dash'` optional default: `‘solid’`
-
-描边线类型，支持实线与虚线。
-
-### `options.`lineDash
-
-`[number, number]` optional
-
-描边的虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-### `options.`label
-
-`TextLayerOptions` optional
-
-标签标注。
-
-#### `label.`field
-
-`string` optional
-
-标签值映射关联字段。
-
-#### `label.`visible
-
-`boolean` optional default: `true`
-
-标签是否可见。
-
-#### `label.`style
-
-标签样式详细配置见 [TextLayerStyleOptions](/zh/docs/map-api/composite-layers/text-layer#code-classlanguage-textoptionscodestyle)。
-
-### `options.`state
-
-`object` optional
-
-区域面交互反馈效果。
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜ChoroplethLayerActiveOptions` optional default: `false`
-
-ChoroplethLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fillColor | 填充颜色 | `false｜string` | `false` | optional |
-| strokeColor | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1` | optional |
-| lineOpacity | 描边透明度 | `number` | `1` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
-
-
-
-
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-### setActive
-
-设置图层高亮状态。
-
-```js
-layer.setActive(field: string, value: number | string);
-```
-
-### setSelect
-
-设置图层选中状态。
-
-```js
-layer.setSelect(field: string, value: number | string);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
-
-
-#### 选择事件
-
-| 事件名 | 类型 | 描述 |
-| -------- | ------------ | ---------------------------- |
-| select | 选择事件 | 鼠标点击选中图层要素事件 |
-| unselect | 取消选择事件 | 鼠标点击取消选中图层要素事件 |
diff --git a/site/docs/map-api/composite-layers/heatmap-layer.en.md b/site/docs/map-api/composite-layers/heatmap-layer.en.md
deleted file mode 100644
index c26d367fc..000000000
--- a/site/docs/map-api/composite-layers/heatmap-layer.en.md
+++ /dev/null
@@ -1,529 +0,0 @@
----
-title: HeatmapLayer
-order: 4
----
-
----
-title: 热力图层 - HeatmapLayer
-order: 4
----
-
-Core Layer
-
-`HeatmapLayer` 是基于 [L7-HeatmapLayer](https://l7.antv.vision/zh/docs/map-api/heatmap_layer/heatmap) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-支持三种热力类型，普通热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-蜂窝热力支持：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-网格热力支持：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions|GridHeatmapLayerStyleOptions` optional
-
-普通热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ------------ | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| rampColors | 热力色带 | `RampColors` | | optional |
-
-热力色带，RampColors 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------- | ---------- | ------ | -------- |
-| colors | 颜色 | `string[]` | | required |
-| positions | 热力映射值 | `number[]` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- rampColors: {
- colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
- positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
- },
- }
-}
-```
-
-网格/蜂窝热力样式，GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/heatmap-layer.zh.md b/site/docs/map-api/composite-layers/heatmap-layer.zh.md
deleted file mode 100644
index 6a5f1073b..000000000
--- a/site/docs/map-api/composite-layers/heatmap-layer.zh.md
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: 热力图层 - HeatmapLayer
-order: 4
----
-
-Core Layer
-
-`HeatmapLayer` 是基于 [L7-HeatmapLayer](https://l7.antv.vision/zh/docs/map-api/heatmap_layer/heatmap) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-支持三种热力类型，普通热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-蜂窝热力支持：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-网格热力支持：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions|GridHeatmapLayerStyleOptions` optional
-
-普通热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ------------ | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| rampColors | 热力色带 | `RampColors` | | optional |
-
-热力色带，RampColors 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------- | ---------- | ------ | -------- |
-| colors | 颜色 | `string[]` | | required |
-| positions | 热力映射值 | `number[]` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- rampColors: {
- colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
- positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
- },
- }
-}
-```
-
-网格/蜂窝热力样式，GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/line-layer.en.md b/site/docs/map-api/composite-layers/line-layer.en.md
deleted file mode 100644
index c2fdb9a39..000000000
--- a/site/docs/map-api/composite-layers/line-layer.en.md
+++ /dev/null
@@ -1,566 +0,0 @@
----
-title: LineLayer
-order: 1
----
-
----
-title: 线图层 - LineLayer
-order: 1
----
-
-Core Layer
-
-`LineLayer` 是基于 [L7-LineLayer](https://l7.antv.vision/zh/docs/map-api/line_layer/linelayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'line'`
-
-除直线外还支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'line', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LineLayerStyleOptions` optional
-
-线样式，LineLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/line-layer.zh.md b/site/docs/map-api/composite-layers/line-layer.zh.md
deleted file mode 100644
index 977ddc191..000000000
--- a/site/docs/map-api/composite-layers/line-layer.zh.md
+++ /dev/null
@@ -1,561 +0,0 @@
----
-title: 线图层 - LineLayer
-order: 1
----
-
-Core Layer
-
-`LineLayer` 是基于 [L7-LineLayer](https://l7.antv.vision/zh/docs/map-api/line_layer/linelayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'line'`
-
-除直线外还支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'line', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LineLayerStyleOptions` optional
-
-线样式，LineLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/point-layer.en.md b/site/docs/map-api/composite-layers/point-layer.en.md
deleted file mode 100644
index d7bc483d0..000000000
--- a/site/docs/map-api/composite-layers/point-layer.en.md
+++ /dev/null
@@ -1,641 +0,0 @@
----
-title: PointLayer
-order: 0
----
-
----
-title: 点图层 - PointLayer
-order: 0
----
-
-Core Layer
-
-`PointLayer` 是基于 [L7-PointLayer](https://l7.antv.vision/zh/docs/map-api/point_layer/pointlayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|ShapeStyleAttribute|Function` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/point-layer.zh.md b/site/docs/map-api/composite-layers/point-layer.zh.md
deleted file mode 100644
index 4123e233e..000000000
--- a/site/docs/map-api/composite-layers/point-layer.zh.md
+++ /dev/null
@@ -1,636 +0,0 @@
----
-title: 点图层 - PointLayer
-order: 0
----
-
-Core Layer
-
-`PointLayer` 是基于 [L7-PointLayer](https://l7.antv.vision/zh/docs/map-api/point_layer/pointlayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|ShapeStyleAttribute|Function` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/polygon-layer.en.md b/site/docs/map-api/composite-layers/polygon-layer.en.md
deleted file mode 100644
index e8ec5bbd7..000000000
--- a/site/docs/map-api/composite-layers/polygon-layer.en.md
+++ /dev/null
@@ -1,550 +0,0 @@
----
-title: PolygonLayer
-order: 2
----
-
----
-title: 面图层 - PolygonLayer
-order: 1
----
-
-Core Layer
-
-`PolygonLayer` 是基于 [L7-PolygonLayer](https://l7.antv.vision/zh/docs/map-api/polygon_layer/polygonlayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'fill'`
-
-内置两种 shape：
-
-* 2D 填充面：`'fill'`
-* 3D 立方体：`'extrude'`
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PolygonLayerStyleOptions` optional
-
-区域样式，PolygonLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | ------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/polygon-layer.zh.md b/site/docs/map-api/composite-layers/polygon-layer.zh.md
deleted file mode 100644
index 08e4cef8e..000000000
--- a/site/docs/map-api/composite-layers/polygon-layer.zh.md
+++ /dev/null
@@ -1,545 +0,0 @@
----
-title: 面图层 - PolygonLayer
-order: 1
----
-
-Core Layer
-
-`PolygonLayer` 是基于 [L7-PolygonLayer](https://l7.antv.vision/zh/docs/map-api/polygon_layer/polygonlayer) 封装的配置式 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'fill'`
-
-内置两种 shape：
-
-* 2D 填充面：`'fill'`
-* 3D 立方体：`'extrude'`
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PolygonLayerStyleOptions` optional
-
-区域样式，PolygonLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | ------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/text-layer.en.md b/site/docs/map-api/composite-layers/text-layer.en.md
deleted file mode 100644
index c4210e6ea..000000000
--- a/site/docs/map-api/composite-layers/text-layer.en.md
+++ /dev/null
@@ -1,405 +0,0 @@
----
-title: 文本图层 - TextLayer
-order: 3
----
-
----
-title: 文本图层 - TextLayer
-order: 3
----
-
-Core Layer
-
-`TextLayer` 是基于 [L7-PointLayer](https://l7.antv.vision/zh/docs/map-api/point_layer/pointlayer) 封装的配置式文本图层 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`field
-
-`string` required
-
-映射的标签数据字段。
-
-### `options.`style
-
-`TextLayerStyleOptions` optional
-
-字体样式，TextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/composite-layers/text-layer.zh.md b/site/docs/map-api/composite-layers/text-layer.zh.md
deleted file mode 100644
index fd3e2f2b5..000000000
--- a/site/docs/map-api/composite-layers/text-layer.zh.md
+++ /dev/null
@@ -1,400 +0,0 @@
----
-title: 文本图层 - TextLayer
-order: 3
----
-
-Core Layer
-
-`TextLayer` 是基于 [L7-PointLayer](https://l7.antv.vision/zh/docs/map-api/point_layer/pointlayer) 封装的配置式文本图层 API。
-
-```ts
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`field
-
-`string` required
-
-映射的标签数据字段。
-
-### `options.`style
-
-`TextLayerStyleOptions` optional
-
-字体样式，TextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
-
-
-## 三、方法
-
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
-
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/layers/arc-layer.en.md b/site/docs/map-api/layers/arc-layer.en.md
deleted file mode 100644
index 5fd5a9579..000000000
--- a/site/docs/map-api/layers/arc-layer.en.md
+++ /dev/null
@@ -1,242 +0,0 @@
----
-title: ArcLayer
-order: 7
----
-
----
-title: 弧线图层 - ArcLayer
-order: 7
----
-
-`ArcLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- }
-}
-```
-
-### `options.`shape
-
-`string` optional default: `'arc'`
-
-支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'arc', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- },
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样式，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/arc-layer.zh.md b/site/docs/map-api/layers/arc-layer.zh.md
deleted file mode 100644
index 94f5d385a..000000000
--- a/site/docs/map-api/layers/arc-layer.zh.md
+++ /dev/null
@@ -1,237 +0,0 @@
----
-title: 弧线图层 - ArcLayer
-order: 7
----
-
-`ArcLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- }
-}
-```
-
-### `options.`shape
-
-`string` optional default: `'arc'`
-
-支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'arc', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- },
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样式，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/area-layer.en.md b/site/docs/map-api/layers/area-layer.en.md
deleted file mode 100644
index baf2e5b77..000000000
--- a/site/docs/map-api/layers/area-layer.en.md
+++ /dev/null
@@ -1,253 +0,0 @@
----
-title: AreaLayer
-order: 8
----
-
----
-title: 区域图层 - AreaLayer
-order: 8
----
-
-`AreaLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`enabledMultiSelect
-
-`boolean` optional default: `false`
-
-是否启用多选。
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/area-layer.zh.md b/site/docs/map-api/layers/area-layer.zh.md
deleted file mode 100644
index 71c4bd472..000000000
--- a/site/docs/map-api/layers/area-layer.zh.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-title: 区域图层 - AreaLayer
-order: 8
----
-
-`AreaLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`enabledMultiSelect
-
-`boolean` optional default: `false`
-
-是否启用多选。
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/dot-density-layer.en.md b/site/docs/map-api/layers/dot-density-layer.en.md
deleted file mode 100644
index 3de10e59b..000000000
--- a/site/docs/map-api/layers/dot-density-layer.en.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: DotDensityLayer
-order: 2
----
-
----
-title: 点密度图层 - DotDensityLayer
-order: 2
----
-
-`DotDensityLayer` 继承 [DotLayer](/zh/docs/map-api/layers/dot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`size
-
-`number` optional default: `1`
-
-圆点大小。
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [DotLayer 属性](/zh/docs/map-api/layers/dot-layer#二、属性)。
-
-## 三、方法
-
-继承 [DotLayer 方法](/zh/docs/map-api/layers/dot-layer#三、方法)。
-
-## 四、事件
-
-继承 [DotLayer 方法](/zh/docs/map-api/layers/dot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/dot-density-layer.zh.md b/site/docs/map-api/layers/dot-density-layer.zh.md
deleted file mode 100644
index 652da3e55..000000000
--- a/site/docs/map-api/layers/dot-density-layer.zh.md
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: 点密度图层 - DotDensityLayer
-order: 2
----
-
-`DotDensityLayer` 继承 [DotLayer](/zh/docs/map-api/layers/dot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`size
-
-`number` optional default: `1`
-
-圆点大小。
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [DotLayer 属性](/zh/docs/map-api/layers/dot-layer#二、属性)。
-
-## 三、方法
-
-继承 [DotLayer 方法](/zh/docs/map-api/layers/dot-layer#三、方法)。
-
-## 四、事件
-
-继承 [DotLayer 方法](/zh/docs/map-api/layers/dot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/dot-layer.en.md b/site/docs/map-api/layers/dot-layer.en.md
deleted file mode 100644
index e727644b4..000000000
--- a/site/docs/map-api/layers/dot-layer.en.md
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: DotLayer
-order: 1
----
-
----
-title: 散点图层 - DotLayer
-order: 1
----
-
-`DotLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|Function|object` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-```js
-{
- animate: true,
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/dot-layer.zh.md b/site/docs/map-api/layers/dot-layer.zh.md
deleted file mode 100644
index a6cf4db68..000000000
--- a/site/docs/map-api/layers/dot-layer.zh.md
+++ /dev/null
@@ -1,375 +0,0 @@
----
-title: 散点图层 - DotLayer
-order: 1
----
-
-`DotLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|Function|object` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-```js
-{
- animate: true,
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/grid-layer.en.md b/site/docs/map-api/layers/grid-layer.en.md
deleted file mode 100644
index 3fbfb998e..000000000
--- a/site/docs/map-api/layers/grid-layer.en.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: GridLayer
-order: 4
----
-
----
-title: 网格聚合图层 - GridLayer
-order: 4
----
-
-`GridLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'square'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'square', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/grid-layer.zh.md b/site/docs/map-api/layers/grid-layer.zh.md
deleted file mode 100644
index 0e65267ce..000000000
--- a/site/docs/map-api/layers/grid-layer.zh.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: 网格聚合图层 - GridLayer
-order: 4
----
-
-`GridLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'square'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'square', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/heatmap-layer.en.md b/site/docs/map-api/layers/heatmap-layer.en.md
deleted file mode 100644
index 5a4ab1d41..000000000
--- a/site/docs/map-api/layers/heatmap-layer.en.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: HeatmapLayer
-order: 3
----
-
----
-title: 点热力图层 - HeatmapLayer
-order: 3
----
-
-`HeatmapLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`size
-
-`SizeAttr` required
-
-热力大小配置，SizeAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions` optional
-
-热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ----------- | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| colorsRamp | 热力色带 | `ColorRamp` | | optional |
-
-热力色带，ColorRamp 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---------- | -------- | ------ | -------- |
-| color | 颜色 | `string` | | required |
-| position | 热力映射值 | `number` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- { color: 'rgba(33,102,172,0.0)', position: 0 },
- { color: 'rgb(103,169,207)', position: 0.2 },
- { color: 'rgb(209,229,240)', position: 0.4 },
- { color: 'rgb(253,219,199)', position: 0.6 },
- { color: 'rgb(239,138,98)', position: 0.8 },
- { color: 'rgb(178,24,43,1.0)', position: 1 },
- ],
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/heatmap-layer.zh.md b/site/docs/map-api/layers/heatmap-layer.zh.md
deleted file mode 100644
index 47a99714a..000000000
--- a/site/docs/map-api/layers/heatmap-layer.zh.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: 点热力图层 - HeatmapLayer
-order: 3
----
-
-`HeatmapLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`size
-
-`SizeAttr` required
-
-热力大小配置，SizeAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions` optional
-
-热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ----------- | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| colorsRamp | 热力色带 | `ColorRamp` | | optional |
-
-热力色带，ColorRamp 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---------- | -------- | ------ | -------- |
-| color | 颜色 | `string` | | required |
-| position | 热力映射值 | `number` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- { color: 'rgba(33,102,172,0.0)', position: 0 },
- { color: 'rgb(103,169,207)', position: 0.2 },
- { color: 'rgb(209,229,240)', position: 0.4 },
- { color: 'rgb(253,219,199)', position: 0.6 },
- { color: 'rgb(239,138,98)', position: 0.8 },
- { color: 'rgb(178,24,43,1.0)', position: 1 },
- ],
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/hexbin-layer.en.md b/site/docs/map-api/layers/hexbin-layer.en.md
deleted file mode 100644
index 37f960d4c..000000000
--- a/site/docs/map-api/layers/hexbin-layer.en.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: HexbinLayer
-order: 5
----
-
----
-title: 蜂窝聚合图层 - HexbinLayer
-order: 5
----
-
-`HexbinLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'hexagon'`
-
-元素形状，分别支持 2D 与 3D 蜂窝：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-```js
-{ shape: 'hexagon', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/hexbin-layer.zh.md b/site/docs/map-api/layers/hexbin-layer.zh.md
deleted file mode 100644
index 4c8644e88..000000000
--- a/site/docs/map-api/layers/hexbin-layer.zh.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: 蜂窝聚合图层 - HexbinLayer
-order: 5
----
-
-`HexbinLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'hexagon'`
-
-元素形状，分别支持 2D 与 3D 蜂窝：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-```js
-{ shape: 'hexagon', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/icon-layer.en.md b/site/docs/map-api/layers/icon-layer.en.md
deleted file mode 100644
index 57d9ce0d1..000000000
--- a/site/docs/map-api/layers/icon-layer.en.md
+++ /dev/null
@@ -1,293 +0,0 @@
----
-title: IconLayer
-order: 2
----
-
----
-title: 图标图层 - IconLayer
-order: 2
----
-
-`IconLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` required
-
-图标形状，使用方法如下：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', t: 21, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-自定义映射图标
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? '01': '02'
- }
- }
-}
-```
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/icon-layer.zh.md b/site/docs/map-api/layers/icon-layer.zh.md
deleted file mode 100644
index e17c5298b..000000000
--- a/site/docs/map-api/layers/icon-layer.zh.md
+++ /dev/null
@@ -1,288 +0,0 @@
----
-title: 图标图层 - IconLayer
-order: 2
----
-
-`IconLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` required
-
-图标形状，使用方法如下：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', t: 21, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-自定义映射图标
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? '01': '02'
- }
- }
-}
-```
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/path-layer.en.md b/site/docs/map-api/layers/path-layer.en.md
deleted file mode 100644
index fcf7a02c7..000000000
--- a/site/docs/map-api/layers/path-layer.en.md
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: PathLayer
-order: 6
----
-
----
-title: 路径图层 - PathLayer
-order: 6
----
-
-`PathLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/path-layer.zh.md b/site/docs/map-api/layers/path-layer.zh.md
deleted file mode 100644
index d2df1d160..000000000
--- a/site/docs/map-api/layers/path-layer.zh.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: 路径图层 - PathLayer
-order: 6
----
-
-`PathLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/plot-layer.en.md b/site/docs/map-api/layers/plot-layer.en.md
deleted file mode 100644
index 9183d6bbb..000000000
--- a/site/docs/map-api/layers/plot-layer.en.md
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: PlotLayer
-order: 0
----
-
----
-title: 图层 - PlotLayer
-order: 0
----
-
-`PlotLayer` 是所有图表图层的基类，定义了图层的通用属性和方法。
-
-```js
-constructor(options: PlotLayerOptions)
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层可见范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`PlotLayerOptions`
-
-当前图层的所有配置项。
-
-## 三、方法
-
-### update
-
-更新配置且重新渲染。
-
-```js
-plot.update(options: Partial);
-```
-
-### changeData
-
-更新数据源。
-
-```js
-plot.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-plot.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-plot.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-plot.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-plot.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-plot.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-plot.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-plot.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-plot.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-plot.fitBounds(fitBoundsOptions?: Bounds) : boolean;
-```
-
-## 四、事件
-
-**生命周期事件**
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-**点击事件**
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-**鼠标事件**
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/layers/plot-layer.zh.md b/site/docs/map-api/layers/plot-layer.zh.md
deleted file mode 100644
index 2c294d1c8..000000000
--- a/site/docs/map-api/layers/plot-layer.zh.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: 图层 - PlotLayer
-order: 0
----
-
-`PlotLayer` 是所有图表图层的基类，定义了图层的通用属性和方法。
-
-```js
-constructor(options: PlotLayerOptions)
-```
-
-## 一、配置
-
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层可见范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
-
-## 二、属性
-
-### name
-
-`string`
-
-当前图层名。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`PlotLayerOptions`
-
-当前图层的所有配置项。
-
-## 三、方法
-
-### update
-
-更新配置且重新渲染。
-
-```js
-plot.update(options: Partial);
-```
-
-### changeData
-
-更新数据源。
-
-```js
-plot.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-plot.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-plot.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-plot.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-plot.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-plot.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-plot.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-plot.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-plot.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-plot.fitBounds(fitBoundsOptions?: Bounds) : boolean;
-```
-
-## 四、事件
-
-**生命周期事件**
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-**点击事件**
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-**鼠标事件**
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-api/layers/prism-layer.en.md b/site/docs/map-api/layers/prism-layer.en.md
deleted file mode 100644
index cea88c79c..000000000
--- a/site/docs/map-api/layers/prism-layer.en.md
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: PrismLayer
-order: 9
----
-
----
-title: 水晶体图层 - PrismLayer
-order: 9
----
-
-`PrismLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-水晶体高度。
-
-```js
-{ size: 120, }
-```
-
-#### `size.`field
-
-`string` optional
-
-水晶体高度值映射关联字段。
-
-```js
-{
- size: { field: 't' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-水晶体高度值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [120, 250],
- scale: { type: 'quantile' },
- }
-}
-```
-
-### `options.`style
-
-`PolygonLayerStyleOptions` optional
-
-区域样式，PolygonLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | ------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- }
-}
-```
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/prism-layer.zh.md b/site/docs/map-api/layers/prism-layer.zh.md
deleted file mode 100644
index 3692cf039..000000000
--- a/site/docs/map-api/layers/prism-layer.zh.md
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: 水晶体图层 - PrismLayer
-order: 9
----
-
-`PrismLayer` 继承 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-水晶体高度。
-
-```js
-{ size: 120, }
-```
-
-#### `size.`field
-
-`string` optional
-
-水晶体高度值映射关联字段。
-
-```js
-{
- size: { field: 't' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-水晶体高度值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [120, 250],
- scale: { type: 'quantile' },
- }
-}
-```
-
-### `options.`style
-
-`PolygonLayerStyleOptions` optional
-
-区域样式，PolygonLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | ------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- }
-}
-```
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/text-layer.en.md b/site/docs/map-api/layers/text-layer.en.md
deleted file mode 100644
index 2e4bc8c06..000000000
--- a/site/docs/map-api/layers/text-layer.en.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: TextLayer
-order: 1
----
-
----
-title: 文本图层 - TextLayer
-order: 1
----
-
-`TextLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-### `options.`field
-
-`string` required
-
-映射的标签数据字段。
-
-### `options.`style
-
-`PointTextLayerStyleOptions` optional
-
-字体样式，PointTextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/layers/text-layer.zh.md b/site/docs/map-api/layers/text-layer.zh.md
deleted file mode 100644
index fee505765..000000000
--- a/site/docs/map-api/layers/text-layer.zh.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: 文本图层 - TextLayer
-order: 1
----
-
-`TextLayer` 继承基类 [PlotLayer](/zh/docs/map-api/layers/plot-layer)。
-
-## 一、配置
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-### `options.`field
-
-`string` required
-
-映射的标签数据字段。
-
-### `options.`style
-
-`PointTextLayerStyleOptions` optional
-
-字体样式，PointTextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-## 二、属性
-
-继承 [PlotLayer 属性](/zh/docs/map-api/layers/plot-layer#二、属性)。
-
-## 三、方法
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#三、方法)。
-
-## 四、事件
-
-继承 [PlotLayer 方法](/zh/docs/map-api/layers/plot-layer#四、事件)。
diff --git a/site/docs/map-api/plot-api/index.en.md b/site/docs/map-api/plot-api/index.en.md
deleted file mode 100644
index c7a5dca62..000000000
--- a/site/docs/map-api/plot-api/index.en.md
+++ /dev/null
@@ -1,682 +0,0 @@
----
-title: Plot
-order: 0
-redirect_from:
- - /en/docs/map-api
----
-
----
-title: 图表 - Plot
-order: 0
-redirect_from:
- - /zh/docs/map-api
----
-
-`Plot` 是所有图表的基类，定义了地图图表的通用属性和方法。
-
-```js
-constructor(container: string | HTMLDivElement, options: PlotOptions)
-```
-
-## 一、配置
-
-### container
-
-`string|HTMLDivElement` required
-
-图表渲染的 DOM 容器。
-
-### options
-
-`PlotOptions` required
-
-图表的所有配置项。
-
-### `options.`width
-
-`number` optional default: `null`
-
-设置图表容器宽度。
-
-### `options.`height
-
-`number` optional default: `null`
-
-设置图表容器高度。
-
-### `options.`map
-
-`MapConfig` required
-
-地图容器配置项。
-
-#### `map.`type
-
-`string` optional default: `'amap'`
-
-地图底图类型，支持以下两种类型：
-
-* amap: 高德地图
-* mapbox: Mapbox 地图
-
-地图底图类型不同时，`map` 下面的有的配置项不相同，比如 `maxZoom`，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。除此之外还有，底图的交互状态配置，`zoomEnable`、`dragEnable`等。各配置项可详见各官网：高德地图 [配置项](https://lbs.amap.com/api/javascript-api/reference/map)；Mapbox 地图 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters)。
-
-#### `map.`token
-
-`string` required
-
-地图服务 token，需服务平台申请。
-
-#### `map.`center
-
-`number[]` optional default: `[0, 0]`
-
-初始中心经纬度。
-
-#### `map.`pitch
-
-`number` optional default: `0`
-
-初始倾角。
-
-#### `map.`rotation
-
-`number` optional default: `0`
-
-初始旋转角度。
-
-#### `map.`zoom
-
-`number` optional default: `0`
-
-初始缩放层级，底图可缩放层级分布为：
-
-* Mapbox （0-24）
-* 高德 （2-19）
-
-#### `map.`minZoom
-
-`number` optional default: `0`
-
-地图最小缩放等级。
-
-#### `map.`maxZoom
-
-`number` optional default: `20`
-
-地图最大缩放等级，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。
-
-#### `map.`style
-
-`string` optional default: `dark`
-
-内置样式:
-
-* dark: 黑暗
-* light: 明亮
-* normal: 普通
-* blank: 无底图
-
-自定义样式:
-
-```js
-{
- style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true';
-}
-```
-
-
-### `options.`antialias
-
-`boolean` optional default: `true`
-
-是否开启抗锯齿。
-
-### `options.`preserveDrawingBuffer
-
-`boolean` optional default: `false`
-
-是否保留缓冲区数据。
-
-### `options.`logo
-
-`bool` optional default: `true`
-
-是否显示 logo。
-
-### `options.`source
-
-`ISource` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-### `options.`autoFit
-
-`bool` optional default: `false`
-
-图层完成初始化之后，地图是否自动缩放到图层的数据边界范围，注意 后图表数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`theme
-
-`string|object` optional default: `'light'`
-
-图表主题，详见 [Theme](/zh/docs/map-api/theme)。
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-### DefaultOptions
-
-`object` **static**
-
-### container
-
-`HTMLDivElement`
-
-图表渲染的 DOM 容器。
-
-### options
-
-`PlotOptions`
-
-图表的所有配置项。
-
-### scene
-
-`Scene`
-
-图表的地图场景实例。
-
-### type
-
-`string`
-
-图表所属类型。
-
-### layerGroup
-
-`LayerGroup`
-
-图表的图层组。
-
-### sceneLoaded
-
-`boolean`
-
-图表的地图场景是否加载完成。
-
-### layersLoaded
-
-`boolean`
-
-图表的图层是否加载完成。
-
-### zoomControl
-
-`undefined｜Zoom`
-
-放缩器控件实例。
-
-### scaleControl
-
-`undefined｜Scale`
-
-比例尺控件实例。
-
-### layerMenuControl
-
-`undefined｜Layers`
-
-图层列表控件实例。
-
-### legendControl
-
-`undefined｜Legend`
-
-图例控件实例。
-
-### tooltip
-
-`undefined｜Tooltip`
-
-悬浮提示组件实例。
-
-## 三、方法
-
-### update
-
-更新配置且重新渲染。
-
-```js
-plot.update(options: Partial);
-```
-
-### changeData
-
-更新数据源。
-
-```js
-plot.changeData(data: any, cfg?: SourceOptions);
-```
-
-### changeSize
-
-修改容器大小。
-
-```js
-plot.changeSize(width: number, height: number);
-```
-
-### getScene
-
-获取图表的地图 scene 实例。
-
-```js
-plot.getScene() : Scene;
-```
-
-### getMap
-
-获取图表的 map 实例。
-
-```js
-plot.getMap() : MapboxInstance | AMapInstance;
-```
-
-### addLayer
-
-添加图层。
-
-```js
-plot.addLayer(layer: PlotLayer);
-```
-
-### getLayers
-
-获取所有图层。
-
-```js
-plot.getLayers(): PlotLayer[];
-```
-
-### getLayerByName
-
-根据图层名称获取图层。
-
-```js
-plot.getLayerByName(name: string): PlotLayer | undefined;
-```
-
-### removeLayer
-
-移除图层。
-
-```js
-plot.removeLayer(layer: PlotLayer);
-```
-
-### removeAllLayer
-
-移除容器内所有的图层。
-
-```js
-plot.removeAllLayer();
-```
-
-### zoomIn
-
-地图放大一级。
-
-```js
-plot.zoomIn();
-```
-
-### zoomOut
-
-地图缩小一级。
-
-```js
-plot.zoomOut();
-```
-
-### setPitch
-
-设置地图倾角。
-
-```js
-plot.setPitch(pitch: number);
-```
-
-### fitBounds
-
-设置地图缩放范围。
-
-```js
-plot.fitBounds(bound: Bounds);
-```
-
-### setMapStatus
-
-设置地图交互操作状态，可用来关闭地图的一些交互操作，缩放、平移、旋转等。
-
-```js
-plot.setMapStatus(status: MapStatusOptions);
-```
-
-### setBgColor
-
-设置容器的背景色。
-
-```js
-plot.setBgColor(color: string);
-```
-
-### addZoomControl
-
-添加地图缩放器控件。
-
-```js
-plot.addZoomControl(options: ZoomControlOptions);
-```
-
-### removeZoomControl
-
-移除地图缩放器控件。
-
-```js
-plot.removeZoomControl();
-```
-
-### addScaleControl
-
-添加地图比例尺控件。
-
-```js
-plot.addScaleControl(options: ScaleControlOptions);
-```
-
-### removeScaleControl
-
-移除地图比例尺控件。
-
-```js
-plot.removeScaleControl();
-```
-
-### addLayerMenuControl
-
-添加地图图层列表控件。
-
-```js
-plot.addLayerMenuControl(options: LayerMenuControlOptions);
-```
-
-### removeLayerMenuControl
-
-移除地图图层列表控件。
-
-```js
-plot.removeLayerMenuControl();
-```
-
-### addLegendControl
-
-添加图例控件。
-
-```js
-plot.addLegendControl(options: LegendOptions);
-```
-
-### removeLegendControl
-
-移除图例控件。
-
-```js
-plot.removeLegendControl();
-```
-
-### exportPng
-
-导出地图，目前仅支持导出可视化层，不支持底图导出。
-
-```js
-plot.exportPng(type?: 'png' | 'jpg'): string;
-```
-
-### addToScene
-
-添加到容器，用于 L7 Scene 与图表混合使用场景。
-
-```js
-plot.addToScene(scene: Scene);
-```
-
-### removeFromScene
-
-从容器上移除，用于 L7 Scene 与图表混合使用场景。
-
-```js
-plot.removeFromScene();
-```
-
-### on
-
-绑定事件。
-
-```js
-plot.on(event: string, callback: (...args) => void);
-```
-
-### once
-
-绑定一次事件。
-
-```js
-plot.once(event: string, callback: (...args) => void);
-```
-
-### off
-
-解绑事件。
-
-```js
-plot.off(event: string, callback: (...args) => void);
-```
-
-### destroy
-
-```js
-plot.destroy();
-```
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-plot.on(event: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-plot.once(event: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-plot.off(event: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 地图事件
-
-* 生命周期事件
- * loaded：加载完成事件。
- * scene-loaded：scene 加载完成事件。
- * destroy：销毁事件。
-* resize：地图容器大小改变事件。
-* 地图容器事件
- * mapmove：地图平移时触发事件。
- * movestart：地图平移开始时触发。
- * moveend：地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发。
- * zoomchange：地图缩放级别更改后触发。
- * zoomstart：缩放开始时触发。
- * zoomend：缩放停止时触发。
-* click：单击事件。
-* dblclick：双击事件。
-* contextmenu：右键事件。
-* 滑动事件
- * mousemove：鼠标在地图上移动时触发。
- * mousewheel：鼠标滚轮开始缩放地图时触发。
- * mouseover：鼠标移入地图容器内时触发。
- * mouseout：鼠标移出地图容器时触发。
- * mouseup：鼠标在地图上单击抬起时触发。
- * mousedown：鼠标在地图上单击按下时触发。
-* 拖动事件
- * dragstart：开始拖拽地图时触发。
- * dragging：拖拽地图过程中触发。
- * dragend：停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发。
-
-#### 图层事件
-
-详见[图层事件](/zh/docs/map-api/layers/plot-layer#四事件)，使用方式如下：
-
-```js
-plot.on('layerName:click', (...args) => void);
-```
-
-#### 组件事件
-
-详见各组件事件，使用方式如下：
-
-```js
-plot.on('tooltip:change', (...args) => void);
-```
-
-## 五、资源注册
-
-### 注册图片资源
-
-#### registerImage(id: string, image: IImage)
-
-注册单个图片。
-
-params:
-
-* id: `string`
-* image: `HTMLImageElement|File|string`
-
-```js
-import { registerImage } from '@ant-design/charts';
-
-registerImage('01', 'https://l7plot.antv.vision/xxx.svg');
-```
-
-#### registerImages(images)
-
-注册多个图片。
-
-params:
-
-* images: `Array`
- * id: `string`
- * image: `HTMLImageElement|File|string`
-
-```js
-import { registerImages } from '@ant-design/charts';
-
-const images = [{ id: '01', image: 'https://l7plot.antv.vision/xxx.svg' }];
-registerImages(images);
-```
-
-### 注册字体资源
-
-#### registerFontFace(fontFamily: string, fontPath: string)
-
-注册字体。
-
-params:
-
-* fontFamily: `string`
-* fontPath: `string`
-
-```js
-import { registerFontFace } from '@ant-design/charts';
-
-registerFontFace('iconfont', 'https://l7plot.antv.vision/xxx.woff2');
-```
-
-### 注册 iconfont 映射
-
-#### registerIconFont(name: string, fontUnicode: string)
-
-注册单个 iconfont 映射。
-
-params:
-
-* name: `string`
-* fontUnicode: `string`
-
-```js
-import { registerIconFont } from '@ant-design/charts';
-
-registerIconFont('icon1', '');
-```
-
-#### registerIconFonts(iconFonts)
-
-注册多个 iconfont 映射。
-
-params:
-
-* iconFonts
- * name: `string`
- * fontUnicode: `string`
-
-```js
-import { registerIconFonts } from '@ant-design/charts';
-
-const iconFonts = [{ name: 'icon1', fontUnicode: '' }];
-registerIconFonts(iconFonts);
-```
diff --git a/site/docs/map-api/plot-api/index.zh.md b/site/docs/map-api/plot-api/index.zh.md
deleted file mode 100644
index 3af3a9a7e..000000000
--- a/site/docs/map-api/plot-api/index.zh.md
+++ /dev/null
@@ -1,675 +0,0 @@
----
-title: 图表 - Plot
-order: 0
-redirect_from:
- - /zh/docs/map-api
----
-
-`Plot` 是所有图表的基类，定义了地图图表的通用属性和方法。
-
-```js
-constructor(container: string | HTMLDivElement, options: PlotOptions)
-```
-
-## 一、配置
-
-### container
-
-`string|HTMLDivElement` required
-
-图表渲染的 DOM 容器。
-
-### options
-
-`PlotOptions` required
-
-图表的所有配置项。
-
-### `options.`width
-
-`number` optional default: `null`
-
-设置图表容器宽度。
-
-### `options.`height
-
-`number` optional default: `null`
-
-设置图表容器高度。
-
-### `options.`map
-
-`MapConfig` required
-
-地图容器配置项。
-
-#### `map.`type
-
-`string` optional default: `'amap'`
-
-地图底图类型，支持以下两种类型：
-
-* amap: 高德地图
-* mapbox: Mapbox 地图
-
-地图底图类型不同时，`map` 下面的有的配置项不相同，比如 `maxZoom`，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。除此之外还有，底图的交互状态配置，`zoomEnable`、`dragEnable`等。各配置项可详见各官网：高德地图 [配置项](https://lbs.amap.com/api/javascript-api/reference/map)；Mapbox 地图 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters)。
-
-#### `map.`token
-
-`string` required
-
-地图服务 token，需服务平台申请。
-
-#### `map.`center
-
-`number[]` optional default: `[0, 0]`
-
-初始中心经纬度。
-
-#### `map.`pitch
-
-`number` optional default: `0`
-
-初始倾角。
-
-#### `map.`rotation
-
-`number` optional default: `0`
-
-初始旋转角度。
-
-#### `map.`zoom
-
-`number` optional default: `0`
-
-初始缩放层级，底图可缩放层级分布为：
-
-* Mapbox （0-24）
-* 高德 （2-19）
-
-#### `map.`minZoom
-
-`number` optional default: `0`
-
-地图最小缩放等级。
-
-#### `map.`maxZoom
-
-`number` optional default: `20`
-
-地图最大缩放等级，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。
-
-#### `map.`style
-
-`string` optional default: `dark`
-
-内置样式:
-
-* dark: 黑暗
-* light: 明亮
-* normal: 普通
-* blank: 无底图
-
-自定义样式:
-
-```js
-{
- style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true';
-}
-```
-
-
-### `options.`antialias
-
-`boolean` optional default: `true`
-
-是否开启抗锯齿。
-
-### `options.`preserveDrawingBuffer
-
-`boolean` optional default: `false`
-
-是否保留缓冲区数据。
-
-### `options.`logo
-
-`bool` optional default: `true`
-
-是否显示 logo。
-
-### `options.`source
-
-`ISource` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-### `options.`autoFit
-
-`bool` optional default: `false`
-
-图层完成初始化之后，地图是否自动缩放到图层的数据边界范围，注意 后图表数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`theme
-
-`string|object` optional default: `'light'`
-
-图表主题，详见 [Theme](/zh/docs/map-api/theme)。
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-### DefaultOptions
-
-`object` **static**
-
-### container
-
-`HTMLDivElement`
-
-图表渲染的 DOM 容器。
-
-### options
-
-`PlotOptions`
-
-图表的所有配置项。
-
-### scene
-
-`Scene`
-
-图表的地图场景实例。
-
-### type
-
-`string`
-
-图表所属类型。
-
-### layerGroup
-
-`LayerGroup`
-
-图表的图层组。
-
-### sceneLoaded
-
-`boolean`
-
-图表的地图场景是否加载完成。
-
-### layersLoaded
-
-`boolean`
-
-图表的图层是否加载完成。
-
-### zoomControl
-
-`undefined｜Zoom`
-
-放缩器控件实例。
-
-### scaleControl
-
-`undefined｜Scale`
-
-比例尺控件实例。
-
-### layerMenuControl
-
-`undefined｜Layers`
-
-图层列表控件实例。
-
-### legendControl
-
-`undefined｜Legend`
-
-图例控件实例。
-
-### tooltip
-
-`undefined｜Tooltip`
-
-悬浮提示组件实例。
-
-## 三、方法
-
-### update
-
-更新配置且重新渲染。
-
-```js
-plot.update(options: Partial);
-```
-
-### changeData
-
-更新数据源。
-
-```js
-plot.changeData(data: any, cfg?: SourceOptions);
-```
-
-### changeSize
-
-修改容器大小。
-
-```js
-plot.changeSize(width: number, height: number);
-```
-
-### getScene
-
-获取图表的地图 scene 实例。
-
-```js
-plot.getScene() : Scene;
-```
-
-### getMap
-
-获取图表的 map 实例。
-
-```js
-plot.getMap() : MapboxInstance | AMapInstance;
-```
-
-### addLayer
-
-添加图层。
-
-```js
-plot.addLayer(layer: PlotLayer);
-```
-
-### getLayers
-
-获取所有图层。
-
-```js
-plot.getLayers(): PlotLayer[];
-```
-
-### getLayerByName
-
-根据图层名称获取图层。
-
-```js
-plot.getLayerByName(name: string): PlotLayer | undefined;
-```
-
-### removeLayer
-
-移除图层。
-
-```js
-plot.removeLayer(layer: PlotLayer);
-```
-
-### removeAllLayer
-
-移除容器内所有的图层。
-
-```js
-plot.removeAllLayer();
-```
-
-### zoomIn
-
-地图放大一级。
-
-```js
-plot.zoomIn();
-```
-
-### zoomOut
-
-地图缩小一级。
-
-```js
-plot.zoomOut();
-```
-
-### setPitch
-
-设置地图倾角。
-
-```js
-plot.setPitch(pitch: number);
-```
-
-### fitBounds
-
-设置地图缩放范围。
-
-```js
-plot.fitBounds(bound: Bounds);
-```
-
-### setMapStatus
-
-设置地图交互操作状态，可用来关闭地图的一些交互操作，缩放、平移、旋转等。
-
-```js
-plot.setMapStatus(status: MapStatusOptions);
-```
-
-### setBgColor
-
-设置容器的背景色。
-
-```js
-plot.setBgColor(color: string);
-```
-
-### addZoomControl
-
-添加地图缩放器控件。
-
-```js
-plot.addZoomControl(options: ZoomControlOptions);
-```
-
-### removeZoomControl
-
-移除地图缩放器控件。
-
-```js
-plot.removeZoomControl();
-```
-
-### addScaleControl
-
-添加地图比例尺控件。
-
-```js
-plot.addScaleControl(options: ScaleControlOptions);
-```
-
-### removeScaleControl
-
-移除地图比例尺控件。
-
-```js
-plot.removeScaleControl();
-```
-
-### addLayerMenuControl
-
-添加地图图层列表控件。
-
-```js
-plot.addLayerMenuControl(options: LayerMenuControlOptions);
-```
-
-### removeLayerMenuControl
-
-移除地图图层列表控件。
-
-```js
-plot.removeLayerMenuControl();
-```
-
-### addLegendControl
-
-添加图例控件。
-
-```js
-plot.addLegendControl(options: LegendOptions);
-```
-
-### removeLegendControl
-
-移除图例控件。
-
-```js
-plot.removeLegendControl();
-```
-
-### exportPng
-
-导出地图，目前仅支持导出可视化层，不支持底图导出。
-
-```js
-plot.exportPng(type?: 'png' | 'jpg'): string;
-```
-
-### addToScene
-
-添加到容器，用于 L7 Scene 与图表混合使用场景。
-
-```js
-plot.addToScene(scene: Scene);
-```
-
-### removeFromScene
-
-从容器上移除，用于 L7 Scene 与图表混合使用场景。
-
-```js
-plot.removeFromScene();
-```
-
-### on
-
-绑定事件。
-
-```js
-plot.on(event: string, callback: (...args) => void);
-```
-
-### once
-
-绑定一次事件。
-
-```js
-plot.once(event: string, callback: (...args) => void);
-```
-
-### off
-
-解绑事件。
-
-```js
-plot.off(event: string, callback: (...args) => void);
-```
-
-### destroy
-
-```js
-plot.destroy();
-```
-
-## 四、事件
-
-### 事件监听
-
-#### 绑定事件
-
-```js
-plot.on(event: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-plot.once(event: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-plot.off(event: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 地图事件
-
-* 生命周期事件
- * loaded：加载完成事件。
- * scene-loaded：scene 加载完成事件。
- * destroy：销毁事件。
-* resize：地图容器大小改变事件。
-* 地图容器事件
- * mapmove：地图平移时触发事件。
- * movestart：地图平移开始时触发。
- * moveend：地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发。
- * zoomchange：地图缩放级别更改后触发。
- * zoomstart：缩放开始时触发。
- * zoomend：缩放停止时触发。
-* click：单击事件。
-* dblclick：双击事件。
-* contextmenu：右键事件。
-* 滑动事件
- * mousemove：鼠标在地图上移动时触发。
- * mousewheel：鼠标滚轮开始缩放地图时触发。
- * mouseover：鼠标移入地图容器内时触发。
- * mouseout：鼠标移出地图容器时触发。
- * mouseup：鼠标在地图上单击抬起时触发。
- * mousedown：鼠标在地图上单击按下时触发。
-* 拖动事件
- * dragstart：开始拖拽地图时触发。
- * dragging：拖拽地图过程中触发。
- * dragend：停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发。
-
-#### 图层事件
-
-详见[图层事件](/zh/docs/map-api/layers/plot-layer#四事件)，使用方式如下：
-
-```js
-plot.on('layerName:click', (...args) => void);
-```
-
-#### 组件事件
-
-详见各组件事件，使用方式如下：
-
-```js
-plot.on('tooltip:change', (...args) => void);
-```
-
-## 五、资源注册
-
-### 注册图片资源
-
-#### registerImage(id: string, image: IImage)
-
-注册单个图片。
-
-params:
-
-* id: `string`
-* image: `HTMLImageElement|File|string`
-
-```js
-import { registerImage } from '@ant-design/charts';
-
-registerImage('01', 'https://l7plot.antv.vision/xxx.svg');
-```
-
-#### registerImages(images)
-
-注册多个图片。
-
-params:
-
-* images: `Array`
- * id: `string`
- * image: `HTMLImageElement|File|string`
-
-```js
-import { registerImages } from '@ant-design/charts';
-
-const images = [{ id: '01', image: 'https://l7plot.antv.vision/xxx.svg' }];
-registerImages(images);
-```
-
-### 注册字体资源
-
-#### registerFontFace(fontFamily: string, fontPath: string)
-
-注册字体。
-
-params:
-
-* fontFamily: `string`
-* fontPath: `string`
-
-```js
-import { registerFontFace } from '@ant-design/charts';
-
-registerFontFace('iconfont', 'https://l7plot.antv.vision/xxx.woff2');
-```
-
-### 注册 iconfont 映射
-
-#### registerIconFont(name: string, fontUnicode: string)
-
-注册单个 iconfont 映射。
-
-params:
-
-* name: `string`
-* fontUnicode: `string`
-
-```js
-import { registerIconFont } from '@ant-design/charts';
-
-registerIconFont('icon1', '');
-```
-
-#### registerIconFonts(iconFonts)
-
-注册多个 iconfont 映射。
-
-params:
-
-* iconFonts
- * name: `string`
- * fontUnicode: `string`
-
-```js
-import { registerIconFonts } from '@ant-design/charts';
-
-const iconFonts = [{ name: 'icon1', fontUnicode: '' }];
-registerIconFonts(iconFonts);
-```
diff --git a/site/docs/map-api/plots/area.en.md b/site/docs/map-api/plots/area.en.md
deleted file mode 100644
index 192a925cd..000000000
--- a/site/docs/map-api/plots/area.en.md
+++ /dev/null
@@ -1,328 +0,0 @@
----
-title: Area
-order: 8
----
-
----
-title: 区域图 - Area
-order: 8
----
-
-`Area` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`AreaOptions` required
-
-区域图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`enabledMultiSelect
-
-`boolean` optional default: `false`
-
-是否启用多选。
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### areaLayer
-
-`AreaLayer`
-
-填充面图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* areaLayer
-* labelLayer
-
-```js
-areaMap.on('areaLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/area.zh.md b/site/docs/map-api/plots/area.zh.md
deleted file mode 100644
index d83e33491..000000000
--- a/site/docs/map-api/plots/area.zh.md
+++ /dev/null
@@ -1,323 +0,0 @@
----
-title: 区域图 - Area
-order: 8
----
-
-`Area` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`AreaOptions` required
-
-区域图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`enabledMultiSelect
-
-`boolean` optional default: `false`
-
-是否启用多选。
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### areaLayer
-
-`AreaLayer`
-
-填充面图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* areaLayer
-* labelLayer
-
-```js
-areaMap.on('areaLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/choropleth.en.md b/site/docs/map-api/plots/choropleth.en.md
deleted file mode 100644
index b188f47e0..000000000
--- a/site/docs/map-api/plots/choropleth.en.md
+++ /dev/null
@@ -1,522 +0,0 @@
----
-title: Choropleth
-order: 9
----
-
----
-title: 行政区域图 - Choropleth
-order: 9
----
-
-`Choropleth` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`ChoroplethOptions` required
-
-行政区域分布图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`geoArea
-
-`string|GeoArea` required
-
-行政地理数据地址，geoArea 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---- | -------- | ----------------------- | ------------ | -------- |
-| url | 数据地址 | `string` | | required |
-| type | 数据类型 | `'geojson'｜'topojson'` | `'topojson'` | required |
-
-行政地理数据地址默认值为 `Choropleth.GeoAreaUrl`, 不定时以更新其中版本号方式更新数据，如需内网部署或自定义数据可下载 [choropleth data](https://www.jsdelivr.com/package/npm/static-geo-atlas?path=geo-data%2Fchoropleth-data)。
-
-```js
-{
- geoArea: {
- url: 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/choropleth-data',
- type: 'topojson',
- },
-}
-```
-
-### `options.`source
-
-`ChoroplethSourceOptions` required
-
-行政地理数据地址，source 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------------- | -------- | ------ | -------- |
-| data | 业务数据 | `Array` | | required |
-| joinBy | 地理元数据关联 | `JoinBy` | | required |
-
-地理元数据关联，joinBy 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------------------------ | ------------------- | ---------- | -------- |
-| sourceField | 业务元数据地理字段 | `string` | | required |
-| geoField | 地理数据字段 | `'adcode'｜'name'` | `'adcode'` | optional |
-| geoData | 地理数据，设置则覆盖当前层级的行政地址数据 | `FeatureCollection` | | optional |
-
-业务数据与地理数据关联主要有以下两种方式。行政名称与编码映射关系详见[行政名称表格](https://www.yuque.com/antv/l7/wrxc8h#yyIb)与[行政名称数据](https://cdn.jsdelivr.net/npm/static-geo-atlas@0.0.2/geo-data/administrative-data/area-list.json)。
-
-1. 根据行政编码匹配渲染
-
-```js
-{
- source: {
- data: [{ cityName: '上海市', code: 310000, value: 200 }],
- joinBy: {
- sourceField: 'code',
- geoField: 'adcode',
- },
- },
-}
-```
-
-2. 根据行政名称匹配渲染
-
-```js
-{
- source: {
- data: [{ cityName: '上海市', code: 310000, value: 200 }],
- joinBy: {
- sourceField: 'cityName',
- geoField: 'name',
- },
- },
-}
-```
-
-### `options.`viewLevel
-
-`ViewLevel` required
-
-行政级别及范围配置，ViewLevel 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------ | ---------------------------------------------------- | ------------------------- | -------- |
-| level | 行政级别 | `'world'｜'country'｜'province'｜'city'｜'district'` | | required |
-| adcode | 行政代码/行政名称 | `number｜string` | | required |
-| granularity | 化行政级别下的粒度 | `'country'｜'province'｜'city'｜'district'` | 默认取值 level 下一个级别 | optional |
-
-```js
-{
- viewLevel: {
- level: 'country',
- adcode: '100000',
- granularity: 'province',
- }
-}
-```
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-### `options.`chinaBorder
-
-`boolean｜ChinaBoundaryStyle` optional default: `ture`
-
-是否显示中国国界线，国界线样式 ChinaBoundaryStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---- | ------------------------ | ---------------------------------------------------------------- | -------- |
-| national | 国界 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1 }` | optional |
-| dispute | 争议 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1, dashArray: [2, 4] }` | optional |
-| coast | 海洋 | `LinesLayerStyleOptions` | `{ color: 'blue', width: 0.7, opacity: 0.8 }` | optional |
-| hkm | 港澳 | `LinesLayerStyleOptions` | `{ color: 'gray', width: 0.7, opacity: 0.8, dashArray: [2, 4] }` | optional |
-
-### `options.`drill
-
-`Drill` optional
-
-开启数据钻取功能，Drill 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------ | --------- | -------- |
-| enabled | 是否启用钻取功能 | `boolean` | `ture` | optional |
-| steps | 钻取维度顺序 | `DrillStep[]｜DrillStep['level'][]` | | required |
-| triggerUp | 上卷钻取的触发事件 | `'unclick'｜'undblclick'｜'uncontextmenu'` | `unclick` | optional |
-| triggerDown | 下钻钻取的触发事件 | `'click'｜'dblclick'｜'contextmenu'` | `click` | optional |
-| onUp | 上卷事件回调 | `(from: ViewLevel, to: ViewLevel, callback: (config?: DrillStepConfig) => void) => void` | | optional |
-| onDown | 上卷事件回调 | `(from: ViewLevel, to: ViewLevel & { properties: Record }, callback: (config?: DrillStepConfig) => void) => void` | | optional |
-
-钻取维度 DrillStep 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | -------------------------------- | ------------------------------------------- | ------------------------- | -------- |
-| level | 初始化行政级别 | `'country'｜'province'｜'city'｜'district'` | | required |
-| granularity | 化行政级别下的粒度 | `'province'｜'city'｜'district'` | 默认取值 level 下一个级别 | optional |
-| source | 当前行政级别下的数据 | `ChoroplethSourceOptions` | 默认取上一个级别的配置 | optional |
-| color | 当前行政级别下的颜色映射 | `string｜object｜Function` | 默认取上一个级别的配置 | optional |
-| style | 当前行政级别下的区域样式 | `object` | 默认取上一个级别的配置 | optional |
-| state | 当前行政级别下的区域交互反馈效果 | `object` | 默认取上一个级别的配置 | optional |
-| label | 当前行政级别下的数据标签 | `'province'｜'city'｜'district'` | 默认取上一个级别的配置 | optional |
-| tooltip | 当前行政级别下的悬浮提示 | `'province'｜'city'｜'district'` | 默认取上一个级别的配置 | optional |
-
-DrillStepConfig 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | -------------------------------- | -------------------------------- | ------ | -------- |
-| source | 当前行政级别下的数据 | `ChoroplethSourceOptions` | | optional |
-| color | 当前行政级别下的颜色映射 | `string｜object｜Function` | | optional |
-| style | 当前行政级别下的区域样式 | `object` | | optional |
-| state | 当前行政级别下的区域交互反馈效果 | `object` | | optional |
-| label | 当前行政级别下的数据标签 | `'province'｜'city'｜'district'` | | optional |
-| tooltip | 当前行政级别下的悬浮提示 | `'province'｜'city'｜'district'` | | optional |
-
-下钻事件回调：
-
-> 适用于异步请求下钻数据
-
-```js
-{
- drill: {
- steps: ['province', 'city', 'district'],
- onDown: (from, to, callback) => {
- const { level, adcode, granularity } = to
- callback({ source: { data: [], joinBy: { sourceField: 'code' } } })
- },
- onUp: (from, to, callback) => {
- callback()
- },
- },
-}
-```
-
-下钻事件回调拦截：
-
-> 适用于下钻数据权限判断
-
-```js
-{
- drill: {
- steps: ['province', 'city', 'district'],
- onDown: (from, to, callback) => {
- if (to.adcode !== 330000) {
- callback();
- }
- },
- onUp: (from, to, callback) => {
- callback();
- },
- },
-}
-```
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-### `options.`customFetchGeoData
-
-`(params: CustomFetchGeoDataParams) => Promise` optional
-
-自定义获取 geo 数据方法。
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### fillAreaLayer
-
-`AreaLayer`
-
-填充面图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-### changeView
-
-更新显示区域，未开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图显示区域。
-
-```js
-plot.changeView(view: ViewLevel, config?: DrillStepConfig);
-```
-
-### drillDown
-
-向下钻取方法，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图下钻。
-
-```js
-plot.drillDown(view: ViewLevel, config?: DrillStepConfig);
-```
-
-### drillUp
-
-向上钻取方法，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图上钻。上钻行政级别 `level` 可选，默认上钻到当前行政级别的上一层，也可以回到某一行政级别或最高层级别。
-
-```js
-plot.drillUp(config?: DrillStepConfig, level?: `'world'｜'country'｜'province'｜'city'`);
-```
-
-### getCurrentDrillSteps
-
-获取当前已钻取层级数据，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时使用。
-
-```js
-plot.getCurrentDrillSteps(): ViewLevel[];
-```
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-### 图层事件
-
-内置图层名称分别为：
-
-* fillAreaLayer
-* labelLayer
-
-```js
-choropleth.on('fillAreaLayer:click', (e: MouseEvent) => void);
-```
-
-### 钻取事件
-
-#### 下钻
-
-下钻完成后触发。
-
-```js
-choropleth.on('drilldown', (downParams: { from: ViewLevel, to: ViewLevel & { properties: Record }) => void);
-```
-
-#### 上卷
-
-上卷完成后触发。
-
-```js
-choropleth.on('drillup', (upParams: { from: ViewLevel, to: ViewLevel }) => void);
-```
diff --git a/site/docs/map-api/plots/choropleth.zh.md b/site/docs/map-api/plots/choropleth.zh.md
deleted file mode 100644
index 58770fe06..000000000
--- a/site/docs/map-api/plots/choropleth.zh.md
+++ /dev/null
@@ -1,517 +0,0 @@
----
-title: 行政区域图 - Choropleth
-order: 9
----
-
-`Choropleth` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`ChoroplethOptions` required
-
-行政区域分布图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`geoArea
-
-`string|GeoArea` required
-
-行政地理数据地址，geoArea 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---- | -------- | ----------------------- | ------------ | -------- |
-| url | 数据地址 | `string` | | required |
-| type | 数据类型 | `'geojson'｜'topojson'` | `'topojson'` | required |
-
-行政地理数据地址默认值为 `Choropleth.GeoAreaUrl`, 不定时以更新其中版本号方式更新数据，如需内网部署或自定义数据可下载 [choropleth data](https://www.jsdelivr.com/package/npm/static-geo-atlas?path=geo-data%2Fchoropleth-data)。
-
-```js
-{
- geoArea: {
- url: 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/choropleth-data',
- type: 'topojson',
- },
-}
-```
-
-### `options.`source
-
-`ChoroplethSourceOptions` required
-
-行政地理数据地址，source 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------------- | -------- | ------ | -------- |
-| data | 业务数据 | `Array` | | required |
-| joinBy | 地理元数据关联 | `JoinBy` | | required |
-
-地理元数据关联，joinBy 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------------------------ | ------------------- | ---------- | -------- |
-| sourceField | 业务元数据地理字段 | `string` | | required |
-| geoField | 地理数据字段 | `'adcode'｜'name'` | `'adcode'` | optional |
-| geoData | 地理数据，设置则覆盖当前层级的行政地址数据 | `FeatureCollection` | | optional |
-
-业务数据与地理数据关联主要有以下两种方式。行政名称与编码映射关系详见[行政名称表格](https://www.yuque.com/antv/l7/wrxc8h#yyIb)与[行政名称数据](https://cdn.jsdelivr.net/npm/static-geo-atlas@0.0.2/geo-data/administrative-data/area-list.json)。
-
-1. 根据行政编码匹配渲染
-
-```js
-{
- source: {
- data: [{ cityName: '上海市', code: 310000, value: 200 }],
- joinBy: {
- sourceField: 'code',
- geoField: 'adcode',
- },
- },
-}
-```
-
-2. 根据行政名称匹配渲染
-
-```js
-{
- source: {
- data: [{ cityName: '上海市', code: 310000, value: 200 }],
- joinBy: {
- sourceField: 'cityName',
- geoField: 'name',
- },
- },
-}
-```
-
-### `options.`viewLevel
-
-`ViewLevel` required
-
-行政级别及范围配置，ViewLevel 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------ | ---------------------------------------------------- | ------------------------- | -------- |
-| level | 行政级别 | `'world'｜'country'｜'province'｜'city'｜'district'` | | required |
-| adcode | 行政代码/行政名称 | `number｜string` | | required |
-| granularity | 化行政级别下的粒度 | `'country'｜'province'｜'city'｜'district'` | 默认取值 level 下一个级别 | optional |
-
-```js
-{
- viewLevel: {
- level: 'country',
- adcode: '100000',
- granularity: 'province',
- }
-}
-```
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-
-### `options.`chinaBorder
-
-`boolean｜ChinaBoundaryStyle` optional default: `ture`
-
-是否显示中国国界线，国界线样式 ChinaBoundaryStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---- | ------------------------ | ---------------------------------------------------------------- | -------- |
-| national | 国界 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1 }` | optional |
-| dispute | 争议 | `LinesLayerStyleOptions` | `{ color: 'red', width: 1, opacity: 1, dashArray: [2, 4] }` | optional |
-| coast | 海洋 | `LinesLayerStyleOptions` | `{ color: 'blue', width: 0.7, opacity: 0.8 }` | optional |
-| hkm | 港澳 | `LinesLayerStyleOptions` | `{ color: 'gray', width: 0.7, opacity: 0.8, dashArray: [2, 4] }` | optional |
-
-### `options.`drill
-
-`Drill` optional
-
-开启数据钻取功能，Drill 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------ | --------- | -------- |
-| enabled | 是否启用钻取功能 | `boolean` | `ture` | optional |
-| steps | 钻取维度顺序 | `DrillStep[]｜DrillStep['level'][]` | | required |
-| triggerUp | 上卷钻取的触发事件 | `'unclick'｜'undblclick'｜'uncontextmenu'` | `unclick` | optional |
-| triggerDown | 下钻钻取的触发事件 | `'click'｜'dblclick'｜'contextmenu'` | `click` | optional |
-| onUp | 上卷事件回调 | `(from: ViewLevel, to: ViewLevel, callback: (config?: DrillStepConfig) => void) => void` | | optional |
-| onDown | 上卷事件回调 | `(from: ViewLevel, to: ViewLevel & { properties: Record }, callback: (config?: DrillStepConfig) => void) => void` | | optional |
-
-钻取维度 DrillStep 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | -------------------------------- | ------------------------------------------- | ------------------------- | -------- |
-| level | 初始化行政级别 | `'country'｜'province'｜'city'｜'district'` | | required |
-| granularity | 化行政级别下的粒度 | `'province'｜'city'｜'district'` | 默认取值 level 下一个级别 | optional |
-| source | 当前行政级别下的数据 | `ChoroplethSourceOptions` | 默认取上一个级别的配置 | optional |
-| color | 当前行政级别下的颜色映射 | `string｜object｜Function` | 默认取上一个级别的配置 | optional |
-| style | 当前行政级别下的区域样式 | `object` | 默认取上一个级别的配置 | optional |
-| state | 当前行政级别下的区域交互反馈效果 | `object` | 默认取上一个级别的配置 | optional |
-| label | 当前行政级别下的数据标签 | `'province'｜'city'｜'district'` | 默认取上一个级别的配置 | optional |
-| tooltip | 当前行政级别下的悬浮提示 | `'province'｜'city'｜'district'` | 默认取上一个级别的配置 | optional |
-
-DrillStepConfig 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | -------------------------------- | -------------------------------- | ------ | -------- |
-| source | 当前行政级别下的数据 | `ChoroplethSourceOptions` | | optional |
-| color | 当前行政级别下的颜色映射 | `string｜object｜Function` | | optional |
-| style | 当前行政级别下的区域样式 | `object` | | optional |
-| state | 当前行政级别下的区域交互反馈效果 | `object` | | optional |
-| label | 当前行政级别下的数据标签 | `'province'｜'city'｜'district'` | | optional |
-| tooltip | 当前行政级别下的悬浮提示 | `'province'｜'city'｜'district'` | | optional |
-
-下钻事件回调：
-
-> 适用于异步请求下钻数据
-
-```js
-{
- drill: {
- steps: ['province', 'city', 'district'],
- onDown: (from, to, callback) => {
- const { level, adcode, granularity } = to
- callback({ source: { data: [], joinBy: { sourceField: 'code' } } })
- },
- onUp: (from, to, callback) => {
- callback()
- },
- },
-}
-```
-
-下钻事件回调拦截：
-
-> 适用于下钻数据权限判断
-
-```js
-{
- drill: {
- steps: ['province', 'city', 'district'],
- onDown: (from, to, callback) => {
- if (to.adcode !== 330000) {
- callback();
- }
- },
- onUp: (from, to, callback) => {
- callback();
- },
- },
-}
-```
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-### `options.`customFetchGeoData
-
-`(params: CustomFetchGeoDataParams) => Promise` optional
-
-自定义获取 geo 数据方法。
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### fillAreaLayer
-
-`AreaLayer`
-
-填充面图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-### changeView
-
-更新显示区域，未开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图显示区域。
-
-```js
-plot.changeView(view: ViewLevel, config?: DrillStepConfig);
-```
-
-### drillDown
-
-向下钻取方法，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图下钻。
-
-```js
-plot.drillDown(view: ViewLevel, config?: DrillStepConfig);
-```
-
-### drillUp
-
-向上钻取方法，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时，方法控制地图上钻。上钻行政级别 `level` 可选，默认上钻到当前行政级别的上一层，也可以回到某一行政级别或最高层级别。
-
-```js
-plot.drillUp(config?: DrillStepConfig, level?: `'world'｜'country'｜'province'｜'city'`);
-```
-
-### getCurrentDrillSteps
-
-获取当前已钻取层级数据，配合开启[钻取功能](/zh/docs/map-api/plots/choropleth#`options.`drill)时使用。
-
-```js
-plot.getCurrentDrillSteps(): ViewLevel[];
-```
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-### 图层事件
-
-内置图层名称分别为：
-
-* fillAreaLayer
-* labelLayer
-
-```js
-choropleth.on('fillAreaLayer:click', (e: MouseEvent) => void);
-```
-
-### 钻取事件
-
-#### 下钻
-
-下钻完成后触发。
-
-```js
-choropleth.on('drilldown', (downParams: { from: ViewLevel, to: ViewLevel & { properties: Record }) => void);
-```
-
-#### 上卷
-
-上卷完成后触发。
-
-```js
-choropleth.on('drillup', (upParams: { from: ViewLevel, to: ViewLevel }) => void);
-```
diff --git a/site/docs/map-api/plots/dot.en.md b/site/docs/map-api/plots/dot.en.md
deleted file mode 100644
index 0e123d75d..000000000
--- a/site/docs/map-api/plots/dot.en.md
+++ /dev/null
@@ -1,455 +0,0 @@
----
-title: Dot
-order: 0
----
-
----
-title: 散点图 - Dot
-order: 0
----
-
-`Dot` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`DotOptions` required
-
-点地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|Function|object` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-```js
-{
- animate: true,
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### dotLayer
-
-`DotLayer`
-
-点图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* dotLayer
-* labelLayer
-
-```js
-dotMap.on('dotLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/dot.zh.md b/site/docs/map-api/plots/dot.zh.md
deleted file mode 100644
index 093aa3ad6..000000000
--- a/site/docs/map-api/plots/dot.zh.md
+++ /dev/null
@@ -1,450 +0,0 @@
----
-title: 散点图 - Dot
-order: 0
----
-
-`Dot` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`DotOptions` required
-
-点地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string|Function|object` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
-
-
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-```js
-{
- animate: true,
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### dotLayer
-
-`DotLayer`
-
-点图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* dotLayer
-* labelLayer
-
-```js
-dotMap.on('dotLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/flow.en.md b/site/docs/map-api/plots/flow.en.md
deleted file mode 100644
index 508207612..000000000
--- a/site/docs/map-api/plots/flow.en.md
+++ /dev/null
@@ -1,357 +0,0 @@
----
-title: Flow
-order: 7
----
-
----
-title: 流向图 - Flow
-order: 7
----
-
-`Flow` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`FlowOptions` required
-
-连接图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- }
-}
-```
-
-### `options.`shape
-
-`string` optional default: `'arc'`
-
-支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'arc', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- },
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样式，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`radiation
-
-`object` optional
-
-落地点辐射圈。
-
-```js
-{
- radiation: {
- color: 'yellow',
- size: 20,
- }
-}
-```
-
-#### `radiation.`enabled
-
-`boolean` optional `true`
-
-是否开启辐射圈。
-
-#### `radiation.`color
-
-`string` optional
-
-辐射圈颜色。
-
-#### `radiation.`size
-
-`number|object|Function` optional default: `20`
-
-辐射圈大小。
-
-#### `radiation.`animate
-
-`boolean` optional `true`
-
-是否启用辐射圈动画。
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### flowLayer
-
-`ArcLayer`
-
-弧线图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* flowLayer
-* labelLayer
-
-```js
-pathMap.on('flowLayer:mousemove', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/flow.zh.md b/site/docs/map-api/plots/flow.zh.md
deleted file mode 100644
index e8aa3126d..000000000
--- a/site/docs/map-api/plots/flow.zh.md
+++ /dev/null
@@ -1,352 +0,0 @@
----
-title: 流向图 - Flow
-order: 7
----
-
-`Flow` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`FlowOptions` required
-
-连接图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- }
-}
-```
-
-### `options.`shape
-
-`string` optional default: `'arc'`
-
-支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'arc', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- },
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样式，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`radiation
-
-`object` optional
-
-落地点辐射圈。
-
-```js
-{
- radiation: {
- color: 'yellow',
- size: 20,
- }
-}
-```
-
-#### `radiation.`enabled
-
-`boolean` optional `true`
-
-是否开启辐射圈。
-
-#### `radiation.`color
-
-`string` optional
-
-辐射圈颜色。
-
-#### `radiation.`size
-
-`number|object|Function` optional default: `20`
-
-辐射圈大小。
-
-#### `radiation.`animate
-
-`boolean` optional `true`
-
-是否启用辐射圈动画。
-
-
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### flowLayer
-
-`ArcLayer`
-
-弧线图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* flowLayer
-* labelLayer
-
-```js
-pathMap.on('flowLayer:mousemove', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/grid.en.md b/site/docs/map-api/plots/grid.en.md
deleted file mode 100644
index 26b8786fa..000000000
--- a/site/docs/map-api/plots/grid.en.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-title: Grid
-order: 4
----
-
----
-title: 网格聚合图 - Grid
-order: 4
----
-
-`GridMap` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`GridMapOptions` required
-
-蜂窝地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'square'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'square', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### gridLayer
-
-`GridLayer`
-
-网格图层实例。
-
-### labelLayer
-
-`undefined|GridLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* gridLayer
-* labelLayer
-
-```js
-gridMap.on('gridLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/grid.zh.md b/site/docs/map-api/plots/grid.zh.md
deleted file mode 100644
index bcce0aae2..000000000
--- a/site/docs/map-api/plots/grid.zh.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: 网格聚合图 - Grid
-order: 4
----
-
-`GridMap` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`GridMapOptions` required
-
-蜂窝地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'square'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'square', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### gridLayer
-
-`GridLayer`
-
-网格图层实例。
-
-### labelLayer
-
-`undefined|GridLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* gridLayer
-* labelLayer
-
-```js
-gridMap.on('gridLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/heatmap.en.md b/site/docs/map-api/plots/heatmap.en.md
deleted file mode 100644
index 8ad2453d7..000000000
--- a/site/docs/map-api/plots/heatmap.en.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: Heatmap
-order: 3
----
-
----
-title: 热力图 - Heatmap
-order: 3
----
-
-`Heatmap` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`HeatmapOptions` required
-
-热力地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`size
-
-`SizeAttr` required
-
-热力大小配置，SizeAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions` optional
-
-热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ----------- | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| colorsRamp | 热力色带 | `ColorRamp` | | optional |
-
-热力色带，ColorRamp 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---------- | -------- | ------ | -------- |
-| color | 颜色 | `string` | | required |
-| position | 热力映射值 | `number` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- { color: 'rgba(33,102,172,0.0)', position: 0 },
- { color: 'rgb(103,169,207)', position: 0.2 },
- { color: 'rgb(209,229,240)', position: 0.4 },
- { color: 'rgb(253,219,199)', position: 0.6 },
- { color: 'rgb(239,138,98)', position: 0.8 },
- { color: 'rgb(178,24,43,1.0)', position: 1 },
- ],
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### heatmapLayer
-
-`HeatmapLayer`
-
-热力图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* heatmapLayer
-* labelLayer
-
-```js
-heatmap.on('heatmapLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/heatmap.zh.md b/site/docs/map-api/plots/heatmap.zh.md
deleted file mode 100644
index 1c10b54d9..000000000
--- a/site/docs/map-api/plots/heatmap.zh.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: 热力图 - Heatmap
-order: 3
----
-
-`Heatmap` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`HeatmapOptions` required
-
-热力地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
-
-
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-```js
-{ shape: 'heatmap', }
-```
-
-
-### `options.`size
-
-`SizeAttr` required
-
-热力大小配置，SizeAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
-
-
-### `options.`style
-
-`HeatmapLayerStyleOptions` optional
-
-热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ----------- | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| colorsRamp | 热力色带 | `ColorRamp` | | optional |
-
-热力色带，ColorRamp 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---------- | -------- | ------ | -------- |
-| color | 颜色 | `string` | | required |
-| position | 热力映射值 | `number` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- { color: 'rgba(33,102,172,0.0)', position: 0 },
- { color: 'rgb(103,169,207)', position: 0.2 },
- { color: 'rgb(209,229,240)', position: 0.4 },
- { color: 'rgb(253,219,199)', position: 0.6 },
- { color: 'rgb(239,138,98)', position: 0.8 },
- { color: 'rgb(178,24,43,1.0)', position: 1 },
- ],
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### heatmapLayer
-
-`HeatmapLayer`
-
-热力图层实例。
-
-### labelLayer
-
-`undefined|TextLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* heatmapLayer
-* labelLayer
-
-```js
-heatmap.on('heatmapLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/hexbin.en.md b/site/docs/map-api/plots/hexbin.en.md
deleted file mode 100644
index 1eaec75b1..000000000
--- a/site/docs/map-api/plots/hexbin.en.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: Hexbin
-order: 5
----
-
----
-title: 蜂窝聚合图 - Hexbin
-order: 5
----
-
-`Hexbin` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`HexbinOptions` required
-
-蜂窝地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'hexagon'`
-
-元素形状，分别支持 2D 与 3D 蜂窝：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-```js
-{ shape: 'hexagon', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### hexbinLayer
-
-`HexbinLayer`
-
-蜂窝图层实例。
-
-### labelLayer
-
-`undefined|HexbinLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* hexbinLayer
-* labelLayer
-
-```js
-hexbin.on('hexbinLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/hexbin.zh.md b/site/docs/map-api/plots/hexbin.zh.md
deleted file mode 100644
index 696050222..000000000
--- a/site/docs/map-api/plots/hexbin.zh.md
+++ /dev/null
@@ -1,274 +0,0 @@
----
-title: 蜂窝聚合图 - Hexbin
-order: 5
----
-
-`Hexbin` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`HexbinOptions` required
-
-蜂窝地图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
-
-
-### `options.`shape
-
-`string` optional default: `'hexagon'`
-
-元素形状，分别支持 2D 与 3D 蜂窝：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-```js
-{ shape: 'hexagon', }
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### hexbinLayer
-
-`HexbinLayer`
-
-蜂窝图层实例。
-
-### labelLayer
-
-`undefined|HexbinLayer`
-
-数据标签图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* hexbinLayer
-* labelLayer
-
-```js
-hexbin.on('hexbinLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/path.en.md b/site/docs/map-api/plots/path.en.md
deleted file mode 100644
index cc468c300..000000000
--- a/site/docs/map-api/plots/path.en.md
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: Path
-order: 6
----
-
----
-title: 路径图 - Path
-order: 6
----
-
-`Path` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`PathOptions` required
-
-路径图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### pathLayer
-
-`PathLayer`
-
-路径图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* pathLayer
-
-```js
-pathMap.on('pathLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/plots/path.zh.md b/site/docs/map-api/plots/path.zh.md
deleted file mode 100644
index 5aaf71a8d..000000000
--- a/site/docs/map-api/plots/path.zh.md
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: 路径图 - Path
-order: 6
----
-
-`Path` 继承基类 [Plot](/zh/docs/map-api/plot-api)。
-
-## 一、配置
-
-创建地图实例：
-
-```ts
-```
-
-### container
-
-`string|HTMLDivElement` required
-
-地图渲染的 DOM 容器。
-
-### options
-
-`PathOptions` required
-
-路径图的所有配置项，继承自 [Plot options](/zh/docs/map-api/plot-api#options)。
-
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
-
-
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
-
-
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
-
-
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
-
-## 二、属性
-
-继承 [Plot 属性](/zh/docs/map-api/plot-api#二、属性)。
-
-### pathLayer
-
-`PathLayer`
-
-路径图层实例。
-
-## 三、方法
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#三、方法)。
-
-## 四、事件
-
-继承 [Plot 方法](/zh/docs/map-api/plot-api#四、事件)。
-
-内置图层名称分别为：
-
-* pathLayer
-
-```js
-pathMap.on('pathLayer:click', (e: MouseEvent) => void);
-```
diff --git a/site/docs/map-api/source/index.en.md b/site/docs/map-api/source/index.en.md
deleted file mode 100644
index 3c839a822..000000000
--- a/site/docs/map-api/source/index.en.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-title: Data Source
-order: 1
----
-
----
-title: 数据 - Source
-order: 1
----
-
-## 属性配置
-
-### `source.`data
-
-`array|object|string` required
-
-数据源配置。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-### `source.`parser
-
-`object` required
-
-数据格式解析配置
-
-#### `parser.`type
-
-`string` required
-
-支持以下数据类型：
-
-* CSV
-
-```js
-{
- source: {
- data: `Latitude,Longitude,Name
- 104.101,30.649,chengdu`,
- parser: { type: "csv", x: 'Longitude', y: 'Latitude' },
- },
-}
-```
-
-* JSON
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-* GEOJSON
-
-```js
-{
- source: {
- data: {
- type: "FeatureCollection",
- features: [
- {
- type: "Feature",
- geometry: { type: "Point", coordinates: [104.101, 30.649] },
- properties: { name: "chengdu" },
- },
- ],
- },
- parser: { type: 'geojson' }
- }
-}
-```
-
-#### `parser.`x
-
-`string` optional
-
-点数据的经度映射。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-#### `parser.`y
-
-`string` optional
-
-点数据的维度映射。
-
-#### `parser.`x1
-
-`string` optional
-
-线数据的第二个点经度映射。
-
-```js
-{
- source: {
- data: [{ lng1: 112.345, lat1: 30.455, lng2: 112.345, lat2: 30.455, value: 10 }],
- parser: {
- type: 'json',
- x: 'lng1',
- y: 'lat1',
- x1: 'lng1',
- y1: 'lat2'
- }
- }
-}
-```
-
-#### `parser.`y1
-
-`string` optional
-
-线数据的第二个点维度映射。
-
-#### `parser.`coordinates
-
-`array` optional
-
-映射 [GeoJSON](https://datatracker.ietf.org/doc/html/draft-butler-geojson-06) 中的 Geometry 的 coordinates 数据类型。
-
-```js
-{
- source: {
- data: [
- {
- name: "chengdu",
- coordinates: [104.101, 30.649]
- },
- ],
- parser: { type: 'json', coordinates: 'coordinates' },
- },
-}
-```
-
-### `source.`transform
-
-`array` optional
-
-数据处理配置。
-
-#### `transform.`grid
-
-将数据处理为方格网布局，以下为配置参数：
-
-* type: `'grid'`
-* size: `number` 网格半径
-* field: `string` 数据统计字段
-* method: `'count'|'max'|'min'|'sum'|'mean'` 聚合方法
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- transforms: [
- {
- type: 'grid',
- size: 15000,
- field: 't',
- method: 'sum',
- }
- ]
- }
-}
-```
-
-#### `transform.`hexagon
-
-将数据处理为六边形网格布局，以下为配置参数：
-
-* type: `'hexagon'`
-* size: `number` 网格半径
-* field: `string` 数据统计字段
-* method: `'count'|'max'|'min'|'sum'|'mean'` 聚合方法
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- transforms: [
- {
- type: 'hexagon',
- size: 15000,
- field: 't',
- method: 'sum',
- }
- ]
- }
-}
-```
-
-#### `transform.`join
-
-将地理数据和元数据进行关联，以下为配置参数：
-
-* type: `'join'`
-* targetField: `string` 地理数据字段名称
-* sourceField: `number` 元数据字段名称
-* data: `array` 需要关联的数据源
-
-```js
-{
- source: {
- data: {
- type: 'FeatureCollection',
- features: [
- {
- type: "Feature",
- geometry: { type: "Point", coordinates: [104.101, 30.649] },
- properties: { name: "chengdu" },
- },
- ],
- },
- parser: { type: 'geojson' },
- transforms: [
- {
- type: 'join',
- targetField: 'name',
- sourceField: 'city',
- data: [{ city: 'chengdu', value: 13 }]
- }
- ]
- }
-}
-```
-
-### `source.`cluster
-
-`boolean` optional default: `false`
-
-是否开启数据聚合处理。
-
-### `source.`clusterOption
-
-`object` optional
-
-数据聚合处理配置。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- cluster: true,
- clusterOption: {
- radius: 30,
- minZoom: 3,
- maxZoom: 22
- }
- }
-}
-```
-
-#### `clusterOption.`radius
-
-`number` optional default: `40`
-
-聚合半径。
-
-#### `clusterOption.`minZoom
-
-`number` optional default: `0`
-
-最小聚合缩放等级。
-
-#### `clusterOption.`maxZoom
-
-`number` optional default: `16`
-
-最大聚合缩放等级。
diff --git a/site/docs/map-api/source/index.zh.md b/site/docs/map-api/source/index.zh.md
deleted file mode 100644
index be952bcf2..000000000
--- a/site/docs/map-api/source/index.zh.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: 数据 - Source
-order: 1
----
-
-## 属性配置
-
-### `source.`data
-
-`array|object|string` required
-
-数据源配置。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-### `source.`parser
-
-`object` required
-
-数据格式解析配置
-
-#### `parser.`type
-
-`string` required
-
-支持以下数据类型：
-
-* CSV
-
-```js
-{
- source: {
- data: `Latitude,Longitude,Name
- 104.101,30.649,chengdu`,
- parser: { type: "csv", x: 'Longitude', y: 'Latitude' },
- },
-}
-```
-
-* JSON
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-* GEOJSON
-
-```js
-{
- source: {
- data: {
- type: "FeatureCollection",
- features: [
- {
- type: "Feature",
- geometry: { type: "Point", coordinates: [104.101, 30.649] },
- properties: { name: "chengdu" },
- },
- ],
- },
- parser: { type: 'geojson' }
- }
-}
-```
-
-#### `parser.`x
-
-`string` optional
-
-点数据的经度映射。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- }
-}
-```
-
-#### `parser.`y
-
-`string` optional
-
-点数据的维度映射。
-
-#### `parser.`x1
-
-`string` optional
-
-线数据的第二个点经度映射。
-
-```js
-{
- source: {
- data: [{ lng1: 112.345, lat1: 30.455, lng2: 112.345, lat2: 30.455, value: 10 }],
- parser: {
- type: 'json',
- x: 'lng1',
- y: 'lat1',
- x1: 'lng1',
- y1: 'lat2'
- }
- }
-}
-```
-
-#### `parser.`y1
-
-`string` optional
-
-线数据的第二个点维度映射。
-
-#### `parser.`coordinates
-
-`array` optional
-
-映射 [GeoJSON](https://datatracker.ietf.org/doc/html/draft-butler-geojson-06) 中的 Geometry 的 coordinates 数据类型。
-
-```js
-{
- source: {
- data: [
- {
- name: "chengdu",
- coordinates: [104.101, 30.649]
- },
- ],
- parser: { type: 'json', coordinates: 'coordinates' },
- },
-}
-```
-
-### `source.`transform
-
-`array` optional
-
-数据处理配置。
-
-#### `transform.`grid
-
-将数据处理为方格网布局，以下为配置参数：
-
-* type: `'grid'`
-* size: `number` 网格半径
-* field: `string` 数据统计字段
-* method: `'count'|'max'|'min'|'sum'|'mean'` 聚合方法
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- transforms: [
- {
- type: 'grid',
- size: 15000,
- field: 't',
- method: 'sum',
- }
- ]
- }
-}
-```
-
-#### `transform.`hexagon
-
-将数据处理为六边形网格布局，以下为配置参数：
-
-* type: `'hexagon'`
-* size: `number` 网格半径
-* field: `string` 数据统计字段
-* method: `'count'|'max'|'min'|'sum'|'mean'` 聚合方法
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- transforms: [
- {
- type: 'hexagon',
- size: 15000,
- field: 't',
- method: 'sum',
- }
- ]
- }
-}
-```
-
-#### `transform.`join
-
-将地理数据和元数据进行关联，以下为配置参数：
-
-* type: `'join'`
-* targetField: `string` 地理数据字段名称
-* sourceField: `number` 元数据字段名称
-* data: `array` 需要关联的数据源
-
-```js
-{
- source: {
- data: {
- type: 'FeatureCollection',
- features: [
- {
- type: "Feature",
- geometry: { type: "Point", coordinates: [104.101, 30.649] },
- properties: { name: "chengdu" },
- },
- ],
- },
- parser: { type: 'geojson' },
- transforms: [
- {
- type: 'join',
- targetField: 'name',
- sourceField: 'city',
- data: [{ city: 'chengdu', value: 13 }]
- }
- ]
- }
-}
-```
-
-### `source.`cluster
-
-`boolean` optional default: `false`
-
-是否开启数据聚合处理。
-
-### `source.`clusterOption
-
-`object` optional
-
-数据聚合处理配置。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- cluster: true,
- clusterOption: {
- radius: 30,
- minZoom: 3,
- maxZoom: 22
- }
- }
-}
-```
-
-#### `clusterOption.`radius
-
-`number` optional default: `40`
-
-聚合半径。
-
-#### `clusterOption.`minZoom
-
-`number` optional default: `0`
-
-最小聚合缩放等级。
-
-#### `clusterOption.`maxZoom
-
-`number` optional default: `16`
-
-最大聚合缩放等级。
diff --git a/site/docs/map-api/theme/index.en.md b/site/docs/map-api/theme/index.en.md
deleted file mode 100644
index 57999aee0..000000000
--- a/site/docs/map-api/theme/index.en.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Theme
-order: 5
----
-
----
-title: 主题 - Theme
-order: 5
----
-
-## 内置主题
-
-内置两套主题 `light` 和 `dark`，默认主题为亮色主题。
-
-```js
-{
- theme: 'light';
-}
-```
-
-## 主题属性
-
-> 静待开放
diff --git a/site/docs/map-api/theme/index.zh.md b/site/docs/map-api/theme/index.zh.md
deleted file mode 100644
index fc6f84513..000000000
--- a/site/docs/map-api/theme/index.zh.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: 主题 - Theme
-order: 5
----
-
-## 内置主题
-
-内置两套主题 `light` 和 `dark`，默认主题为亮色主题。
-
-```js
-{
- theme: 'light';
-}
-```
-
-## 主题属性
-
-> 静待开放
diff --git a/site/docs/map-common/attribute/area-state.en.md b/site/docs/map-common/attribute/area-state.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/area-state.zh.md b/site/docs/map-common/attribute/area-state.zh.md
deleted file mode 100644
index 1e073ff2d..000000000
--- a/site/docs/map-common/attribute/area-state.zh.md
+++ /dev/null
@@ -1,85 +0,0 @@
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: {
- active: true;
- }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: {
- select: true;
- }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
diff --git a/site/docs/map-common/attribute/area-style.en.md b/site/docs/map-common/attribute/area-style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/area-style.zh.md b/site/docs/map-common/attribute/area-style.zh.md
deleted file mode 100644
index 0d3868414..000000000
--- a/site/docs/map-common/attribute/area-style.zh.md
+++ /dev/null
@@ -1,51 +0,0 @@
-### `options.`style
-
-`object` optional
-
-区域样式。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2
- }
-}
-```
-
-#### `style.`opacity
-
-`number` optional
-
-填充透明度。
-
-#### `style.`stroke
-
-`string` optional
-
-边线描边颜色。
-
-#### `style.`strokeWidth
-
-`number` optional
-
-描边的宽度。
-
-#### `style.`lineType
-
-`‘solid’｜'dash'` optional ‘solid’
-
-描边线类型，支持实线与虚线。
-
-#### `style.`dashArray
-
-`[number, number]` optional
-
-虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有描边。
-
-#### `style.`lineOpacity
-
-`number` optional
-
-描边透明度。
diff --git a/site/docs/map-common/attribute/color.en.md b/site/docs/map-common/attribute/color.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/color.zh.md b/site/docs/map-common/attribute/color.zh.md
deleted file mode 100644
index b06b77490..000000000
--- a/site/docs/map-common/attribute/color.zh.md
+++ /dev/null
@@ -1,66 +0,0 @@
-### `options.`color
-
-`string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{ color: 'red', }
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{ c: 'red', t: 20, n: 'chengdu' }],
- // ...
- },
- color: { field: 'c', }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- field: 't',
- value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
- scale: { type: 'quantile' }
- }
-}
-```
diff --git a/site/docs/map-common/attribute/components.en.md b/site/docs/map-common/attribute/components.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/components.zh.md b/site/docs/map-common/attribute/components.zh.md
deleted file mode 100644
index deb9ad237..000000000
--- a/site/docs/map-common/attribute/components.zh.md
+++ /dev/null
@@ -1,35 +0,0 @@
-### `options.`label
-
-`false｜LabelOptions` optional default: `false`
-
-地图数据标签配置，详见 [Label](/zh/docs/map-api/components/label)。
-
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
diff --git a/site/docs/map-common/attribute/grid-style.en.md b/site/docs/map-common/attribute/grid-style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/grid-style.zh.md b/site/docs/map-common/attribute/grid-style.zh.md
deleted file mode 100644
index 92b10e92e..000000000
--- a/site/docs/map-common/attribute/grid-style.zh.md
+++ /dev/null
@@ -1,33 +0,0 @@
-### `options.`style
-
-`object` optional
-
-全局样式。
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
-
-#### `style.`opacity
-
-`number` optional default: `1`
-
-透明度。
-
-#### `style.`coverage
-
-`number` optional default: `0.9`
-
-覆盖度，范围 0 到 1。
-
-#### `style.`angle
-
-`number` optional default: `0`
-
-旋转角度，范围 0 到 360。
diff --git a/site/docs/map-common/attribute/map.en.md b/site/docs/map-common/attribute/map.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/map.zh.md b/site/docs/map-common/attribute/map.zh.md
deleted file mode 100644
index 083313908..000000000
--- a/site/docs/map-common/attribute/map.zh.md
+++ /dev/null
@@ -1,80 +0,0 @@
-### `options.`map
-
-`MapConfig` required
-
-地图容器配置项。
-
-#### `map.`type
-
-`string` optional default: `'amap'`
-
-地图底图类型，支持以下两种类型：
-
-* amap: 高德地图
-* mapbox: Mapbox 地图
-
-地图底图类型不同时，`map` 下面的有的配置项不相同，比如 `maxZoom`，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。除此之外还有，底图的交互状态配置，`zoomEnable`、`dragEnable`等。各配置项可详见各官网：高德地图 [配置项](https://lbs.amap.com/api/javascript-api/reference/map)；Mapbox 地图 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters)。
-
-#### `map.`token
-
-`string` required
-
-地图服务 token，需服务平台申请。
-
-#### `map.`center
-
-`number[]` optional default: `[0, 0]`
-
-初始中心经纬度。
-
-#### `map.`pitch
-
-`number` optional default: `0`
-
-初始倾角。
-
-#### `map.`rotation
-
-`number` optional default: `0`
-
-初始旋转角度。
-
-#### `map.`zoom
-
-`number` optional default: `0`
-
-初始缩放层级，底图可缩放层级分布为：
-
-* Mapbox （0-24）
-* 高德 （2-19）
-
-#### `map.`minZoom
-
-`number` optional default: `0`
-
-地图最小缩放等级。
-
-#### `map.`maxZoom
-
-`number` optional default: `20`
-
-地图最大缩放等级，AMap 最大缩放等级 18，Mapbox 最大缩放等级 20。
-
-#### `map.`style
-
-`string` optional default: `dark`
-
-内置样式:
-
-* dark: 黑暗
-* light: 明亮
-* normal: 普通
-* blank: 无底图
-
-自定义样式:
-
-```js
-{
- style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true';
-}
-```
diff --git a/site/docs/map-common/attribute/path-color.en.md b/site/docs/map-common/attribute/path-color.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/path-color.zh.md b/site/docs/map-common/attribute/path-color.zh.md
deleted file mode 100644
index 981e98bf2..000000000
--- a/site/docs/map-common/attribute/path-color.zh.md
+++ /dev/null
@@ -1,75 +0,0 @@
-### `options.`color
-
-`string|object|Function` optional default: `'#5FD3A6'`
-
-元素颜色。
-
-```js
-{
- color: 'red',
-}
-```
-
-#### `color.`field
-
-`string` optional
-
-元素颜色值映射关联字段。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- },
- color: {
- fied: 'c'
- }
-}
-```
-
-#### `color.`value
-
-`string|string[]|Function` optional
-
-元素颜色值映射值。
-
-```js
-{
- color: {
- fied: 't',
- value: ({ t }) => {
- return t > 20 ? 'red': 'blue'
- }
- }
-}
-```
-
-#### `color.`scale
-
-`ScaleConfig` optional default: `{type: 'linear'}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- color: {
- fied: 't',
- value: ['blue', 'red'],
- scale: {type: 'quantile'}
- }
-}
-```
diff --git a/site/docs/map-common/attribute/path-components.en.md b/site/docs/map-common/attribute/path-components.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/path-components.zh.md b/site/docs/map-common/attribute/path-components.zh.md
deleted file mode 100644
index ea179c5ac..000000000
--- a/site/docs/map-common/attribute/path-components.zh.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### `options.`tooltip
-
-`false｜TooltipOptions` optional default: `false`
-
-数据悬浮提示组件配置，详见 [Tooltip](/zh/docs/map-api/components/tooltip)。
-
-### `options.`legend
-
-`false｜LegendOptions` optional default: `false`
-
-地图图例组件配置，详见 [Legend](/zh/docs/map-api/components/legend)。
-
-### `options.`zoom
-
-`false｜ZoomControlOptions` optional default: `false`
-
-地图放大缩小控件，详见 [Zoom](/zh/docs/map-api/components/zoom)。
-
-### `options.`scale
-
-`false｜ScaleControlOptions` optional default: `false`
-
-地图比例尺控件，详见 [Scale](/zh/docs/map-api/components/scale)。
-
-### `options.`layerMenu
-
-`false｜LayerMenuControlOptions` optional default: `false`
-
-地图图层列表控件，详见 [LayerMenu](/zh/docs/map-api/components/layerMenu)。
diff --git a/site/docs/map-common/attribute/path-size.en.md b/site/docs/map-common/attribute/path-size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/path-size.zh.md b/site/docs/map-common/attribute/path-size.zh.md
deleted file mode 100644
index cfadf8e8e..000000000
--- a/site/docs/map-common/attribute/path-size.zh.md
+++ /dev/null
@@ -1,75 +0,0 @@
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{
- size: 12,
-}
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- s: 2,
- t: 3,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- },
- size: {
- fied: 's';
- }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- fied: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{type: 'linear'}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- fied: 't',
- value: [12, 15],
- scale: {type: 'quantile'}
- }
-}
-```
diff --git a/site/docs/map-common/attribute/path-style.en.md b/site/docs/map-common/attribute/path-style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/path-style.zh.md b/site/docs/map-common/attribute/path-style.zh.md
deleted file mode 100644
index f76318c7f..000000000
--- a/site/docs/map-common/attribute/path-style.zh.md
+++ /dev/null
@@ -1,33 +0,0 @@
-### `options.`style
-
-`object` optional
-
-全局样式。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
-
-#### `style.`opacity
-
-`number` optional
-
-线透明度。
-
-#### `style.`lineType
-
-`‘solid’｜'dash'` optional ‘solid’
-
-线类型，支持实线与虚线。
-
-#### `style.`dashArray
-
-`[number, number]` optional
-
-虚线间隔，虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
diff --git a/site/docs/map-common/attribute/radiation.en.md b/site/docs/map-common/attribute/radiation.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/radiation.zh.md b/site/docs/map-common/attribute/radiation.zh.md
deleted file mode 100644
index a4a6d74b7..000000000
--- a/site/docs/map-common/attribute/radiation.zh.md
+++ /dev/null
@@ -1,38 +0,0 @@
-### `options.`radiation
-
-`object` optional
-
-落地点辐射圈。
-
-```js
-{
- radiation: {
- color: 'yellow',
- size: 20,
- }
-}
-```
-
-#### `radiation.`enabled
-
-`boolean` optional `true`
-
-是否开启辐射圈。
-
-#### `radiation.`color
-
-`string` optional
-
-辐射圈颜色。
-
-#### `radiation.`size
-
-`number|object|Function` optional default: `20`
-
-辐射圈大小。
-
-#### `radiation.`animate
-
-`boolean` optional `true`
-
-是否启用辐射圈动画。
diff --git a/site/docs/map-common/attribute/scale.en.md b/site/docs/map-common/attribute/scale.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/scale.zh.md b/site/docs/map-common/attribute/scale.zh.md
deleted file mode 100644
index 9493bd77e..000000000
--- a/site/docs/map-common/attribute/scale.zh.md
+++ /dev/null
@@ -1,10 +0,0 @@
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
diff --git a/site/docs/map-common/attribute/size.en.md b/site/docs/map-common/attribute/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/size.zh.md b/site/docs/map-common/attribute/size.zh.md
deleted file mode 100644
index 5e7a2cc63..000000000
--- a/site/docs/map-common/attribute/size.zh.md
+++ /dev/null
@@ -1,66 +0,0 @@
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ s: 12, t: 20, n: 'chengdu' }],
- // ...
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
diff --git a/site/docs/map-common/attribute/state.en.md b/site/docs/map-common/attribute/state.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/state.zh.md b/site/docs/map-common/attribute/state.zh.md
deleted file mode 100644
index b23e5c2dc..000000000
--- a/site/docs/map-common/attribute/state.zh.md
+++ /dev/null
@@ -1,49 +0,0 @@
-### `options.`state
-
-`StateAttribute` optional
-
-元素交互反馈效果。
-
-#### `state.`active
-
-`boolean｜ActiveOption` optional default: `false`
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: { color: 'red', }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜ActiveOption` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: { color: 'red', }
- }
-}
-```
diff --git a/site/docs/map-common/attribute/style.en.md b/site/docs/map-common/attribute/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/attribute/style.zh.md b/site/docs/map-common/attribute/style.zh.md
deleted file mode 100644
index 9efb52bc6..000000000
--- a/site/docs/map-common/attribute/style.zh.md
+++ /dev/null
@@ -1,33 +0,0 @@
-### `options.`style
-
-`object` optional
-
-全局样式。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2
- }
-}
-```
-
-#### `style.`opacity
-
-`number` optional
-
-元素透明度。
-
-#### `style.`stroke
-
-`string` optional
-
-元素边线填充颜色。
-
-#### `style.`strokeWidth
-
-`number` optional
-
-元素线的宽度。
diff --git a/site/docs/map-common/composite-layers/choropleth-layer/state.en.md b/site/docs/map-common/composite-layers/choropleth-layer/state.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/choropleth-layer/state.zh.md b/site/docs/map-common/composite-layers/choropleth-layer/state.zh.md
deleted file mode 100644
index 33ecd6217..000000000
--- a/site/docs/map-common/composite-layers/choropleth-layer/state.zh.md
+++ /dev/null
@@ -1,77 +0,0 @@
-### `options.`state
-
-`object` optional
-
-区域面交互反馈效果。
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- lineWidth: 1,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜ChoroplethLayerActiveOptions` optional default: `false`
-
-ChoroplethLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fillColor | 填充颜色 | `false｜string` | `false` | optional |
-| strokeColor | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1` | optional |
-| lineOpacity | 描边透明度 | `number` | `1` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fillColor: false,
- strokeColor: '#2f54eb',
- }
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/composite-common/attribute.en.md b/site/docs/map-common/composite-layers/composite-common/attribute.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/composite-common/attribute.zh.md b/site/docs/map-common/composite-layers/composite-common/attribute.zh.md
deleted file mode 100644
index 06526f165..000000000
--- a/site/docs/map-common/composite-layers/composite-common/attribute.zh.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
diff --git a/site/docs/map-common/composite-layers/composite-common/event.en.md b/site/docs/map-common/composite-layers/composite-common/event.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/composite-common/event.zh.md b/site/docs/map-common/composite-layers/composite-common/event.zh.md
deleted file mode 100644
index c6b2ba64e..000000000
--- a/site/docs/map-common/composite-layers/composite-common/event.zh.md
+++ /dev/null
@@ -1,53 +0,0 @@
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-common/composite-layers/composite-common/method.en.md b/site/docs/map-common/composite-layers/composite-common/method.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/composite-common/method.zh.md b/site/docs/map-common/composite-layers/composite-common/method.zh.md
deleted file mode 100644
index 5815eb5f0..000000000
--- a/site/docs/map-common/composite-layers/composite-common/method.zh.md
+++ /dev/null
@@ -1,119 +0,0 @@
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
diff --git a/site/docs/map-common/composite-layers/composite-common/options.en.md b/site/docs/map-common/composite-layers/composite-common/options.en.md
deleted file mode 100644
index 7043b34a1..000000000
--- a/site/docs/map-common/composite-layers/composite-common/options.en.md
+++ /dev/null
@@ -1,58 +0,0 @@
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层可见范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
diff --git a/site/docs/map-common/composite-layers/composite-common/options.zh.md b/site/docs/map-common/composite-layers/composite-common/options.zh.md
deleted file mode 100644
index 178b8c1f0..000000000
--- a/site/docs/map-common/composite-layers/composite-common/options.zh.md
+++ /dev/null
@@ -1,58 +0,0 @@
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
diff --git a/site/docs/map-common/composite-layers/core-common/attribute.en.md b/site/docs/map-common/composite-layers/core-common/attribute.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/core-common/attribute.zh.md b/site/docs/map-common/composite-layers/core-common/attribute.zh.md
deleted file mode 100644
index 06526f165..000000000
--- a/site/docs/map-common/composite-layers/core-common/attribute.zh.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### name
-
-`string`
-
-当前图层名。
-
-### id
-
-`string`
-
-当前图层 ID。
-
-### type
-
-`string`
-
-当前图层所属类型。
-
-### options
-
-`LayerOptions`
-
-当前图层的所有配置项。
diff --git a/site/docs/map-common/composite-layers/core-common/event.en.md b/site/docs/map-common/composite-layers/core-common/event.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/core-common/event.zh.md b/site/docs/map-common/composite-layers/core-common/event.zh.md
deleted file mode 100644
index c6b2ba64e..000000000
--- a/site/docs/map-common/composite-layers/core-common/event.zh.md
+++ /dev/null
@@ -1,53 +0,0 @@
-### 事件监听
-
-#### 绑定事件
-
-```js
-layer.on(eventName: string, callback: (...args) => void);
-```
-
-#### 绑定一次事件
-
-```js
-layer.once(eventName: string, callback: (...args) => void);
-```
-
-#### 解绑事件
-
-```js
-layer.off(eventName: string, callback: (...args) => void);
-```
-
-### 事件类别
-
-#### 生命周期事件
-
-| 事件名 | 类型 | 描述 |
-| ---------- | ------------ | ------------------------- |
-| inited | 生命周期事件 | 图层初始化完成事件 |
-| add | 生命周期事件 | 图层添加到场景 scene 事件 |
-| remove | 生命周期事件 | 图层移除时事件 |
-| dataUpdate | 生命周期事件 | 图层数据源更新事件 |
-
-#### 点击事件
-
-| 事件名 | 类型 | 描述 |
-| ------------- | -------- | ------------------------ |
-| click | 左键事件 | 左键点击图层事件 |
-| unclick | 左键事件 | 图层外左键点击事件 |
-| contextmenu | 右键事件 | 图层要素点击右键菜单事件 |
-| uncontextmenu | 右键事件 | 图层外点击右键事件 |
-
-#### 鼠标事件
-
-| 事件名 | 类型 | 描述 |
-| ----------- | -------- | -------------------------- |
-| mouseenter | 滑动事件 | 鼠标进入图层要素事件 |
-| mousemove | 滑动事件 | 鼠标在图层上移动时触发事件 |
-| unmousemove | 滑动事件 | 图层外鼠标移动事件 |
-| mouseout | 滑动事件 | 鼠标移出图层要素事件 |
-| mouseup | 滑动事件 | 鼠标在图层上单击抬起事件 |
-| unmouseup | 滑动事件 | 图层外鼠标抬起 |
-| mousedown | 滑动事件 | 鼠标在图层上单击按下事件 |
-| unmousedown | 滑动事件 | 图层外单击按下事件 |
-| unpick | 鼠标事件 | 图层外的操作的所有事件 |
diff --git a/site/docs/map-common/composite-layers/core-common/method.en.md b/site/docs/map-common/composite-layers/core-common/method.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/core-common/method.zh.md b/site/docs/map-common/composite-layers/core-common/method.zh.md
deleted file mode 100644
index ec3898ec5..000000000
--- a/site/docs/map-common/composite-layers/core-common/method.zh.md
+++ /dev/null
@@ -1,127 +0,0 @@
-### addTo
-
-添加到场景。
-
-```js
-layer.addTo(scene: Scene);
-```
-
-### remove
-
-从场景移除。
-
-```js
-layer.remove();
-```
-
-### update
-
-更新配置且重新渲染。
-
-```js
-layer.update(options: Partial);
-```
-
-### changeData
-
-更新数据。
-
-```js
-layer.changeData(source: SourceOptions);
-```
-
-### setIndex
-
-设置图层层叠值。
-
-```js
-layer.setIndex();
-```
-
-### setBlend
-
-设置图层的元素混合配置。
-
-```js
-layer.setBlend();
-```
-
-### setMinZoom
-
-设置图层可见最小缩放层级。
-
-```js
-layer.setMinZoom();
-```
-
-### setMaxZoom
-
-设置图层可见最大缩放层级。
-
-```js
-layer.setMaxZoom();
-```
-
-### show
-
-显示图层。
-
-```js
-layer.show();
-```
-
-### hide
-
-隐藏图层。
-
-```js
-layer.hide();
-```
-
-### toggleVisible
-
-切换图层显隐状态。
-
-```js
-layer.toggleVisible();
-```
-
-### isVisible
-
-图层是否可见。
-
-```js
-layer.isVisible() : boolean;
-```
-
-### fitBounds
-
-图层缩放到范围。
-
-```js
-layer.fitBounds(fitBoundsOptions?: Bounds);
-```
-
-### boxSelect
-
-图层框选数据。
-
-```js
-layer.boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void);
-```
-
-### getLegendItems
-
-获取图例数据。
-
-```js
-layer.getLegendItems(type: string): Record[];
-```
-
-### destroy
-
-摧毁。
-
-```js
-layer.destroy();
-```
diff --git a/site/docs/map-common/composite-layers/core-common/options.en.md b/site/docs/map-common/composite-layers/core-common/options.en.md
deleted file mode 100644
index 7043b34a1..000000000
--- a/site/docs/map-common/composite-layers/core-common/options.en.md
+++ /dev/null
@@ -1,58 +0,0 @@
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层可见范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
diff --git a/site/docs/map-common/composite-layers/core-common/options.zh.md b/site/docs/map-common/composite-layers/core-common/options.zh.md
deleted file mode 100644
index 178b8c1f0..000000000
--- a/site/docs/map-common/composite-layers/core-common/options.zh.md
+++ /dev/null
@@ -1,58 +0,0 @@
-### `options.`name
-
-`string` optional
-
-图层名。
-
-### `options.`id
-
-`string` optional
-
-图层 ID。
-
-### `options.`zIndex
-
-`number` optional default: `0`
-
-图层层叠顺序，数值越大，图层层叠最高。
-
-### `options.`visible
-
-`boolean` optional default: `true`
-
-图层是否可见。
-
-### `options.`minZoom
-
-`number` optional
-
-图层可见最小缩放层级。
-
-### `options.`maxZoom
-
-`number` optional
-
-图层可见最大缩放层级。
-
-### `options.`autoFit
-
-`boolean` optional default: `false`
-
-图层加载成功后是否自动定位到图层数据可见范围，注意 后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围。
-
-### `options.`pickingBuffer
-
-`number` optional default: `0`
-
-图层可拾取范围。
-
-### `options.`blend
-
-`string` optional default: `normal`
-
-图层的元素混合效果，支持以下效果：
-
-* normal：正常效果，默认效果
-* additive：叠加模式
-* subtractive：相减模式
-* max：最大值
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/shape.en.md b/site/docs/map-common/composite-layers/heatmap-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/shape.zh.md b/site/docs/map-common/composite-layers/heatmap-layer/shape.zh.md
deleted file mode 100644
index 43ae268ac..000000000
--- a/site/docs/map-common/composite-layers/heatmap-layer/shape.zh.md
+++ /dev/null
@@ -1,30 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-支持三种热力类型，普通热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-蜂窝热力支持：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-网格热力支持：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'heatmap', }
-```
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/size.en.md b/site/docs/map-common/composite-layers/heatmap-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/size.zh.md b/site/docs/map-common/composite-layers/heatmap-layer/size.zh.md
deleted file mode 100644
index c4cf9cceb..000000000
--- a/site/docs/map-common/composite-layers/heatmap-layer/size.zh.md
+++ /dev/null
@@ -1,59 +0,0 @@
-### `options.`size
-
-`number|SizeStyleAttribute|Function` optional
-
-当 shape 为普通热力（heatmap、heatmap3D）时，size 代表热力大小，配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
-
-当 shape 为 3D 网格/蜂窝热力时，size 表示高度，shape 为 2D 时，size 无需设置
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/style.en.md b/site/docs/map-common/composite-layers/heatmap-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/heatmap-layer/style.zh.md b/site/docs/map-common/composite-layers/heatmap-layer/style.zh.md
deleted file mode 100644
index 340685422..000000000
--- a/site/docs/map-common/composite-layers/heatmap-layer/style.zh.md
+++ /dev/null
@@ -1,51 +0,0 @@
-### `options.`style
-
-`HeatmapLayerStyleOptions|GridHeatmapLayerStyleOptions` optional
-
-普通热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ------------ | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| rampColors | 热力色带 | `RampColors` | | optional |
-
-热力色带，RampColors 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------- | ---------- | ------ | -------- |
-| colors | 颜色 | `string[]` | | required |
-| positions | 热力映射值 | `number[]` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- rampColors: {
- colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
- positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
- },
- }
-}
-```
-
-网格/蜂窝热力样式，GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/line-layer/animate.en.md b/site/docs/map-common/composite-layers/line-layer/animate.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/line-layer/animate.zh.md b/site/docs/map-common/composite-layers/line-layer/animate.zh.md
deleted file mode 100644
index 7b986c342..000000000
--- a/site/docs/map-common/composite-layers/line-layer/animate.zh.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/line-layer/shape.en.md b/site/docs/map-common/composite-layers/line-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/line-layer/shape.zh.md b/site/docs/map-common/composite-layers/line-layer/shape.zh.md
deleted file mode 100644
index 7a7f03cef..000000000
--- a/site/docs/map-common/composite-layers/line-layer/shape.zh.md
+++ /dev/null
@@ -1,13 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'line'`
-
-除直线外还支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'line', }
-```
diff --git a/site/docs/map-common/composite-layers/line-layer/source.en.md b/site/docs/map-common/composite-layers/line-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/line-layer/source.zh.md b/site/docs/map-common/composite-layers/line-layer/source.zh.md
deleted file mode 100644
index d3dd68a5c..000000000
--- a/site/docs/map-common/composite-layers/line-layer/source.zh.md
+++ /dev/null
@@ -1,19 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/line-layer/style.en.md b/site/docs/map-common/composite-layers/line-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/line-layer/style.zh.md b/site/docs/map-common/composite-layers/line-layer/style.zh.md
deleted file mode 100644
index f1cc06940..000000000
--- a/site/docs/map-common/composite-layers/line-layer/style.zh.md
+++ /dev/null
@@ -1,25 +0,0 @@
-### `options.`style
-
-`LineLayerStyleOptions` optional
-
-线样式，LineLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/point-layer/animate.en.md b/site/docs/map-common/composite-layers/point-layer/animate.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/point-layer/animate.zh.md b/site/docs/map-common/composite-layers/point-layer/animate.zh.md
deleted file mode 100644
index 10cc0db02..000000000
--- a/site/docs/map-common/composite-layers/point-layer/animate.zh.md
+++ /dev/null
@@ -1,11 +0,0 @@
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
diff --git a/site/docs/map-common/composite-layers/point-layer/shape.en.md b/site/docs/map-common/composite-layers/point-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/point-layer/shape.zh.md b/site/docs/map-common/composite-layers/point-layer/shape.zh.md
deleted file mode 100644
index 548d70e37..000000000
--- a/site/docs/map-common/composite-layers/point-layer/shape.zh.md
+++ /dev/null
@@ -1,108 +0,0 @@
-### `options.`shape
-
-`string|ShapeStyleAttribute|Function` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/point-layer/source.en.md b/site/docs/map-common/composite-layers/point-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/point-layer/source.zh.md b/site/docs/map-common/composite-layers/point-layer/source.zh.md
deleted file mode 100644
index cc1a8dd63..000000000
--- a/site/docs/map-common/composite-layers/point-layer/source.zh.md
+++ /dev/null
@@ -1,14 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
diff --git a/site/docs/map-common/composite-layers/point-layer/style.en.md b/site/docs/map-common/composite-layers/point-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/point-layer/style.zh.md b/site/docs/map-common/composite-layers/point-layer/style.zh.md
deleted file mode 100644
index 2a4165324..000000000
--- a/site/docs/map-common/composite-layers/point-layer/style.zh.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/polygon-layer/shape.en.md b/site/docs/map-common/composite-layers/polygon-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/polygon-layer/shape.zh.md b/site/docs/map-common/composite-layers/polygon-layer/shape.zh.md
deleted file mode 100644
index c6ff3ce30..000000000
--- a/site/docs/map-common/composite-layers/polygon-layer/shape.zh.md
+++ /dev/null
@@ -1,8 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'fill'`
-
-内置两种 shape：
-
-* 2D 填充面：`'fill'`
-* 3D 立方体：`'extrude'`
diff --git a/site/docs/map-common/composite-layers/polygon-layer/source.en.md b/site/docs/map-common/composite-layers/polygon-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/polygon-layer/source.zh.md b/site/docs/map-common/composite-layers/polygon-layer/source.zh.md
deleted file mode 100644
index 9b371504b..000000000
--- a/site/docs/map-common/composite-layers/polygon-layer/source.zh.md
+++ /dev/null
@@ -1,40 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/polygon-layer/style.en.md b/site/docs/map-common/composite-layers/polygon-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/polygon-layer/style.zh.md b/site/docs/map-common/composite-layers/polygon-layer/style.zh.md
deleted file mode 100644
index 4aa05ef63..000000000
--- a/site/docs/map-common/composite-layers/polygon-layer/style.zh.md
+++ /dev/null
@@ -1,17 +0,0 @@
-### `options.`style
-
-`PolygonLayerStyleOptions` optional
-
-区域样式，PolygonLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------- | ------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- }
-}
-```
diff --git a/site/docs/map-common/composite-layers/text-layer/style.en.md b/site/docs/map-common/composite-layers/text-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/composite-layers/text-layer/style.zh.md b/site/docs/map-common/composite-layers/text-layer/style.zh.md
deleted file mode 100644
index d72daf3b5..000000000
--- a/site/docs/map-common/composite-layers/text-layer/style.zh.md
+++ /dev/null
@@ -1,36 +0,0 @@
-`TextLayerStyleOptions` optional
-
-字体样式，TextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
diff --git a/site/docs/map-common/layers/arc-layer/shape.en.md b/site/docs/map-common/layers/arc-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/arc-layer/shape.zh.md b/site/docs/map-common/layers/arc-layer/shape.zh.md
deleted file mode 100644
index eea5b64b6..000000000
--- a/site/docs/map-common/layers/arc-layer/shape.zh.md
+++ /dev/null
@@ -1,13 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'arc'`
-
-支持 2D 与 3D 弧线及大圆航线：
-
-* arc
-* arc3d
-* greatcircle
-
-```js
-{ shape: 'arc', }
-```
diff --git a/site/docs/map-common/layers/arc-layer/size.en.md b/site/docs/map-common/layers/arc-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/arc-layer/size.zh.md b/site/docs/map-common/layers/arc-layer/size.zh.md
deleted file mode 100644
index 57f5ef2c3..000000000
--- a/site/docs/map-common/layers/arc-layer/size.zh.md
+++ /dev/null
@@ -1,66 +0,0 @@
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
- },
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' }
- }
-}
-```
diff --git a/site/docs/map-common/layers/arc-layer/style.en.md b/site/docs/map-common/layers/arc-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/arc-layer/style.zh.md b/site/docs/map-common/layers/arc-layer/style.zh.md
deleted file mode 100644
index 9887c738f..000000000
--- a/site/docs/map-common/layers/arc-layer/style.zh.md
+++ /dev/null
@@ -1,25 +0,0 @@
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样式，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-| sourceColor | 渐变起点颜色 | `string` | | optional |
-| targetColor | 渐变终点颜色 | `string` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
diff --git a/site/docs/map-common/layers/area-layer/source.en.md b/site/docs/map-common/layers/area-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/area-layer/source.zh.md b/site/docs/map-common/layers/area-layer/source.zh.md
deleted file mode 100644
index 9b371504b..000000000
--- a/site/docs/map-common/layers/area-layer/source.zh.md
+++ /dev/null
@@ -1,40 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-const data = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- properties: { name: '上海市', code: 310000, c: 'red', t: 20 },
- geometry: {
- type: 'Polygon',
- coordinates: [
- [
- [115.1806640625, 30.637912028341123],
- [114.9609375, 29.152161283318915],
- [117.79541015625001, 27.430289738862594],
- [118.740234375, 29.420460341013133],
- [117.46582031249999, 31.50362930577303],
- [115.1806640625, 30.637912028341123],
- // ......
- ],
- ],
- },
- },
- ],
-};
-```
-
-```js
-{
- source: {
- data,
- parser: { type: 'geojson' }
- }
-}
-```
diff --git a/site/docs/map-common/layers/area-layer/state.en.md b/site/docs/map-common/layers/area-layer/state.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/area-layer/state.zh.md b/site/docs/map-common/layers/area-layer/state.zh.md
deleted file mode 100644
index 9462e15d5..000000000
--- a/site/docs/map-common/layers/area-layer/state.zh.md
+++ /dev/null
@@ -1,81 +0,0 @@
-### `options.`state
-
-`object` optional
-
-区域交互反馈效果。
-
-```js
-{
- state: {
- active: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- select: false,
- }
-}
-```
-
-#### `state.`active
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-AreaLayerActiveOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ---------- | --------------- | ----------- | -------- |
-| fill | 填充颜色 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `false｜string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-
-标签 mousehover 高亮效果，开启 mousehover 元素高亮效果：
-
-```js
-{
- state: { active: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- active: {
- fill: false,
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
-
-#### `state.`select
-
-`boolean｜AreaLayerActiveOptions` optional default: `false`
-
-元素 mouseclick 选中高亮效果，开启 mouseclick 元素高亮效果：
-
-```js
-{
- state: { select: true, }
-}
-```
-
-开启 mousehover 元素高亮效果并自定义设置高亮颜色：
-
-```js
-{
- state: {
- select: {
- fill: 'red',
- stroke: false,
- lineWidth: 1.5,
- lineOpacity: 0.8,
- }
- }
-}
-```
diff --git a/site/docs/map-common/layers/area-layer/style.en.md b/site/docs/map-common/layers/area-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/area-layer/style.zh.md b/site/docs/map-common/layers/area-layer/style.zh.md
deleted file mode 100644
index 251fb092e..000000000
--- a/site/docs/map-common/layers/area-layer/style.zh.md
+++ /dev/null
@@ -1,27 +0,0 @@
-### `options.`style
-
-`AreaLayerStyle` optional
-
-区域样式，AreaLayerStyle 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------------- | ------------------------------------ | ------------------ | ----------- | -------- |
-| opacity | 填充透明度 | `number` | `1` | optional |
-| fillBottomColor | 填充兜底颜色，用于颜色值映值不存在时 | `false｜string` | `false` | optional |
-| stroke | 描边颜色 | `string` | `'#2f54eb'` | optional |
-| lineWidth | 描边的宽度 | `number` | `1.5` | optional |
-| lineOpacity | 描边透明度 | `number` | `0.8` | optional |
-| lineType | 描边线类型，支持实线与虚线 | `‘solid’｜'dash'` | `‘solid’` | optional |
-| lineDash | 描边的虚线间隔 | `[number, number]` | | optional |
-
-> lineDash: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- lineWidth: 2,
- }
-}
-```
diff --git a/site/docs/map-common/layers/dot-layer/animate.en.md b/site/docs/map-common/layers/dot-layer/animate.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/dot-layer/animate.zh.md b/site/docs/map-common/layers/dot-layer/animate.zh.md
deleted file mode 100644
index 86631ea91..000000000
--- a/site/docs/map-common/layers/dot-layer/animate.zh.md
+++ /dev/null
@@ -1,17 +0,0 @@
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | ------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| speed | 水波速度 | `number` | | optional |
-| rings | 水波环数 | `number` | | optional |
-
-```js
-{
- animate: true,
-}
-```
diff --git a/site/docs/map-common/layers/dot-layer/shape.en.md b/site/docs/map-common/layers/dot-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/dot-layer/shape.zh.md b/site/docs/map-common/layers/dot-layer/shape.zh.md
deleted file mode 100644
index a43742ace..000000000
--- a/site/docs/map-common/layers/dot-layer/shape.zh.md
+++ /dev/null
@@ -1,108 +0,0 @@
-### `options.`shape
-
-`string|Function|object` optional default: `'circle'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
- * pentagon: 五角星
- * octogon: 八边形
- * hexagram: 六边形
- * rhombus: 菱形
- * vesica: 椭圆形
- * dot: 圆点
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'circle', }
-```
-
-除内置图标外，还可**自定义图标**：
-
-1. 注册图标
-
-```js
-const images = [
- { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
- { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
- { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
-];
-registerImages(images);
-```
-
-2. 使用注册图标
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: '01', n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: '01',
-}
-```
-
-#### `shape.`field
-
-`string` optional
-
-元素形状值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- shape: { field: 's', }
-}
-```
-
-#### `shape.`value
-
-`string|string[]|Function` optional
-
-元素形状值映射值。
-
-```js
-{
- shape: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 'triangle': 'circle'
- }
- }
-}
-```
-
-#### `shape.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- shape: {
- field: 't',
- value: ['circle', 'triangle'],
- scale: { type: 'quantile' }
- }
-}
-```
diff --git a/site/docs/map-common/layers/dot-layer/size.en.md b/site/docs/map-common/layers/dot-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/dot-layer/size.zh.md b/site/docs/map-common/layers/dot-layer/size.zh.md
deleted file mode 100644
index 91329e23d..000000000
--- a/site/docs/map-common/layers/dot-layer/size.zh.md
+++ /dev/null
@@ -1,66 +0,0 @@
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: { field: 's' },
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
diff --git a/site/docs/map-common/layers/dot-layer/source.en.md b/site/docs/map-common/layers/dot-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/dot-layer/source.zh.md b/site/docs/map-common/layers/dot-layer/source.zh.md
deleted file mode 100644
index cc1a8dd63..000000000
--- a/site/docs/map-common/layers/dot-layer/source.zh.md
+++ /dev/null
@@ -1,14 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, c: 'red', t: 20, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
-}
-```
diff --git a/site/docs/map-common/layers/dot-layer/style.en.md b/site/docs/map-common/layers/dot-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/dot-layer/style.zh.md b/site/docs/map-common/layers/dot-layer/style.zh.md
deleted file mode 100644
index 2a4165324..000000000
--- a/site/docs/map-common/layers/dot-layer/style.zh.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### `options.`style
-
-`PointLayerStyleOptions` optional
-
-元素样式, PointLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------ | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| stroke | 边线填充颜色 | `string` | | optional |
-| strokeWidth | 描边的宽度 | `number` | | optional |
-
-```js
-{
- style: {
- opacity: 0.8,
- stroke: 'white',
- strokeWidth: 2,
- }
-}
-```
diff --git a/site/docs/map-common/layers/grid-layer/shape.en.md b/site/docs/map-common/layers/grid-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/grid-layer/shape.zh.md b/site/docs/map-common/layers/grid-layer/shape.zh.md
deleted file mode 100644
index 07941fd86..000000000
--- a/site/docs/map-common/layers/grid-layer/shape.zh.md
+++ /dev/null
@@ -1,20 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'square'`
-
-元素形状，内置以下形状：
-
-* 2D
- * circle: 圆形
- * square: 正方形
- * hexagon: 六边形
- * triangle: 三角形
-* 3D
- * cylinder: 圆柱
- * triangleColumn: 三角形柱
- * hexagonColumn: 六角形柱
- * squareColumn: 方柱
-
-```js
-{ shape: 'square', }
-```
diff --git a/site/docs/map-common/layers/grid-layer/size.en.md b/site/docs/map-common/layers/grid-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/grid-layer/size.zh.md b/site/docs/map-common/layers/grid-layer/size.zh.md
deleted file mode 100644
index 4e5225dc6..000000000
--- a/site/docs/map-common/layers/grid-layer/size.zh.md
+++ /dev/null
@@ -1,41 +0,0 @@
-### `options.`size
-
-`number|object|Function` optional
-
-元素大小。
-
-**shape 为 2D 时，size 无需设置；shape 为 3D 时，size 表示高度。**
-
-```js
-{
- size: {
- field: 'value',
- value: ({ value }) => value * 2
- }
-}
-```
-
-#### `size.`field
-
-`string` required
-
-网格大小映射字段。
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-网格大小值映射值。
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
diff --git a/site/docs/map-common/layers/grid-layer/source.en.md b/site/docs/map-common/layers/grid-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/grid-layer/source.zh.md b/site/docs/map-common/layers/grid-layer/source.zh.md
deleted file mode 100644
index bead692a9..000000000
--- a/site/docs/map-common/layers/grid-layer/source.zh.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置。
-
-#### `source.`aggregation
-
-`GridAggregation` required
-
-数据网格聚合配置，GridAggregation 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ------ | -------- | -------------------------------------- | ------- | -------- |
-| field | 聚合字段 | `string` | | required |
-| radius | 网格半径 | `number` | `15000` | optional |
-| method | 聚合类型 | `'count'｜'max'｜'min'｜'sum'｜'mean'` | `'sum'` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' },
- aggregation: { field: 't', radius: 15000, type: 'sum' }
- }
-}
-```
-
-其它配置详见 [Source](/zh/docs/map-api/source)。
diff --git a/site/docs/map-common/layers/grid-layer/style.en.md b/site/docs/map-common/layers/grid-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/grid-layer/style.zh.md b/site/docs/map-common/layers/grid-layer/style.zh.md
deleted file mode 100644
index 12a42e62b..000000000
--- a/site/docs/map-common/layers/grid-layer/style.zh.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### `options.`style
-
-`GridHeatmapLayerStyleOptions` optional
-
-元素样式, GridHeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ----------------------- | -------- | ------ | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| coverage | 覆盖度，范围 0 到 1 | `string` | `0.9` | optional |
-| angle | 旋转角度，范围 0 到 360 | `number` | `0` | optional |
-
-```js
-{
- style: {
- coverage: 0.9,
- angle: 0,
- opacity: 1.0,
- }
-}
-```
diff --git a/site/docs/map-common/layers/heatmap-layer/shape.en.md b/site/docs/map-common/layers/heatmap-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/heatmap-layer/shape.zh.md b/site/docs/map-common/layers/heatmap-layer/shape.zh.md
deleted file mode 100644
index 723fca7a7..000000000
--- a/site/docs/map-common/layers/heatmap-layer/shape.zh.md
+++ /dev/null
@@ -1,12 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'heatmap'`
-
-热力模式支持 2D 与 3D 热力：
-
-* heatmap
-* heatmap3D
-
-```js
-{ shape: 'heatmap', }
-```
diff --git a/site/docs/map-common/layers/heatmap-layer/size.en.md b/site/docs/map-common/layers/heatmap-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/heatmap-layer/size.zh.md b/site/docs/map-common/layers/heatmap-layer/size.zh.md
deleted file mode 100644
index ee15c843e..000000000
--- a/site/docs/map-common/layers/heatmap-layer/size.zh.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### `options.`size
-
-`SizeAttr` required
-
-热力大小配置，SizeAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----- | -------------------- | -------------------- | -------- | -------- |
-| field | 热力大小映射字段 | `string` | | required |
-| value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
-
-```js
-{
- source: {
- data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
- parser: { type: 'json', x: 'lng', y: 'lat' }
- },
- size: {
- field: 't',
- value: [0, 1],
- },
-}
-```
diff --git a/site/docs/map-common/layers/heatmap-layer/style.en.md b/site/docs/map-common/layers/heatmap-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/heatmap-layer/style.zh.md b/site/docs/map-common/layers/heatmap-layer/style.zh.md
deleted file mode 100644
index e7a91ff5d..000000000
--- a/site/docs/map-common/layers/heatmap-layer/style.zh.md
+++ /dev/null
@@ -1,37 +0,0 @@
-### `options.`style
-
-`HeatmapLayerStyleOptions` optional
-
-热力样式，HeatmapLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------- | ------------------ | ----------- | ------ | -------- |
-| intensity | 全局热力权重 | `number` | `3` | optional |
-| radius | 热力半径，单位像素 | `number` | `20` | optional |
-| opacity | 透明度 | `number` | `1` | optional |
-| colorsRamp | 热力色带 | `ColorRamp` | | optional |
-
-热力色带，ColorRamp 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| -------- | ---------- | -------- | ------ | -------- |
-| color | 颜色 | `string` | | required |
-| position | 热力映射值 | `number` | | required |
-
-```js
-{
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- { color: 'rgba(33,102,172,0.0)', position: 0 },
- { color: 'rgb(103,169,207)', position: 0.2 },
- { color: 'rgb(209,229,240)', position: 0.4 },
- { color: 'rgb(253,219,199)', position: 0.6 },
- { color: 'rgb(239,138,98)', position: 0.8 },
- { color: 'rgb(178,24,43,1.0)', position: 1 },
- ],
- }
-}
-```
diff --git a/site/docs/map-common/layers/hexbin-layer/shape.en.md b/site/docs/map-common/layers/hexbin-layer/shape.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/hexbin-layer/shape.zh.md b/site/docs/map-common/layers/hexbin-layer/shape.zh.md
deleted file mode 100644
index b4d664165..000000000
--- a/site/docs/map-common/layers/hexbin-layer/shape.zh.md
+++ /dev/null
@@ -1,12 +0,0 @@
-### `options.`shape
-
-`string` optional default: `'hexagon'`
-
-元素形状，分别支持 2D 与 3D 蜂窝：
-
-* hexagon: 蜂窝
-* hexagonColumn: 蜂窝柱
-
-```js
-{ shape: 'hexagon', }
-```
diff --git a/site/docs/map-common/layers/lines-layer/animate.en.md b/site/docs/map-common/layers/lines-layer/animate.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/lines-layer/animate.zh.md b/site/docs/map-common/layers/lines-layer/animate.zh.md
deleted file mode 100644
index 7b986c342..000000000
--- a/site/docs/map-common/layers/lines-layer/animate.zh.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### `options.`animate
-
-`boolean｜AnimateAttr` optional
-
-水波动画，AnimateAttr 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ----------- | ------------------------ | --------- | ------- | -------- |
-| enable | 是否开启动画 | `boolean` | `false` | optional |
-| interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
-| duration | 动画时间，单位秒 | `number` | | optional |
-| trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
-
-```js
-{
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.1,
- }
-}
-```
diff --git a/site/docs/map-common/layers/path-layer/size.en.md b/site/docs/map-common/layers/path-layer/size.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/path-layer/size.zh.md b/site/docs/map-common/layers/path-layer/size.zh.md
deleted file mode 100644
index afe5adece..000000000
--- a/site/docs/map-common/layers/path-layer/size.zh.md
+++ /dev/null
@@ -1,62 +0,0 @@
-### `options.`size
-
-`number|object|Function` optional default: `12`
-
-元素大小。
-
-```js
-{ size: 12, }
-```
-
-#### `size.`field
-
-`string` optional
-
-元素大小值映射关联字段。
-
-```js
-{
- size: { field: 't', }
-}
-```
-
-#### `size.`value
-
-`number|number[]|Function` optional
-
-元素大小值映射值。
-
-```js
-{
- size: {
- field: 't',
- value: ({ t }) => {
- return t > 20 ? 15 : 12
- }
- }
-}
-```
-
-#### `size.`scale
-
-`ScaleConfig` optional default: `{}`
-
-关联字段的映射 scale 类型，有以下 scale 类型：
-
-* linear：线性
-* power：指数
-* log：对数
-* quantile：等分位
-* quantize：等间距
-* cat：枚举
-
-
-```js
-{
- size: {
- field: 't',
- value: [12, 15],
- scale: { type: 'quantile' },
- }
-}
-```
diff --git a/site/docs/map-common/layers/path-layer/source.en.md b/site/docs/map-common/layers/path-layer/source.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/path-layer/source.zh.md b/site/docs/map-common/layers/path-layer/source.zh.md
deleted file mode 100644
index d3dd68a5c..000000000
--- a/site/docs/map-common/layers/path-layer/source.zh.md
+++ /dev/null
@@ -1,19 +0,0 @@
-### `options.`source
-
-`SourceOptions` required
-
-数据配置，详见 [Source](/zh/docs/map-api/source)。
-
-```js
-{
- source: {
- data: [{
- path: [[58.00, 32.84],[85.7, 25.161],[101.95, 41.77],[114.96, 39.63],[117.421, 28.61]],
- c: 'red',
- t: 20,
- n: 'chengdu'
- }],
- parser: { type: 'json', coordinates: 'path', }
- }
-}
-```
diff --git a/site/docs/map-common/layers/path-layer/style.en.md b/site/docs/map-common/layers/path-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/path-layer/style.zh.md b/site/docs/map-common/layers/path-layer/style.zh.md
deleted file mode 100644
index 48df1ddd5..000000000
--- a/site/docs/map-common/layers/path-layer/style.zh.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### `options.`style
-
-`LinesLayerStyleOptions` optional
-
-元素样，LinesLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| --------- | ---------------------- | ------------------ | ------- | -------- |
-| opacity | 透明度 | `number` | `1` | optional |
-| lineType | 线类型，支持实线与虚线 | `‘solid’｜'dash'` | ‘solid’ | optional |
-| dashArray | 虚线间隔 | `[number, number]` | | optional |
-
-> dashArray: 虚线间隔，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。dashArray 设为 `[0,0]` 的效果为没有虚线。
-
-```js
-{
- style: {
- opacity: 0.8,
- lineType: 'dash',
- dashArray: [2, 2],
- }
-}
-```
diff --git a/site/docs/map-common/layers/text-layer/style.en.md b/site/docs/map-common/layers/text-layer/style.en.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/site/docs/map-common/layers/text-layer/style.zh.md b/site/docs/map-common/layers/text-layer/style.zh.md
deleted file mode 100644
index eb130a499..000000000
--- a/site/docs/map-common/layers/text-layer/style.zh.md
+++ /dev/null
@@ -1,36 +0,0 @@
-`PointTextLayerStyleOptions` optional
-
-字体样式，PointTextLayerStyleOptions 配置如下：
-
-| 属性 | 描述 | 类型 | 默认值 | 是否必填 |
-| ---------------- | ------------------------------------------------------------------------- | ----------- | ---------- | -------- |
-| fill | 字体颜色 | `ColorAttr` | `'#fff'` | optional |
-| fontSize | 字体大小 | `SizeAttr` | `12` | optional |
-| opacity | 文字透明度 | `number` | `1` | optional |
-| stroke | 文字描边颜色 | `string` | `'#fff'` | optional |
-| strokeWidth | 文字描边宽度 | `number` | `0` | optional |
-| strokeOpacity | 文字描边透明度 | `number` | `1` | optional |
-| fontFamily | 文字字体 | `string` | | optional |
-| fontWeight | 字体粗细程度 | `string` | | optional |
-| textAllowOverlap | 是否允许文本覆盖 | `boolean` | `false` | optional |
-| textAnchor | 文本相对锚点的位置 | `string` | `'center'` | optional |
-| textOffset | 文本相对锚点的偏移量 | `number[]` | `[0, 0]` | optional |
-| spacing | 字符间距 | `number` | `0` | optional |
-| padding | 文本包围盒 padding （水平，垂直），影响碰撞检测结果，避免相邻文本靠的太近 | `number[]` | `[0, 0]` | optional |
-
-textAnchor 文本相对锚点的位置，支持以下相对锚点的位置：
-
-* 'right'
-* 'top-right'
-* 'left'
-* 'bottom-right'
-* 'left'
-* 'top-left'
-* 'bottom-left'
-* 'bottom'
-* 'bottom-right'
-* 'bottom-left'
-* 'top'
-* 'top-right'
-* 'top-left'
-* 'center'
diff --git a/site/examples/flowchart/basic/API.en.md b/site/examples/flowchart/basic/API.en.md
deleted file mode 100644
index 94a9ff1b9..000000000
--- a/site/examples/flowchart/basic/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/site/examples/flowchart/basic/API.zh.md b/site/examples/flowchart/basic/API.zh.md
deleted file mode 100644
index 94a9ff1b9..000000000
--- a/site/examples/flowchart/basic/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/site/examples/flowchart/basic/demo/basic.js b/site/examples/flowchart/basic/demo/basic.js
deleted file mode 100644
index d27f31a3c..000000000
--- a/site/examples/flowchart/basic/demo/basic.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Flowchart } from '@ant-design/flowchart';
-
-/**
- * 样式文件引入，实际项目中不要这么用，可以考虑在对应的less\sass文件中引入
- * eg:
- * style.less
- * @import (inline) '../../node_modules/antd/dist/antd.css';
- * @import (inline) '../../node_modules/@ant-design/flowchart/dist/index.css';
- * demo.tsx
- * import './style.less'
- */
-const createLink = (src) => {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.className = 'dynamic-link';
- link.href = src;
- document.getElementsByTagName('head')[0].appendChild(link);
-};
-createLink('https://unpkg.com/antd@4.24.3/dist/antd.css');
-createLink('https://unpkg.com/@ant-design/flowchart@1.2.1/dist/index.css');
-
-const DemoFlowchart = () => {
- return (
-
- {
- console.log(d, JSON.stringify(d));
- }}
- toolbarPanelProps={{
- position: {
- top: 0,
- left: 0,
- right: 0,
- },
- }}
- scaleToolbarPanelProps={{
- layout: 'horizontal',
- position: {
- right: 0,
- top: -40,
- },
- style: {
- width: 150,
- height: 39,
- left: 'auto',
- background: 'transparent',
- },
- }}
- canvasProps={{
- position: {
- top: 40,
- left: 0,
- right: 0,
- bottom: 0,
- },
- }}
- nodePanelProps={{
- position: { width: 160, top: 40, bottom: 0, left: 0 },
- }}
- detailPanelProps={{
- position: { width: 200, top: 40, bottom: 0, right: 0 },
- }}
- />
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/flowchart/basic/demo/complex-form.js b/site/examples/flowchart/basic/demo/complex-form.js
deleted file mode 100644
index 854e2bc7b..000000000
--- a/site/examples/flowchart/basic/demo/complex-form.js
+++ /dev/null
@@ -1,267 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { Flowchart, FormWrapper, EdgeService, GroupService, CanvasService, EditorPanels } from '@ant-design/flowchart';
-
-/**
- * 样式文件引入，实际项目中不要这么用，可以考虑在对应的less\sass文件中引入
- * eg:
- * style.less
- * @import (inline) '../../node_modules/antd/dist/antd.css';
- * @import (inline) '../../node_modules/@ant-design/flowchart/dist/index.css';
- * demo.tsx
- * import './style.less'
- */
-const createLink = (src) => {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.className = 'dynamic-link';
- link.href = src;
- document.getElementsByTagName('head')[0].appendChild(link);
-};
-createLink('https://unpkg.com/antd@4.24.3/dist/antd.css');
-createLink('https://unpkg.com/@ant-design/flowchart@1.2.1/dist/index.css');
-
-const PREFIX = 'flowchart-editor';
-const { InputFiled, ColorPicker, Position, InputNumberFiled, Size } = EditorPanels;
-
-const NodeComponent = (props) => {
- const { config, plugin = {} } = props;
- const { updateNode } = plugin;
- const [nodeConfig, setNodeConfig] = useState({
- ...config,
- });
- const onNodeConfigChange = (key, value) => {
- setNodeConfig({
- ...nodeConfig,
- [key]: value,
- });
- updateNode({
- [key]: value,
- });
- };
- useEffect(() => {
- setNodeConfig({
- ...config,
- });
- }, [config]);
- return (
-
-
-
内容
- {
- onNodeConfigChange('label', value);
- }}
- />
-
-
-
样式
-
{
- onNodeConfigChange(key, value);
- }}
- />
- {
- onNodeConfigChange(key, value);
- }}
- />
- {
- onNodeConfigChange('fill', value);
- }}
- />
- {
- onNodeConfigChange('stroke', value);
- }}
- />
-
- {
- onNodeConfigChange('fontSize', value);
- }}
- />
- {
- onNodeConfigChange('fontFill', value);
- }}
- />
-
-
-
- {
- console.log(d);
- }}
- toolbarPanelProps={{
- position: {
- top: 0,
- left: 0,
- right: 0,
- },
- }}
- scaleToolbarPanelProps={{
- layout: 'horizontal',
- position: {
- right: 0,
- top: -40,
- },
- style: {
- width: 150,
- height: 39,
- left: 'auto',
- background: 'transparent',
- },
- }}
- canvasProps={{
- position: {
- top: 40,
- left: 0,
- right: 0,
- bottom: 0,
- },
- }}
- nodePanelProps={{
- position: { width: 160, top: 40, bottom: 0, left: 0 },
- }}
- detailPanelProps={{
- position: { width: 200, top: 40, bottom: 0, right: 0 },
- controlMapService,
- formSchemaService,
- }}
- />
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/flowchart/basic/demo/custom-form.js b/site/examples/flowchart/basic/demo/custom-form.js
deleted file mode 100644
index c4f7049d4..000000000
--- a/site/examples/flowchart/basic/demo/custom-form.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { Input } from 'antd';
-import { Flowchart, FormWrapper } from '@ant-design/flowchart';
-
-/**
- * 样式文件引入，实际项目中不要这么用，可以考虑在对应的less\sass文件中引入
- * eg:
- * style.less
- * @import (inline) '../../node_modules/antd/dist/antd.css';
- * @import (inline) '../../node_modules/@ant-design/flowchart/dist/index.css';
- * demo.tsx
- * import './style.less'
- */
-const createLink = (src) => {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.className = 'dynamic-link';
- link.href = src;
- document.getElementsByTagName('head')[0].appendChild(link);
-};
-createLink('https://unpkg.com/antd@4.24.3/dist/antd.css');
-createLink('https://unpkg.com/@ant-design/flowchart@1.2.1/dist/index.css');
-
-const InputComponent = (props) => {
- const { config, plugin = {} } = props;
- const { placeholder, disabled } = config;
- const { updateNode } = plugin;
- const [label, setLabel] = useState(config?.label);
-
- const onLabelChange = async (e) => {
- setLabel(e.target.value);
- updateNode({
- label: e.target.value,
- });
- };
-
- useEffect(() => {
- setLabel(config?.label);
- }, [config]);
-
- return (
-
-
-
-
- );
-};
-
-const RenameService = (props) => {
- return (
-
- {(config, plugin) => }
-
- );
-};
-
-const CanvasService = (props) => {
- return 主画布
;
-};
-
-export const controlMapService = (controlMap) => {
- controlMap.set('rename-service', RenameService);
- controlMap.set('canvas-service', CanvasService);
- return controlMap;
-};
-
-const formSchemaService = async (args) => {
- const { targetType } = args;
- const isGroup = args.targetData?.isGroup;
- const nodeSchema = {
- tabs: [
- {
- name: '设置',
- groups: [
- {
- name: 'groupName',
- controls: [
- {
- label: '节点名',
- name: '自定义form',
- shape: 'rename-service',
- placeholder: '节点名称',
- },
- ],
- },
- ],
- },
- ],
- };
-
- if (isGroup) {
- // TODO
- }
-
- if (targetType === 'node') {
- return nodeSchema;
- }
-
- if (targetType === 'edge') {
- // TODO
- }
-
- return {
- tabs: [
- {
- name: '设置',
- groups: [
- {
- name: 'groupName',
- controls: [
- {
- label: '',
- name: 'canvas-service',
- shape: 'canvas-service',
- },
- ],
- },
- ],
- },
- ],
- };
-};
-
-const DemoFlowchart = () => {
- return (
-
- {
- console.log(d);
- }}
- toolbarPanelProps={{
- position: {
- top: 0,
- left: 0,
- right: 0,
- },
- }}
- scaleToolbarPanelProps={{
- layout: 'horizontal',
- position: {
- right: 0,
- top: -40,
- },
- style: {
- width: 150,
- height: 39,
- left: 'auto',
- background: 'transparent',
- },
- }}
- canvasProps={{
- position: {
- top: 40,
- left: 0,
- right: 0,
- bottom: 0,
- },
- }}
- nodePanelProps={{
- position: { width: 160, top: 40, bottom: 0, left: 0 },
- }}
- detailPanelProps={{
- position: { width: 200, top: 40, bottom: 0, right: 0 },
- controlMapService,
- formSchemaService,
- }}
- />
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/flowchart/basic/demo/custom-node.js b/site/examples/flowchart/basic/demo/custom-node.js
deleted file mode 100644
index a9309178d..000000000
--- a/site/examples/flowchart/basic/demo/custom-node.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Flowchart } from '@ant-design/flowchart';
-
-/**
- * 样式文件引入，实际项目中不要这么用，可以考虑在对应的less\sass文件中引入
- * eg:
- * style.less
- * @import (inline) '../../node_modules/antd/dist/antd.css';
- * @import (inline) '../../node_modules/@ant-design/flowchart/dist/index.css';
- * demo.tsx
- * import './style.less'
- */
-const createLink = (src) => {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.className = 'dynamic-link';
- link.href = src;
- document.getElementsByTagName('head')[0].appendChild(link);
-};
-createLink('https://unpkg.com/antd@4.24.3/dist/antd.css');
-createLink('https://unpkg.com/@ant-design/flowchart@1.2.1/dist/index.css');
-
-const IndicatorNode = (props) => {
- const { size = { width: 120, height: 50 }, data } = props;
- const { width, height } = size;
- const { label = '自定义节点', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;
-
- return (
-
- );
-};
-
-const DemoFlowchart = () => {
- return (
-
-
{
- console.log(d);
- }}
- toolbarPanelProps={{
- position: {
- top: 0,
- left: 0,
- right: 0,
- },
- }}
- scaleToolbarPanelProps={{
- layout: 'horizontal',
- position: {
- right: 0,
- top: -40,
- },
- style: {
- width: 150,
- height: 39,
- left: 'auto',
- background: 'transparent',
- },
- }}
- canvasProps={{
- position: {
- top: 40,
- left: 0,
- right: 0,
- bottom: 0,
- },
- }}
- nodePanelProps={{
- position: { width: 160, top: 40, bottom: 0, left: 0 },
- defaultActiveKey: ['custom'], // ['custom', 'official']
- registerNode: {
- title: '指标节点',
- nodes: [
- {
- component: IndicatorNode,
- popover: () => 指标节点
,
- name: 'custom-node-indicator',
- width: 120,
- height: 50,
- label: '自定义节点',
- },
- ],
- },
- }}
- detailPanelProps={{
- position: { width: 200, top: 40, bottom: 0, right: 0 },
- }}
- />
-
-
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/flowchart/basic/index.en.md b/site/examples/flowchart/basic/index.en.md
deleted file mode 100644
index 7a112c6b8..000000000
--- a/site/examples/flowchart/basic/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Flowchart
-order: 0
----
diff --git a/site/examples/flowchart/basic/index.zh.md b/site/examples/flowchart/basic/index.zh.md
deleted file mode 100644
index ef985ca9d..000000000
--- a/site/examples/flowchart/basic/index.zh.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: 流程图
-order: 0
----
-
diff --git a/site/examples/line/basic/API.en.md b/site/examples/line/basic/API.en.md
new file mode 100644
index 000000000..183d7f25f
--- /dev/null
+++ b/site/examples/line/basic/API.en.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/examples/line/basic/API.zh.md b/site/examples/line/basic/API.zh.md
new file mode 100644
index 000000000..02e374c79
--- /dev/null
+++ b/site/examples/line/basic/API.zh.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/examples/line/basic/demo/basic.js b/site/examples/line/basic/demo/basic.js
new file mode 100644
index 000000000..8542f8d09
--- /dev/null
+++ b/site/examples/line/basic/demo/basic.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const props = {
+ data: [
+ { genre: 'Sports', sold: 275 },
+ { genre: 'Strategy', sold: 115 },
+ { genre: 'Action', sold: 120 },
+ { genre: 'Shooter', sold: 350 },
+ { genre: 'Other', sold: 150 },
+ ],
+ encode: {
+ x: 'genre',
+ y: 'sold',
+ color: 'genre',
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/mind-map-graph/demo/meta.json b/site/examples/line/basic/demo/meta.json
similarity index 64%
rename from site/examples/relation-graph/mind-map-graph/demo/meta.json
rename to site/examples/line/basic/demo/meta.json
index 62edf01d2..ba97e2b6b 100644
--- a/site/examples/relation-graph/mind-map-graph/demo/meta.json
+++ b/site/examples/line/basic/demo/meta.json
@@ -7,10 +7,10 @@
{
"filename": "basic.js",
"title": {
- "zh": "脑图",
- "en": "Basic"
+ "zh": "基础折线图",
+ "en": "Basic line plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24cS0yQQN%24/c69ba993-ca99-4ba1-a5d8-5ba824b83d95.png"
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
}
]
}
diff --git a/site/examples/line/basic/design.en.md b/site/examples/line/basic/design.en.md
new file mode 100644
index 000000000..e041c7a04
--- /dev/null
+++ b/site/examples/line/basic/design.en.md
@@ -0,0 +1,29 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+
+
+## 元素
+
+
+
+- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/site/examples/line/basic/design.zh.md b/site/examples/line/basic/design.zh.md
new file mode 100644
index 000000000..e041c7a04
--- /dev/null
+++ b/site/examples/line/basic/design.zh.md
@@ -0,0 +1,29 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+
+
+## 元素
+
+
+
+- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/site/examples/line/basic/index.en.md b/site/examples/line/basic/index.en.md
new file mode 100644
index 000000000..150a6da40
--- /dev/null
+++ b/site/examples/line/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Basic line
+order: 0
+---
\ No newline at end of file
diff --git a/site/examples/line/basic/index.zh.md b/site/examples/line/basic/index.zh.md
new file mode 100644
index 000000000..273a184ec
--- /dev/null
+++ b/site/examples/line/basic/index.zh.md
@@ -0,0 +1,6 @@
+---
+title: 基础折线图
+order: 0
+---
+
+柱状图用于描述分类数据之间的对比，如果我们把时间周期，如周、月、年，也理解为一种分类数据 (time category)，那么柱状图也可以用于描述时间周期之间的数值比较。
diff --git a/site/examples/map-advanced-plot/muti-layers/API.en.md b/site/examples/map-advanced-plot/muti-layers/API.en.md
deleted file mode 100644
index 496de5e5e..000000000
--- a/site/examples/map-advanced-plot/muti-layers/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-advanced-plot/muti-layers/API.zh.md b/site/examples/map-advanced-plot/muti-layers/API.zh.md
deleted file mode 100644
index 3d593c389..000000000
--- a/site/examples/map-advanced-plot/muti-layers/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-advanced-plot/muti-layers/demo/meta.json b/site/examples/map-advanced-plot/muti-layers/demo/meta.json
deleted file mode 100644
index f02abb5bc..000000000
--- a/site/examples/map-advanced-plot/muti-layers/demo/meta.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "wind-field.js",
- "title": {
- "zh": "风场图",
- "en": "Wind field map"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wuc%26qDZ5Ov/4b425019-66be-4ccc-84b9-c314ed6b3313.png"
- }
- ]
-}
diff --git a/site/examples/map-advanced-plot/muti-layers/demo/wind-field.js b/site/examples/map-advanced-plot/muti-layers/demo/wind-field.js
deleted file mode 100644
index 7937f0cc9..000000000
--- a/site/examples/map-advanced-plot/muti-layers/demo/wind-field.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { L7PlotMap } from '@ant-design/maps';
-
-const DemoL7PlotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/bmw-prod/7455fead-1dc0-458d-b91a-fb4cf99e701e.txt')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [60, 40.7128],
- zoom: 2,
- },
- layers: [
- {
- type: 'arcLayer',
- source: {
- data: data,
- parser: {
- type: 'csv',
- x: 'lng1',
- y: 'lat1',
- x1: 'lng2',
- y1: 'lat2',
- },
- },
- shape: 'arc',
- size: 0.5,
- color: '#6495ED',
- style: {
- opacity: 0.8,
- },
- animate: {
- duration: 4,
- interval: 0.2,
- trailLength: 0.6,
- },
- },
- ],
- zoom: {
- position: 'bottomright',
- },
- scale: {
- position: 'bottomright',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-advanced-plot/muti-layers/index.en.md b/site/examples/map-advanced-plot/muti-layers/index.en.md
deleted file mode 100644
index 4e0cd4299..000000000
--- a/site/examples/map-advanced-plot/muti-layers/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Muti Layers
-order: 0
----
diff --git a/site/examples/map-advanced-plot/muti-layers/index.zh.md b/site/examples/map-advanced-plot/muti-layers/index.zh.md
deleted file mode 100644
index ea3ae24b1..000000000
--- a/site/examples/map-advanced-plot/muti-layers/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 多图层
-order: 0
----
diff --git a/site/examples/map-area/division/API.en.md b/site/examples/map-area/division/API.en.md
deleted file mode 100644
index d7366a808..000000000
--- a/site/examples/map-area/division/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-area/division/API.zh.md b/site/examples/map-area/division/API.zh.md
deleted file mode 100644
index a16845937..000000000
--- a/site/examples/map-area/division/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-area/division/demo/europe-pop-est.js b/site/examples/map-area/division/demo/europe-pop-est.js
deleted file mode 100644
index 3d135ce42..000000000
--- a/site/examples/map-area/division/demo/europe-pop-est.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { AreaMap } from '@ant-design/maps';
-
-const DemoAreaMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/EIXm%24lEPD%24/europe.geo.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'blank',
- center: [120.19382669582967, 30.258134],
- zoom: 3,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- autoFit: true,
- color: {
- field: 'pop_est',
- value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(107,174,214)', 'rgb(49,130,189)', 'rgb(8,81,156)'],
- scale: {
- type: 'quantile',
- },
- },
- style: {
- opacity: 1,
- stroke: 'rgb(93,112,146)',
- lineWidth: 0.6,
- lineOpacity: 1,
- },
- state: {
- active: true,
- },
- label: {
- visible: true,
- field: 'name',
- style: {
- fill: '#000',
- opacity: 0.8,
- fontSize: 10,
- stroke: '#fff',
- strokeWidth: 1.5,
- textAllowOverlap: false,
- padding: [5, 5],
- },
- },
- tooltip: {
- items: ['name', 'name_zh', 'pop_est'],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-area/division/demo/meta.json b/site/examples/map-area/division/demo/meta.json
deleted file mode 100644
index 6b334230b..000000000
--- a/site/examples/map-area/division/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "europe-pop-est.js",
- "title": {
- "zh": "2019 欧洲总人口数",
- "en": "2019 Europe pop-est"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lxHiE3f%24jB/2ab86960-79ee-477d-a656-8f86d71de072.png"
- },
- {
- "filename": "us-states-density.js",
- "title": {
- "zh": "美国人口密度",
- "en": "US State density"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/IsrqSMt3SL/f9238dd6-fd88-4200-a624-3c27a8ae677e.png"
- }
- ]
-}
diff --git a/site/examples/map-area/division/demo/us-states-density.js b/site/examples/map-area/division/demo/us-states-density.js
deleted file mode 100644
index d0c77dd16..000000000
--- a/site/examples/map-area/division/demo/us-states-density.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { AreaMap } from '@ant-design/maps';
-
-const DemoAreaMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'blank',
- center: [120.19382669582967, 30.258134],
- zoom: 3,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- autoFit: true,
- color: {
- field: 'density',
- value: ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'],
- scale: {
- type: 'quantile',
- },
- },
- style: {
- opacity: 1,
- stroke: '#fff',
- lineWidth: 0.6,
- lineOpacity: 1,
- },
- state: {
- active: true,
- },
- label: {
- visible: true,
- field: 'name',
- style: {
- fill: '#000',
- opacity: 0.8,
- fontSize: 10,
- stroke: '#fff',
- strokeWidth: 1.5,
- textAllowOverlap: false,
- padding: [8, 8],
- },
- },
- tooltip: {
- items: ['name', 'density'],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-area/division/index.en.md b/site/examples/map-area/division/index.en.md
deleted file mode 100644
index e6e1db201..000000000
--- a/site/examples/map-area/division/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Division Fill
-order: 0
----
diff --git a/site/examples/map-area/division/index.zh.md b/site/examples/map-area/division/index.zh.md
deleted file mode 100644
index 8c3eb8685..000000000
--- a/site/examples/map-area/division/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 区域填充
-order: 0
----
diff --git a/site/examples/map-area/interactive/API.en.md b/site/examples/map-area/interactive/API.en.md
deleted file mode 100644
index d7366a808..000000000
--- a/site/examples/map-area/interactive/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-area/interactive/API.zh.md b/site/examples/map-area/interactive/API.zh.md
deleted file mode 100644
index a16845937..000000000
--- a/site/examples/map-area/interactive/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-area/interactive/demo/meta.json b/site/examples/map-area/interactive/demo/meta.json
deleted file mode 100644
index d41bef6ee..000000000
--- a/site/examples/map-area/interactive/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "single-choice.js",
- "title": {
- "zh": "单选",
- "en": "Single choice"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Ths%26mCNgFa/2c4d5660-5946-49e8-8917-cdbeb37be073.png"
- },
- {
- "filename": "multiple-choice.js",
- "title": {
- "zh": "多选",
- "en": "Multiple choice"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wiunBM1p0N/4d58f32a-d2d3-40dc-824d-13e8207a4789.png"
- }
- ]
-}
diff --git a/site/examples/map-area/interactive/demo/multiple-choice.js b/site/examples/map-area/interactive/demo/multiple-choice.js
deleted file mode 100644
index 4cce597b1..000000000
--- a/site/examples/map-area/interactive/demo/multiple-choice.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { AreaMap } from '@ant-design/maps';
-
-const DemoAreaMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'blank',
- center: [120.19382669582967, 30.258134],
- zoom: 3,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- autoFit: true,
- color: {
- field: 'unit_price',
- value: [
- '#1A4397',
- '#2555B7',
- '#3165D1',
- '#467BE8',
- '#6296FE',
- '#7EA6F9',
- '#98B7F7',
- '#BDD0F8',
- '#DDE6F7',
- '#F2F5FC',
- ].reverse(),
- scale: {
- type: 'quantile',
- },
- },
- style: {
- opacity: 1,
- stroke: '#fff',
- lineWidth: 0.8,
- lineOpacity: 1,
- },
- state: {
- active: true,
- select: {
- stroke: 'yellow',
- lineWidth: 1.5,
- lineOpacity: 0.8,
- },
- },
- enabledMultiSelect: true,
- label: {
- visible: true,
- field: 'name',
- style: {
- fill: 'black',
- opacity: 0.5,
- fontSize: 12,
- spacing: 1,
- padding: [15, 15],
- },
- },
- tooltip: {
- items: ['name', 'code'],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-area/interactive/demo/single-choice.js b/site/examples/map-area/interactive/demo/single-choice.js
deleted file mode 100644
index 066909eed..000000000
--- a/site/examples/map-area/interactive/demo/single-choice.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { AreaMap } from '@ant-design/maps';
-
-const DemoAreaMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const color = [
- 'rgb(255,255,217)',
- 'rgb(237,248,177)',
- 'rgb(199,233,180)',
- 'rgb(127,205,187)',
- 'rgb(65,182,196)',
- 'rgb(29,145,192)',
- 'rgb(34,94,168)',
- 'rgb(12,44,132)',
- ];
- const config = {
- map: {
- type: 'mapbox',
- style: 'blank',
- center: [120.19382669582967, 30.258134],
- zoom: 3,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- autoFit: true,
- color: {
- field: 'density',
- value: color,
- scale: {
- type: 'quantile',
- },
- },
- style: {
- opacity: 1,
- stroke: 'rgb(93,112,146)',
- lineType: 'dash',
- lineDash: [2, 2],
- lineWidth: 0.6,
- lineOpacity: 1,
- },
- state: {
- active: true,
- select: true,
- },
- tooltip: {
- items: ['name', 'density'],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-area/interactive/index.en.md b/site/examples/map-area/interactive/index.en.md
deleted file mode 100644
index 38e4bb6ba..000000000
--- a/site/examples/map-area/interactive/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Map Interaction
-order: 1
----
diff --git a/site/examples/map-area/interactive/index.zh.md b/site/examples/map-area/interactive/index.zh.md
deleted file mode 100644
index 2bbf8302b..000000000
--- a/site/examples/map-area/interactive/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 区域交互
-order: 1
----
diff --git a/site/examples/map-dot/bobble/API.en.md b/site/examples/map-dot/bobble/API.en.md
deleted file mode 100644
index 6fceadad4..000000000
--- a/site/examples/map-dot/bobble/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/bobble/API.zh.md b/site/examples/map-dot/bobble/API.zh.md
deleted file mode 100644
index 12e1658a9..000000000
--- a/site/examples/map-dot/bobble/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/bobble/demo/air-temperature.js b/site/examples/map-dot/bobble/demo/air-temperature.js
deleted file mode 100644
index d62e3fea9..000000000
--- a/site/examples/map-dot/bobble/demo/air-temperature.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
-
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [102.447303, 37.753574],
- zoom: 5,
- pitch: 0,
- },
- source: {
- data: data.list,
- parser: {
- type: 'json',
- x: 'j',
- y: 'w',
- },
- },
- color: {
- field: 't',
- value: [
- '#03071e',
- '#370617',
- '#6a040f',
- '#9d0208',
- '#d00000',
- '#dc2f02',
- '#e85d04',
- '#f48c06',
- '#faa307',
- '#ffba08',
- ].reverse(),
- scale: {
- type: 'quantize',
- },
- },
- size: {
- field: 't',
- value: [2, 18],
- },
- style: {
- opacity: 0.5,
- strokeWidth: 0,
- },
- state: {
- active: {
- color: '#FFF684',
- },
- },
- autoFit: true,
- label: {
- visible: false,
- // 是否显示标签图层
- field: 't',
- style: {
- fill: '#fff',
- opacity: 0.6,
- fontSize: 12,
- textAnchor: 'top',
- // 文本相对锚点的位置 center|left|right|top|bottom|top-left
- textOffset: [0, 20],
- // 文本相对锚点的偏移量 [水平, 垂直]
- spacing: 1,
- // 字符间距
- padding: [5, 5],
- // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- stroke: '#ffffff',
- // 描边颜色
- strokeWidth: 0.3,
- // 描边宽度
- strokeOpacity: 1.0,
- },
- },
- tooltip: {
- items: ['s', 't'],
- },
- zoom: {
- position: 'bottomright',
- },
- scale: {
- position: 'bottomright',
- },
- layerMenu: {
- position: 'topright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/bobble/demo/animate.js b/site/examples/map-dot/bobble/demo/animate.js
deleted file mode 100644
index c19a66605..000000000
--- a/site/examples/map-dot/bobble/demo/animate.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/xZqmXatMnc/quanguojiaotongshijianxiangyingzhishu.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
-
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [102.447303, 37.753574],
- zoom: 2,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- color: '#4cfd47',
- size: 20,
- animate: true,
- state: {
- active: true,
- },
- autoFit: true,
- label: {
- field: 'cityName',
- style: {
- fill: '#fff',
- fontSize: 12,
- textAnchor: 'top',
- textOffset: [0, 20],
- },
- },
- zoom: {
- position: 'bottomright',
- },
- layerMenu: {
- position: 'topright',
- },
- tooltip: {
- items: [
- {
- field: 'cityName',
- alias: '名称',
- },
- ],
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/bobble/demo/distribution-cities.js b/site/examples/map-dot/bobble/demo/distribution-cities.js
deleted file mode 100644
index 13d30ddc4..000000000
--- a/site/examples/map-dot/bobble/demo/distribution-cities.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [list, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/g5hIthhKlr/quanguoshixianweizhi.json')
- .then((response) => response.json())
- .then(({ list }) => setData(list))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
-
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- zoom: 5,
- center: [107.4976, 32.1697],
- pitch: 45,
- },
- source: {
- data: list,
- parser: {
- type: 'json',
- coordinates: 'lnglat',
- },
- },
- color: '#47aff7',
- size: {
- field: 'style',
- value: ({ style }) => {
- if (style == 0) {
- return 8;
- } else if (style == 1) {
- return 4;
- } else {
- return 2;
- }
- },
- },
- style: {
- opacity: 0.8,
- stroke: '#c3faff',
- strokeWidth: 1,
- },
- state: {
- active: {
- color: '#FFF684',
- },
- },
- zoom: {
- position: 'bottomright',
- },
- tooltip: {
- items: ['name'],
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/bobble/demo/earthquake-level.js b/site/examples/map-dot/bobble/demo/earthquake-level.js
deleted file mode 100644
index 741db7a2b..000000000
--- a/site/examples/map-dot/bobble/demo/earthquake-level.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/m5r7MFHt8U/wenchuandizhenshuju.json')
- .then((response) => response.json())
- .then(({ data }) => setData(data))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
-
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [103.447303, 31.753574],
- zoom: 7,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'json',
- x: 'lng',
- y: 'lat',
- },
- },
- color: {
- field: 'mag',
- value: ['#82cf9c', '#10b3b0', '#2033ab'],
- scale: {
- type: 'quantize',
- },
- },
- size: {
- field: 'mag',
- value: ({ mag }) => (mag - 4.3) * 10,
- },
- style: {
- opacity: 0.8,
- strokeWidth: 0,
- },
- state: {
- active: {
- color: '#FFF684',
- },
- },
- autoFit: true,
- zoom: {
- position: 'topright',
- },
- scale: {
- position: 'bottomright',
- },
- tooltip: {
- items: ['title', 'mag', 'depth'],
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/bobble/demo/meta.json b/site/examples/map-dot/bobble/demo/meta.json
deleted file mode 100644
index 426d9194e..000000000
--- a/site/examples/map-dot/bobble/demo/meta.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "air-temperature.js",
- "title": {
- "zh": "国内气温气泡",
- "en": "Air bubble map of China"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/gozHK9LNFl/d37bc490-722b-4b73-a627-3c261b0401d2.png"
- },
- {
- "filename": "distribution-cities.js",
- "title": {
- "zh": "全国城市与区县分布",
- "en": "Distribution of cities, districts and counties in China"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/RGpOaNlkdd/1c099806-c02a-4b03-8dfe-788e982b822b.png"
- },
- {
- "filename": "earthquake-level.js",
- "title": {
- "zh": "地震等级",
- "en": "Earthquake level"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JVdKQHfpZC/d3287038-6329-4bdd-8471-c830d5daf52f.png"
- },
- {
- "filename": "animate.js",
- "title": {
- "zh": "全国交通事件气泡动画",
- "en": "National traffic event bubble animation"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/dTdD4KQGvH/06e323e4-92ce-40d9-a58f-837adbce5f26.png"
- }
- ]
-}
diff --git a/site/examples/map-dot/bobble/index.en.md b/site/examples/map-dot/bobble/index.en.md
deleted file mode 100644
index 35cbb4d43..000000000
--- a/site/examples/map-dot/bobble/index.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Bubble Map Map
-order: 0
----
-
-Refers to a point layer that can be located on a map with a dot symbol of the same shape, size and a fixed ratio to the value it represents, and is used to express the distribution characteristics of discrete phenomena.
diff --git a/site/examples/map-dot/bobble/index.zh.md b/site/examples/map-dot/bobble/index.zh.md
deleted file mode 100644
index d4a102601..000000000
--- a/site/examples/map-dot/bobble/index.zh.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 地图气泡图
-order: 0
----
-
-指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。
diff --git a/site/examples/map-dot/dot-density/API.en.md b/site/examples/map-dot/dot-density/API.en.md
deleted file mode 100644
index ef451b413..000000000
--- a/site/examples/map-dot/dot-density/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/dot-density/API.zh.md b/site/examples/map-dot/dot-density/API.zh.md
deleted file mode 100644
index 5fca5d49c..000000000
--- a/site/examples/map-dot/dot-density/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/dot-density/demo/beijing-traffic.js b/site/examples/map-dot/dot-density/demo/beijing-traffic.js
deleted file mode 100644
index 5bb4e9955..000000000
--- a/site/examples/map-dot/dot-density/demo/beijing-traffic.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/8Ps2h%24qgmk/traffic_110000.csv')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const colors = ['#c57f34', '#cbfddf', '#edea70', '#8cc9f1', '#2c7bb6'];
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [116.417463, 40.015175],
- pitch: 0,
- zoom: 9,
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- y: 'lat',
- x: 'lng',
- },
- },
- shape: 'dot',
- color: {
- field: 'type',
- value: ({ type }) => {
- switch (parseInt(type)) {
- case 3:
- return colors[0];
-
- case 4:
- return colors[1];
-
- case 41:
- return colors[2];
-
- case 5:
- return colors[3];
-
- default:
- return colors[4];
- }
- },
- },
- size: 0.5,
- style: {
- opacity: 1,
- },
- autoFit: true,
- zoom: {
- position: 'bottomright',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/dot-density/demo/cuisine-nationwide.js b/site/examples/map-dot/dot-density/demo/cuisine-nationwide.js
deleted file mode 100644
index c465f8e43..000000000
--- a/site/examples/map-dot/dot-density/demo/cuisine-nationwide.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/fZreT5RyVT/6wanquanguoyuecaidefenbu.geojson')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [105.425968, 35.882505],
- pitch: 0,
- zoom: 4,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- shape: 'dot',
- color: '#3C1FA8',
- size: 0.5,
- style: {
- opacity: 1,
- },
- autoFit: true,
- zoom: {
- position: 'bottomright',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/dot-density/demo/meta.json b/site/examples/map-dot/dot-density/demo/meta.json
deleted file mode 100644
index dc86e38ca..000000000
--- a/site/examples/map-dot/dot-density/demo/meta.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "cuisine-nationwide.js",
- "title": {
- "zh": "6万点位全国粤菜分布",
- "en": "Distribution of 60000 Cantonese dishes in China"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/RO8qymvsqT/447d85e6-7b2f-4344-b3c5-265db3cf4633.png"
- },
- {
- "filename": "beijing-traffic.js",
- "title": {
- "zh": "10万辆北京公共交通车辆",
- "en": "100000 Beijing public transport vehicles"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/zkZZmhfMei/ac9d0fb0-283a-46c1-9b6a-c9eeea288bc8.png"
- },
- {
- "filename": "shanghai-traffic.js",
- "title": {
- "zh": "164万辆上海市交通车辆",
- "en": "1.64 million traffic vehicles in Shanghai"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/t5BQDH5Jp8/dbcddc7e-5ff9-4d3b-af9b-2d86f40b626a.png"
- }
- ]
-}
diff --git a/site/examples/map-dot/dot-density/demo/shanghai-traffic.js b/site/examples/map-dot/dot-density/demo/shanghai-traffic.js
deleted file mode 100644
index 6f18946ca..000000000
--- a/site/examples/map-dot/dot-density/demo/shanghai-traffic.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [121.417463, 31.215175],
- pitch: 0,
- zoom: 11,
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- y: 'lat',
- x: 'lng',
- },
- },
- shape: 'dot',
- color: '#080298',
- size: 0.5,
- style: {
- opacity: 1,
- },
- zoom: {
- position: 'bottomright',
- },
- scale: {
- position: 'bottomleft',
- },
- layerMenu: {
- position: 'topright',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/dot-density/index.en.md b/site/examples/map-dot/dot-density/index.en.md
deleted file mode 100644
index c2a0ace28..000000000
--- a/site/examples/map-dot/dot-density/index.en.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Dot Density
-order: 1
----
-
-Also known as a Point Map, Dot Distribution Map.
-
-Dot Maps are a way of detecting spatial patterns or the distribution of data over a geographical region, by placing equally sized points over a geographical region.
-
-Dot Maps are ideal for seeing how things are distributed over a geographical region and can reveal patterns when the points cluster on the map. Dot Maps are easy to grasp and are better at giving an overview of the data, but are not great for retrieving exact values.
diff --git a/site/examples/map-dot/dot-density/index.zh.md b/site/examples/map-dot/dot-density/index.zh.md
deleted file mode 100644
index 9bda71001..000000000
--- a/site/examples/map-dot/dot-density/index.zh.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 点密度图
-order: 1
----
-
-也称为「点分布图」或「点密度图」。
-
-点密度地图在地理区域上放置相等大小的圆点，旨在检测该地域上的空间布局或数据分布。
-
-点密度地图非常适合用来查看物件在某地域内的分布状况和模式，而且容易掌握，能提供数据概览，可是在检索精确数值方面表现则不太理想。
diff --git a/site/examples/map-dot/icon/API.en.md b/site/examples/map-dot/icon/API.en.md
deleted file mode 100644
index 6fceadad4..000000000
--- a/site/examples/map-dot/icon/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/icon/API.zh.md b/site/examples/map-dot/icon/API.zh.md
deleted file mode 100644
index 12e1658a9..000000000
--- a/site/examples/map-dot/icon/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/icon/demo/bank.js b/site/examples/map-dot/icon/demo/bank.js
deleted file mode 100644
index 1132d3194..000000000
--- a/site/examples/map-dot/icon/demo/bank.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap, registerImages } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState({
- list: [],
- });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/h%26vOn55UIF/yinhangwangdian.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const images = [
- {
- id: '160104',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/tWx6gaMr9P/zhongguoyinhang.png',
- },
- {
- id: '160139',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/KDjael3M3h/youzhengyinhang.png',
- },
- {
- id: '160105',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/Cxwxb%265wn7/gongshangyinhang.png',
- },
- {
- id: '160106',
- image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
- },
- {
- id: '160107',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/hITtoj%2672C/nongyeyinhang.png',
- },
- {
- id: '160108',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/KHWJyfcPJu/jiaotongyinhang.png',
- },
- {
- id: '160109',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/%247VfhYcrfu/zhaoshangyinhang.png',
- },
- {
- id: '160111',
- image: 'https://gw.alipayobjects.com/zos/antfincdn/pgo8%261emOy/guangdayinhang.png',
- },
- ];
- registerImages(images);
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [116.473168, 39.993015],
- zoom: 15,
- pitch: 0,
- },
- source: {
- data: data.list,
- parser: {
- type: 'json',
- coordinates: 'location',
- },
- },
- color: '#fff',
- shape: {
- field: 'typecode',
- value: ({ typecode }) => typecode,
- },
- size: 10,
- tooltip: {
- items: ['name', 'address', 'tel'],
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/icon/demo/meta.json b/site/examples/map-dot/icon/demo/meta.json
deleted file mode 100644
index 7b3291579..000000000
--- a/site/examples/map-dot/icon/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "bank.js",
- "title": {
- "zh": "银行网点",
- "en": "Bank outlets"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/zWvhGhbuTY/08a0857b-814b-4165-b787-b375d73a5b6c.png"
- },
- {
- "filename": "poi.js",
- "title": {
- "zh": "POI 图标",
- "en": "POI Icon"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cfT2Jb1Fi2/83261ea9-3ccc-4684-a47a-721343c0279b.png"
- }
- ]
-}
diff --git a/site/examples/map-dot/icon/demo/poi.js b/site/examples/map-dot/icon/demo/poi.js
deleted file mode 100644
index e06bad1f0..000000000
--- a/site/examples/map-dot/icon/demo/poi.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap, registerImages } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const images = [
- {
- id: '01',
- image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
- },
- {
- id: '02',
- image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
- },
- {
- id: '03',
- image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
- },
- ];
- registerImages(images);
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [121.409765, 31.256735],
- zoom: 14.5,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'json',
- x: 'longitude',
- y: 'latitude',
- },
- },
- color: '#fff',
- shape: {
- field: 'name',
- value: ['01', '02', '03'],
- },
- size: 20,
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/icon/index.en.md b/site/examples/map-dot/icon/index.en.md
deleted file mode 100644
index 8613c85d9..000000000
--- a/site/examples/map-dot/icon/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Icon Map
-order: 1
----
diff --git a/site/examples/map-dot/icon/index.zh.md b/site/examples/map-dot/icon/index.zh.md
deleted file mode 100644
index a5c35c5b8..000000000
--- a/site/examples/map-dot/icon/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 图标图
-order: 1
----
diff --git a/site/examples/map-dot/map-scatter/API.en.md b/site/examples/map-dot/map-scatter/API.en.md
deleted file mode 100644
index 6fceadad4..000000000
--- a/site/examples/map-dot/map-scatter/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/map-scatter/API.zh.md b/site/examples/map-dot/map-scatter/API.zh.md
deleted file mode 100644
index 12e1658a9..000000000
--- a/site/examples/map-dot/map-scatter/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-dot/map-scatter/demo/classified-scatter.js b/site/examples/map-dot/map-scatter/demo/classified-scatter.js
deleted file mode 100644
index f49407cc7..000000000
--- a/site/examples/map-dot/map-scatter/demo/classified-scatter.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [-121.24357, 37.58264],
- pitch: 0,
- zoom: 6.45,
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- x: 'Longitude',
- y: 'Latitude',
- },
- },
- color: {
- field: 'Magnitude',
- value: [
- '#0A3663',
- '#1558AC',
- '#3771D9',
- '#4D89E5',
- '#64A5D3',
- '#72BED6',
- '#83CED6',
- '#A6E1E0',
- '#B8EFE2',
- '#D7F9F0',
- ],
- },
- size: 3,
- style: {
- opacity: 0.8,
- strokeWidth: 0,
- },
- state: {
- active: {
- color: '#FFF684',
- },
- },
- label: {
- visible: false,
- field: 'Magnitude',
- style: {
- fill: '#fff',
- fontSize: 12,
- textAnchor: 'top',
- textOffset: [0, 20],
- padding: [10, 10],
- },
- },
- tooltip: {
- items: ['Magnitude'],
- },
- zoom: {
- position: 'bottomright',
- },
- layerMenu: {
- position: 'topright',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/map-scatter/demo/distribution-cities.js b/site/examples/map-dot/map-scatter/demo/distribution-cities.js
deleted file mode 100644
index 7ebfd4bb4..000000000
--- a/site/examples/map-dot/map-scatter/demo/distribution-cities.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { DotMap } from '@ant-design/maps';
-
-const DemoDotMap = () => {
- const [list, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/g5hIthhKlr/quanguoshixianweizhi.json')
- .then((response) => response.json())
- .then(({ list }) => setData(list))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- zoom: 5,
- center: [107.4976, 32.1697],
- pitch: 0,
- },
- source: {
- data: list,
- parser: {
- type: 'json',
- coordinates: 'lnglat',
- },
- },
- size: 4,
- color: {
- field: 'style',
- value: ({ style }) => {
- if (style == 0) {
- return '#14B4C9';
- } else if (style == 1) {
- return '#3771D9';
- } else {
- return '#B8EFE2';
- }
- },
- },
- style: {
- opacity: 0.8,
- strokeWidth: 0,
- },
- state: {
- active: {
- color: '#FFF684',
- },
- },
- label: {
- visible: false,
- field: 'name',
- style: {
- fill: '#fff',
- fontSize: 12,
- textAnchor: 'top',
- textOffset: [0, 20],
- padding: [10, 10],
- },
- },
- tooltip: {
- items: ['name'],
- },
- zoom: {
- position: 'bottomright',
- },
- layerMenu: {
- position: 'topright',
- },
- legend: {
- type: 'category',
- position: 'bottomleft',
- items: [
- {
- color: '#14B4C9',
- value: '地级市',
- },
- {
- color: '#3771D9',
- value: '县城市',
- },
- {
- color: '#B8EFE2',
- value: '区县',
- },
- ],
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-dot/map-scatter/demo/meta.json b/site/examples/map-dot/map-scatter/demo/meta.json
deleted file mode 100644
index 818abd4e4..000000000
--- a/site/examples/map-dot/map-scatter/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "distribution-cities.js",
- "title": {
- "zh": "全国城市与区县分布",
- "en": "Distribution of cities, districts and counties in China"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/TKxay5%26lpP/c01e799b-85f2-4dd1-8126-4c5d6845c522.png"
- },
- {
- "filename": "classified-scatter.js",
- "title": {
- "zh": "分类散点",
- "en": "Classified Scatter Map"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/u31zxgii2R/d3fe9e5f-feb6-4b32-8237-4d79ae99a906.png"
- }
- ]
-}
diff --git a/site/examples/map-dot/map-scatter/index.en.md b/site/examples/map-dot/map-scatter/index.en.md
deleted file mode 100644
index 9e39a4e2f..000000000
--- a/site/examples/map-dot/map-scatter/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Scatter Map
-order: 0
----
diff --git a/site/examples/map-dot/map-scatter/index.zh.md b/site/examples/map-dot/map-scatter/index.zh.md
deleted file mode 100644
index 6db174451..000000000
--- a/site/examples/map-dot/map-scatter/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 地图散点图
-order: 0
----
diff --git a/site/examples/map-heat/grid/API.en.md b/site/examples/map-heat/grid/API.en.md
deleted file mode 100644
index 3371990ad..000000000
--- a/site/examples/map-heat/grid/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/grid/API.zh.md b/site/examples/map-heat/grid/API.zh.md
deleted file mode 100644
index 347643127..000000000
--- a/site/examples/map-heat/grid/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/grid/demo/grid2d.js b/site/examples/map-heat/grid/demo/grid2d.js
deleted file mode 100644
index 5a1cd0167..000000000
--- a/site/examples/map-heat/grid/demo/grid2d.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { GridMap } from '@ant-design/maps';
-
-const DemoGridMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/aBQAMIpvPL/qingdao_500m.csv')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- pitch: 0,
- zoom: 8.6,
- center: [120.198254, 36.265551],
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- x: 'lng',
- y: 'lat',
- },
- aggregation: {
- radius: 1000,
- field: 'count',
- method: 'sum',
- },
- },
- shape: 'square',
- color: {
- field: 'count',
- value: ['#0868AC', '#43A2CA', '#43A2CA', '#7BCCC4', '#BAE4BC', '#F0F9E8', '#F0F9E8'],
- },
- style: {
- coverage: 0.9,
- angle: 0,
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/grid/demo/grid3d.js b/site/examples/map-heat/grid/demo/grid3d.js
deleted file mode 100644
index 18e56e84b..000000000
--- a/site/examples/map-heat/grid/demo/grid3d.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { GridMap } from '@ant-design/maps';
-
-const DemoGridMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- pitch: 48,
- center: [109.054293, 29.246265],
- zoom: 6,
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- x: 'lng',
- y: 'lat',
- },
- aggregation: {
- radius: 20000,
- field: 'v',
- method: 'sum',
- },
- },
- shape: 'squareColumn',
- size: {
- field: 'count',
- value: ({ count }) => {
- return count * 200;
- },
- },
- color: {
- field: 'count',
- value: [
- '#8C1EB2',
- '#8C1EB2',
- '#DA05AA',
- '#F0051A',
- '#FF2A3C',
- '#FF4818',
- '#FF4818',
- '#FF8B18',
- '#F77B00',
- '#ED9909',
- '#ECC357',
- '#EDE59C',
- ].reverse(),
- },
- style: {
- coverage: 0.9,
- angle: 0,
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/grid/demo/meta.json b/site/examples/map-heat/grid/demo/meta.json
deleted file mode 100644
index f430df417..000000000
--- a/site/examples/map-heat/grid/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "grid2d.js",
- "title": {
- "zh": "网格热力 2D",
- "en": "Grid thermal 2D"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/fKPFt8cFk4/a091a42a-2411-4011-9dc7-ef7d39197f8d.png"
- },
- {
- "filename": "grid3d.js",
- "title": {
- "zh": "网格热力 3D",
- "en": "Grid thermal 3D"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/XPitK0Ftor/9dcf6d62-ffc1-4207-9bb6-1f52fbc93002.png"
- }
- ]
-}
diff --git a/site/examples/map-heat/grid/index.en.md b/site/examples/map-heat/grid/index.en.md
deleted file mode 100644
index bef82c2c6..000000000
--- a/site/examples/map-heat/grid/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Grid
-order: 1
----
diff --git a/site/examples/map-heat/grid/index.zh.md b/site/examples/map-heat/grid/index.zh.md
deleted file mode 100644
index 88976ffe1..000000000
--- a/site/examples/map-heat/grid/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 网格聚合图
-order: 1
----
diff --git a/site/examples/map-heat/heatmap/API.en.md b/site/examples/map-heat/heatmap/API.en.md
deleted file mode 100644
index d05edf7cd..000000000
--- a/site/examples/map-heat/heatmap/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/heatmap/API.zh.md b/site/examples/map-heat/heatmap/API.zh.md
deleted file mode 100644
index 7680e5da4..000000000
--- a/site/examples/map-heat/heatmap/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/heatmap/demo/global-2d.js b/site/examples/map-heat/heatmap/demo/global-2d.js
deleted file mode 100644
index 0dec4db83..000000000
--- a/site/examples/map-heat/heatmap/demo/global-2d.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HeatMap } from '@ant-design/maps';
-
-const DemoHeatMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [127.5671666579043, 7.445038892195569],
- zoom: 2.632456779444394,
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- size: {
- field: 'mag',
- },
- style: {
- intensity: 3,
- radius: 20,
- opacity: 1,
- colorsRamp: [
- {
- color: '#206C7C',
- position: 0,
- },
- {
- color: '#2EA9A1 ',
- position: 0.2,
- },
- {
- color: '#91EABC',
- position: 0.4,
- },
- {
- color: '#FFF598',
- position: 0.6,
- },
- {
- color: '#F7B74A',
- position: 0.8,
- },
- {
- color: '#FF4818',
- position: 1,
- },
- ],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/heatmap/demo/global-3d.js b/site/examples/map-heat/heatmap/demo/global-3d.js
deleted file mode 100644
index 113bc0b20..000000000
--- a/site/examples/map-heat/heatmap/demo/global-3d.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HeatMap } from '@ant-design/maps';
-
-const DemoHeatMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [127.5671666579043, 7.445038892195569],
- zoom: 2.632456779444394,
- pitch: 45,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- shape: 'heatmap3D',
- size: {
- field: 'mag',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/heatmap/demo/housing-transaction.js b/site/examples/map-heat/heatmap/demo/housing-transaction.js
deleted file mode 100644
index f106aee15..000000000
--- a/site/examples/map-heat/heatmap/demo/housing-transaction.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HeatMap } from '@ant-design/maps';
-
-const DemoHeatMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/S2Pb%26549sG/20210723023614.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- zoom: 11.7,
- center: [120.19660949707033, 30.234747338474293],
- pitch: 0,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- size: {
- field: 'count',
- value: [0, 1],
- },
- style: {
- intensity: 2,
- radius: 15,
- opacity: 1,
- colorsRamp: [
- {
- color: 'rgba(33,102,172,0.0)',
- position: 0,
- },
- {
- color: 'rgb(103,169,207)',
- position: 0.2,
- },
- {
- color: 'rgb(209,229,240)',
- position: 0.4,
- },
- {
- color: 'rgb(253,219,199)',
- position: 0.6,
- },
- {
- color: 'rgb(239,138,98)',
- position: 0.8,
- },
- {
- color: 'rgb(178,24,43,1.0)',
- position: 1,
- },
- ],
- },
- zoom: {
- position: 'bottomright',
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/heatmap/demo/meta.json b/site/examples/map-heat/heatmap/demo/meta.json
deleted file mode 100644
index 28f12b7b6..000000000
--- a/site/examples/map-heat/heatmap/demo/meta.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "housing-transaction.js",
- "title": {
- "zh": "杭州房屋交易量",
- "en": "Hangzhou housing transaction volume"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qgKi3OxQVE/4553729d-c2ce-490b-aebb-ea948bef7f2e.png"
- },
- {
- "filename": "traffic-accident.js",
- "title": {
- "zh": "全国交通事故增长率",
- "en": "National traffic accident growth rate"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/HRChB6ZKXz/343063e1-afbc-4fb1-a5d7-0383be3d28b3.png"
- },
- {
- "filename": "global-2d.js",
- "title": {
- "zh": "全球热力",
- "en": "Global heat map"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/svqQmzIKVw/2977de7d-6362-42f1-b731-05e734b6bfe0.png"
- },
- {
- "filename": "global-3d.js",
- "title": {
- "zh": "全球热力 3D",
- "en": "Global 3D heat map"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/5osUdJv%24Nq/51c6693d-e00a-4c32-adb2-90b95359d4f2.png"
- }
- ]
-}
diff --git a/site/examples/map-heat/heatmap/demo/traffic-accident.js b/site/examples/map-heat/heatmap/demo/traffic-accident.js
deleted file mode 100644
index 7e8283166..000000000
--- a/site/examples/map-heat/heatmap/demo/traffic-accident.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HeatMap } from '@ant-design/maps';
-
-const DemoHeatMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/OOSGL1vhp3/20200726024229.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- center: [127.5671666579043, 7.445038892195569],
- zoom: 2.632456779444394,
- pitch: 45,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- },
- shape: 'heatmap3D',
- size: {
- field: 'avg',
- value: ({ avg }) => avg / 100,
- },
- legend: {
- position: 'bottomleft',
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/heatmap/index.en.md b/site/examples/map-heat/heatmap/index.en.md
deleted file mode 100644
index 02e7f2b1a..000000000
--- a/site/examples/map-heat/heatmap/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Heatmap
-order: 0
----
diff --git a/site/examples/map-heat/heatmap/index.zh.md b/site/examples/map-heat/heatmap/index.zh.md
deleted file mode 100644
index a7e81e475..000000000
--- a/site/examples/map-heat/heatmap/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 点热力图
-order: 0
----
diff --git a/site/examples/map-heat/hexbin/API.en.md b/site/examples/map-heat/hexbin/API.en.md
deleted file mode 100644
index 7c6a2093d..000000000
--- a/site/examples/map-heat/hexbin/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/hexbin/API.zh.md b/site/examples/map-heat/hexbin/API.zh.md
deleted file mode 100644
index ee399ba5f..000000000
--- a/site/examples/map-heat/hexbin/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/map-heat/hexbin/demo/hexbin3d.js b/site/examples/map-heat/hexbin/demo/hexbin3d.js
deleted file mode 100644
index fec0ebd4c..000000000
--- a/site/examples/map-heat/hexbin/demo/hexbin3d.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HexbinMap } from '@ant-design/maps';
-
-const DemoHexbinMap = () => {
- const [data, setData] = useState([]);
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv')
- .then((response) => response.text())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- if (!data.length) {
- return null;
- }
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- pitch: 43,
- center: [120.13383079335335, 29.9],
- zoom: 8.2,
- },
- source: {
- data: data,
- parser: {
- type: 'csv',
- x: 'lng',
- y: 'lat',
- },
- aggregation: {
- field: 'v',
- radius: 2500,
- method: 'sum',
- },
- },
- shape: 'hexagonColumn',
- size: {
- field: 'sum',
- value: ({ sum }) => {
- return sum * 200;
- },
- },
- color: {
- field: 'sum',
- value: [
- '#094D4A',
- '#146968',
- '#1D7F7E',
- '#289899',
- '#34B6B7',
- '#4AC5AF',
- '#5FD3A6',
- '#7BE39E',
- '#A1EDB8',
- '#C3F9CC',
- '#DEFAC0',
- '#ECFFB1',
- ],
- },
- style: {
- coverage: 0.8,
- angle: 0,
- opacity: 1.0,
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/hexbin/demo/meta.json b/site/examples/map-heat/hexbin/demo/meta.json
deleted file mode 100644
index 12173939e..000000000
--- a/site/examples/map-heat/hexbin/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "traffic-delay.js",
- "title": {
- "zh": "杭州交通高峰期路口延误指数",
- "en": "Intersection delay index in traffic peak in Hangzhou"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/7W1VDrMpy%24/63f536b0-244a-41e9-9698-c3249a2108a7.png"
- },
- {
- "filename": "hexbin3d.js",
- "title": {
- "zh": "蜂窝热力 3D",
- "en": "Hexbin thermal 3D"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/fA50QqeP%24T/a5031ad0-7786-4183-bf23-e66dbdf52fe5.png"
- }
- ]
-}
diff --git a/site/examples/map-heat/hexbin/demo/traffic-delay.js b/site/examples/map-heat/hexbin/demo/traffic-delay.js
deleted file mode 100644
index 34c46dcb1..000000000
--- a/site/examples/map-heat/hexbin/demo/traffic-delay.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { HexbinMap } from '@ant-design/maps';
-
-const DemoHexbinMap = () => {
- const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
-
- useEffect(() => {
- asyncFetch();
- }, []);
-
- const asyncFetch = () => {
- fetch('https://gw.alipayobjects.com/os/antfincdn/Ml2DwikvFC/20210726100731.json')
- .then((response) => response.json())
- .then((json) => setData(json))
- .catch((error) => {
- console.log('fetch data failed', error);
- });
- };
- const config = {
- map: {
- type: 'mapbox',
- style: 'dark',
- pitch: 43,
- center: [120.13383079335335, 29.9],
- zoom: 8.2,
- },
- source: {
- data: data,
- parser: {
- type: 'geojson',
- },
- aggregation: {
- radius: 1200,
- field: 'rank',
- method: 'sum',
- },
- },
- shape: 'hexagonColumn',
- size: {
- field: 'sum',
- value: ({ sum }) => {
- return sum * 10;
- },
- },
- color: {
- field: 'sum',
- value: ['#0553A1', '#0B79B0', '#10B3B0', '#7CCF98', '#DCE872'],
- },
- style: {
- coverage: 0.8,
- angle: 0,
- opacity: 1.0,
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/map-heat/hexbin/index.en.md b/site/examples/map-heat/hexbin/index.en.md
deleted file mode 100644
index 2e8409c66..000000000
--- a/site/examples/map-heat/hexbin/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Hexbin
-order: 2
----
diff --git a/site/examples/map-heat/hexbin/index.zh.md b/site/examples/map-heat/hexbin/index.zh.md
deleted file mode 100644
index 14347e1a4..000000000
--- a/site/examples/map-heat/hexbin/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 蜂窝聚合图
-order: 2
----
diff --git a/site/examples/relation-graph/decomposition-tree-graph/API.en.md b/site/examples/relation-graph/decomposition-tree-graph/API.en.md
deleted file mode 100644
index c9663778f..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/decomposition-tree-graph/API.zh.md b/site/examples/relation-graph/decomposition-tree-graph/API.zh.md
deleted file mode 100644
index 77765267c..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/async-load.js b/site/examples/relation-graph/decomposition-tree-graph/demo/async-load.js
deleted file mode 100644
index accb89b30..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/async-load.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
-
- const fetchData = () => {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve(
- [1, 2].map(() => ({
- id: 'A2' + Math.random().toString(),
- value: {
- title: '异步节点' + Math.random().toString(),
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '50%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- })),
- );
- }, 1000);
- });
- };
-
- const getChildren = async () => {
- const asyncData = await fetchData();
- return asyncData;
- };
-
- const config = {
- data,
- autoFit: false,
- nodeCfg: {
- getChildren,
- },
- markerCfg: (cfg) => {
- const { children } = cfg;
- return {
- show: true,
- collapsed: !children?.length,
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/auto-width.js b/site/examples/relation-graph/decomposition-tree-graph/demo/auto-width.js
deleted file mode 100644
index 4aeb67108..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/auto-width.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比-非常非常非常非常非常长',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
- const config = {
- data,
- autoFit: false,
- nodeCfg: {
- autoWidth: true,
- items: {
- layout: 'follow',
- },
- },
- layout: {
- getWidth: () => {
- return 60;
- },
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/basic.js b/site/examples/relation-graph/decomposition-tree-graph/demo/basic.js
deleted file mode 100644
index 163ca8438..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/basic.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
-
- const config = {
- data,
- markerCfg: (cfg) => {
- const { children } = cfg;
- return {
- show: children?.length,
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/layout.js b/site/examples/relation-graph/decomposition-tree-graph/demo/layout.js
deleted file mode 100644
index 16cd4d041..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/layout.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
-
- const config = {
- data,
- layout: {
- type: 'indented',
- direction: 'LR',
- dropCap: false,
- indent: 250,
- getHeight: () => {
- return 60;
- },
- getWidth: () => {
- return 100;
- },
- },
- markerCfg: (cfg) => {
- const { children } = cfg;
- return {
- show: children?.length,
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/line-style.js b/site/examples/relation-graph/decomposition-tree-graph/demo/line-style.js
deleted file mode 100644
index 7bc3df5b1..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/line-style.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
-
- const config = {
- data,
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- nodeCfg: {
- items: {
- style: (cfg, group, type) => {
- const styles = {
- value: {
- fill: '#52c41a',
- },
- text: {
- fill: '#aaa',
- },
- icon: {
- width: 10,
- height: 10,
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- style: {
- stroke: '#40a9ff',
- },
- },
- edgeCfg: {
- endArrow: {
- fill: '#40a9ff',
- },
- style: (item, graph) => {
- /**
- * graph.findById(item.target).getModel()
- * item.source: 获取 source 数据
- * item.target: 获取 target 数据
- */
- // console.log(graph.findById(item.source).getModel());
- return {
- stroke: '#40a9ff',
- lineWidth: 1,
- strokeOpacity: 0.5,
- };
- },
- },
- markerCfg: (cfg) => {
- const { children } = cfg;
- return {
- show: children?.length,
- };
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/meta.json b/site/examples/relation-graph/decomposition-tree-graph/demo/meta.json
deleted file mode 100644
index e2c5c6161..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/meta.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "指标拆解图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cOaXmA8nSM/ea4bd786-2442-41a0-acb6-fa1d9dfb20f2.png"
- },
- {
- "filename": "layout.js",
- "title": {
- "zh": "指标拆解图-调整布局",
- "en": "Layout"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vcSjpldUrc/569cf7e4-0b01-41d7-b71f-fdb71645c520.png"
- },
- {
- "filename": "percent.js",
- "title": {
- "zh": "指标拆解图-节点占比",
- "en": "Percent"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/9UCy2n8WPu/fe8e1b07-efde-4ba8-9e83-97986f668faf.png"
- },
- {
- "filename": "style.js",
- "title": {
- "zh": "指标拆解图-节点样式",
- "en": "Node style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/IJhgY4ZtHf/4ca28c72-d60c-42ca-b562-1cec9489f409.png"
- },
- {
- "filename": "line-style.js",
- "title": {
- "zh": "指标拆解图-边样式",
- "en": "Line style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/sizWh4nARJ/615012d8-825d-462c-a20f-d1e51a2aed15.png"
- },
- {
- "filename": "no-stroke.js",
- "title": {
- "zh": "指标拆解图-无边框",
- "en": "No stroke"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/eVNaLR7coY/54584a5f-3233-4881-8006-aa7b71678994.png"
- },
- {
- "filename": "async-load.js",
- "title": {
- "zh": "指标拆解图-异步请求",
- "en": "Asynchronous request"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oTq0fFxMRL/993abc47-28f7-4489-b3d8-3a04f9fbb10b.png"
- },
- {
- "filename": "auto-width.js",
- "title": {
- "zh": "指标拆解图-自适应",
- "en": "Auto width"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/d21RW%24hqns/e390cf8f-375f-48da-8eee-b01d7c3184a9.png"
- }
- ]
-}
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/no-stroke.js b/site/examples/relation-graph/decomposition-tree-graph/demo/no-stroke.js
deleted file mode 100644
index 3acace017..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/no-stroke.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
- const config = {
- data,
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- nodeCfg: {
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- },
- },
- items: {
- containerStyle: {
- fill: '#fff',
- },
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 10,
- height: 10,
- },
- value: {
- fill: '#52c41a',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- style: {
- stroke: 'transparent',
- },
- nodeStateStyles: false,
- },
- edgeCfg: {
- endArrow: {
- show: false,
- },
- style: (item, graph) => {
- /**
- * graph.findById(item.target).getModel()
- * item.source: 获取 source 数据
- * item.target: 获取 target 数据
- */
- // console.log(graph.findById(item.source).getModel());
- return {
- stroke: '#40a9ff',
- lineWidth: Math.random() * 10 + 1,
- strokeOpacity: 0.5,
- };
- },
- edgeStateStyles: false,
- },
- };
- // @ts-ignore
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/percent.js b/site/examples/relation-graph/decomposition-tree-graph/demo/percent.js
deleted file mode 100644
index f2b6fc06a..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/percent.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '全年降本增收',
- items: [
- {
- text: '3031万',
- value: '80%',
- },
- ],
- percent: 0.8,
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '降本增收项目1',
- percent: 0.7,
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '70%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '降本增收项目1-1',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '降本增收项目1-2',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '降本增收项目1-3',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '降本增收项目2',
- percent: 0.3,
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
- const stroke = '#EA2F97';
- const config = {
- data,
- nodeCfg: {
- size: [140, 25],
- percent: {
- position: 'bottom',
- size: 4,
- style: (arg) => {
- return {
- radius: [0, 0, 0, 2],
- fill: arg.value.percent > 0.3 ? stroke : '#1f8fff',
- };
- },
- },
- items: {
- containerStyle: {
- fill: '#fff',
- },
- padding: 6,
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 12,
- height: 12,
- },
- value: {
- fill: '#f00',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: (arg) => {
- return {
- fill: '#fff',
- radius: 2,
- stroke: arg.value.percent > 0.3 ? stroke : '#1f8fff',
- };
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 1,
- },
- },
- style: (edge) => {
- return {
- stroke: '#518AD3',
- strokeOpacity: 0.5,
- };
- },
- endArrow: {
- fill: '#518AD3',
- },
- edgeStateStyles: {
- hover: {
- strokeOpacity: 1,
- },
- },
- },
- markerCfg: (cfg) => {
- return {
- position: 'right',
- show: cfg.children?.length,
- style: (arg) => {
- return {
- stroke: arg.value.percent > 0.3 ? stroke : '#1f8fff',
- };
- },
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/demo/style.js b/site/examples/relation-graph/decomposition-tree-graph/demo/style.js
deleted file mode 100644
index 5d8f2b451..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/demo/style.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DecompositionTreeGraph } from '@ant-design/graphs';
-
-const DemoDecompositionTreeGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '1152万',
- },
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '595万',
- },
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- ],
- };
-
- const config = {
- data,
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- nodeCfg: {
- title: {
- style: (cfg) => {
- return {
- fill: cfg?.value?.title === '青年' ? 'yellow' : '#fff',
- };
- },
- },
- items: {
- containerStyle: {
- fill: '#fff',
- },
- style: (cfg, group, type) => {
- const styles = {
- value: {
- fill: '#52c41a',
- },
- text: {
- fill: '#aaa',
- },
- icon: {
- width: 10,
- height: 10,
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- style: {
- radius: [2, 2, 2, 2],
- },
- },
- markerCfg: (cfg) => {
- const { children } = cfg;
- return {
- show: children?.length,
- };
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/decomposition-tree-graph/index.en.md b/site/examples/relation-graph/decomposition-tree-graph/index.en.md
deleted file mode 100644
index 04953fe18..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Decomposition Tree Graph
-order: 0
----
diff --git a/site/examples/relation-graph/decomposition-tree-graph/index.zh.md b/site/examples/relation-graph/decomposition-tree-graph/index.zh.md
deleted file mode 100644
index 1f4ea0914..000000000
--- a/site/examples/relation-graph/decomposition-tree-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 指标拆解图
-order: 0
----
diff --git a/site/examples/relation-graph/flow-analysis-graph/API.en.md b/site/examples/relation-graph/flow-analysis-graph/API.en.md
deleted file mode 100644
index 594bd1869..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/flow-analysis-graph/API.zh.md b/site/examples/relation-graph/flow-analysis-graph/API.zh.md
deleted file mode 100644
index 594bd1869..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/basic.js b/site/examples/relation-graph/flow-analysis-graph/demo/basic.js
deleted file mode 100644
index e6807b757..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/basic.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '-3',
- value: {
- title: '来源页面A',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-2',
- value: {
- title: '来源页面B',
- items: [
- {
- text: '点击UV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-1',
- value: {
- title: '来源页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '0',
- value: {
- title: '活动页面',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '去向页面A',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '去向页面B',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面D',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '5',
- value: {
- title: '去向页面E',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '7',
- value: {
- title: '去向页面G',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '8',
- value: {
- title: '去向页面H',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '-3',
- target: '0',
- value: '来源A',
- },
- {
- source: '-2',
- target: '0',
- value: '来源B',
- },
- {
- source: '-1',
- target: '0',
- value: '来源C',
- },
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '2',
- target: '6',
- },
- {
- source: '3',
- target: '7',
- },
- {
- source: '4',
- target: '8',
- },
- ],
- };
- const config = {
- data,
- nodeCfg: {
- size: [140, 25],
- items: {
- containerStyle: {
- fill: '#fff',
- },
- padding: 6,
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 12,
- height: 12,
- },
- value: {
- fill: '#f00',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: {
- fill: '#E6EAF1',
- stroke: '#B2BED5',
- radius: [2, 2, 2, 2],
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 1,
- },
- },
- style: (edge) => {
- const stroke = edge.target === '0' ? '#c86bdd' : '#5ae859';
- return {
- stroke,
- lineWidth: Math.random() * 10 + 1,
- strokeOpacity: 0.5,
- };
- },
- edgeStateStyles: {
- hover: {
- strokeOpacity: 1,
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/custom.js b/site/examples/relation-graph/flow-analysis-graph/demo/custom.js
deleted file mode 100644
index 001681738..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/custom.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '0',
- value: {
- title: 'spmd1',
- items: [
- {
- text: '曝光UV',
- value: '1000万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '45.9%',
- },
- {
- text: '点击UV',
- value: '10万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '1.9%',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '开通营销页1',
- items: [
- {
- text: '访问UV',
- value: '1000万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '45.9%',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '开通营销页2',
- items: [
- {
- text: '访问UV',
- value: '1000万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '45.9%',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面1',
- items: [
- {
- text: '访问UV',
- value: '1000万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '45.9%',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面2',
- items: [
- {
- text: '访问UV',
- value: '1000万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- trend: '45.9%',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '1',
- target: '3',
- },
- {
- source: '2',
- target: '4',
- },
- ],
- };
-
- const config = {
- data,
- nodeCfg: {
- size: [180, 30],
- items: {
- padding: 6,
- containerStyle: {
- fill: '#fff',
- },
- },
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon, trend } = item;
- text &&
- group?.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX,
- y: startY,
- text,
- fill: '#aaa',
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- value &&
- group?.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + 60,
- y: startY,
- text: value,
- fill: '#000',
- },
- name: `value-${Math.random()}`,
- });
- icon &&
- group?.addShape('image', {
- attrs: {
- x: startX + 100,
- y: startY,
- width: 8,
- height: 10,
- img: icon,
- },
- name: `image-${Math.random()}`,
- });
- trend &&
- group?.addShape('text', {
- attrs: {
- textBaseline: 'top',
- x: startX + 110,
- y: startY,
- text: trend,
- fill: '#f00',
- },
- name: `value-${Math.random()}`,
- });
-
- // 行高
- return 14;
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: {
- fill: '#E6EAF1',
- stroke: '#B2BED5',
- radius: [2, 2, 2, 2],
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 0.5,
- },
- },
- edgeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- layout: {
- ranksepFunc: () => 30,
- nodesepFunc: () => 30,
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/layout.js b/site/examples/relation-graph/flow-analysis-graph/demo/layout.js
deleted file mode 100644
index 55f9af1fc..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/layout.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '-3',
- value: {
- title: '来源页面A',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-2',
- value: {
- title: '来源页面B',
- items: [
- {
- text: '点击UV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-1',
- value: {
- title: '来源页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '0',
- value: {
- title: '活动页面',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '去向页面A',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '去向页面B',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面D',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '5',
- value: {
- title: '去向页面E',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '7',
- value: {
- title: '去向页面G',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '8',
- value: {
- title: '去向页面H',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '-3',
- target: '0',
- value: '来源A',
- },
- {
- source: '-2',
- target: '0',
- value: '来源B',
- },
- {
- source: '-1',
- target: '0',
- value: '来源C',
- },
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '2',
- target: '6',
- },
- {
- source: '3',
- target: '7',
- },
- {
- source: '4',
- target: '8',
- },
- ],
- };
- const config = {
- data,
- layout: {
- rankdir: 'TB',
- ranksepFunc: () => 20,
- },
- nodeCfg: {
- anchorPoints: [
- [0.5, 0],
- [0.5, 1],
- ],
- },
- edgeCfg: {
- type: 'polyline',
- endArrow: true,
- },
- markerCfg: (cfg) => {
- return {
- position: 'bottom',
- show: data.edges.filter((item) => item.source === cfg.id)?.length,
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/line-style.js b/site/examples/relation-graph/flow-analysis-graph/demo/line-style.js
deleted file mode 100644
index e6807b757..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/line-style.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '-3',
- value: {
- title: '来源页面A',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-2',
- value: {
- title: '来源页面B',
- items: [
- {
- text: '点击UV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-1',
- value: {
- title: '来源页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '0',
- value: {
- title: '活动页面',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '去向页面A',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '去向页面B',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面D',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '5',
- value: {
- title: '去向页面E',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '7',
- value: {
- title: '去向页面G',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '8',
- value: {
- title: '去向页面H',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '-3',
- target: '0',
- value: '来源A',
- },
- {
- source: '-2',
- target: '0',
- value: '来源B',
- },
- {
- source: '-1',
- target: '0',
- value: '来源C',
- },
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '2',
- target: '6',
- },
- {
- source: '3',
- target: '7',
- },
- {
- source: '4',
- target: '8',
- },
- ],
- };
- const config = {
- data,
- nodeCfg: {
- size: [140, 25],
- items: {
- containerStyle: {
- fill: '#fff',
- },
- padding: 6,
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 12,
- height: 12,
- },
- value: {
- fill: '#f00',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: {
- fill: '#E6EAF1',
- stroke: '#B2BED5',
- radius: [2, 2, 2, 2],
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 1,
- },
- },
- style: (edge) => {
- const stroke = edge.target === '0' ? '#c86bdd' : '#5ae859';
- return {
- stroke,
- lineWidth: Math.random() * 10 + 1,
- strokeOpacity: 0.5,
- };
- },
- edgeStateStyles: {
- hover: {
- strokeOpacity: 1,
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/meta.json b/site/examples/relation-graph/flow-analysis-graph/demo/meta.json
deleted file mode 100644
index 9c76b182e..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/meta.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "来源去向图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SM9hvYbqYB/1caef0d3-78cf-4f7d-aaca-59a361cae2ec.png"
- },
- {
- "filename": "layout.js",
- "title": {
- "zh": "来源去向图-调整布局",
- "en": "Layout"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26%26CzCKJS%26v/3dabb996-b6eb-4be9-b5ce-71f58bb7a238.png"
- },
- {
- "filename": "line-style.js",
- "title": {
- "zh": "来源去向图-边样式",
- "en": "Line style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/RBLyS%24za4m/ab3d4511-87d4-4d96-989b-97704c283556.png"
- },
- {
- "filename": "state.js",
- "title": {
- "zh": "来源去向图-状态",
- "en": "State"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vaMmDDzbmV/fc466a8f-0526-4226-af7d-a4445b00df26.png"
- },
- {
- "filename": "type.js",
- "title": {
- "zh": "来源去向图-节点类型",
- "en": "Node type"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/FZ8uhqbOHj/4b5198e2-5466-46e9-8869-fca9015ccbf6.png"
- },
- {
- "filename": "custom.js",
- "title": {
- "zh": "来源去向图-自定义节点",
- "en": "Custom node"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/x%24v02l2Gk1/b41b1807-2dba-4f4c-af46-192930eb7501.png"
- }
- ]
-}
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/state.js b/site/examples/relation-graph/flow-analysis-graph/demo/state.js
deleted file mode 100644
index e59b8f0e3..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/state.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '-3',
- value: {
- title: '来源页面A',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-2',
- value: {
- title: '来源页面B',
- items: [
- {
- text: '点击UV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-1',
- value: {
- title: '来源页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '0',
- value: {
- title: '活动页面',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '去向页面A',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '去向页面B',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面D',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '5',
- value: {
- title: '去向页面E',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '7',
- value: {
- title: '去向页面G',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '8',
- value: {
- title: '去向页面H',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '-3',
- target: '0',
- value: '来源A',
- },
- {
- source: '-2',
- target: '0',
- value: '来源B',
- },
- {
- source: '-1',
- target: '0',
- value: '来源C',
- },
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '2',
- target: '6',
- },
- {
- source: '3',
- target: '7',
- },
- {
- source: '4',
- target: '8',
- },
- ],
- };
- const config = {
- data,
- nodeCfg: {
- size: [140, 25],
- badge: {
- style: (cfg) => {
- const ids = ['-3', '-2', '-1'];
- const fill = ids.includes(cfg.id) ? '#c86bdd' : '#5ae859';
- return {
- fill,
- radius: [2, 0, 0, 2],
- };
- },
- },
- items: {
- padding: 6,
- containerStyle: {
- fill: '#fff',
- },
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 12,
- height: 12,
- },
- value: {
- fill: '#f00',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: {
- fill: '#E6EAF1',
- stroke: '#B2BED5',
- radius: [2, 2, 2, 2],
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 1,
- },
- },
- style: (edge) => {
- const stroke = edge.target === '0' ? '#c86bdd' : '#5ae859';
- return {
- stroke,
- lineWidth: 1,
- strokeOpacity: 0.5,
- };
- },
- edgeStateStyles: {
- hover: {
- lineWidth: 2,
- strokeOpacity: 1,
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/demo/type.js b/site/examples/relation-graph/flow-analysis-graph/demo/type.js
deleted file mode 100644
index e59b8f0e3..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/demo/type.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FlowAnalysisGraph } from '@ant-design/graphs';
-
-const DemoFlowAnalysisGraph = () => {
- const data = {
- nodes: [
- {
- id: '-3',
- value: {
- title: '来源页面A',
- items: [
- {
- text: '曝光PV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-2',
- value: {
- title: '来源页面B',
- items: [
- {
- text: '点击UV',
- value: '10.30万',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- },
- {
- id: '-1',
- value: {
- title: '来源页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '0',
- value: {
- title: '活动页面',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '1',
- value: {
- title: '去向页面A',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '2',
- value: {
- title: '去向页面B',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '3',
- value: {
- title: '去向页面C',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '4',
- value: {
- title: '去向页面D',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '5',
- value: {
- title: '去向页面E',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '6',
- value: {
- title: '去向页面F',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '7',
- value: {
- title: '去向页面G',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- {
- id: '8',
- value: {
- title: '去向页面H',
- items: [
- {
- text: '访问页面UV',
- },
- ],
- },
- },
- ],
- edges: [
- {
- source: '-3',
- target: '0',
- value: '来源A',
- },
- {
- source: '-2',
- target: '0',
- value: '来源B',
- },
- {
- source: '-1',
- target: '0',
- value: '来源C',
- },
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '2',
- target: '6',
- },
- {
- source: '3',
- target: '7',
- },
- {
- source: '4',
- target: '8',
- },
- ],
- };
- const config = {
- data,
- nodeCfg: {
- size: [140, 25],
- badge: {
- style: (cfg) => {
- const ids = ['-3', '-2', '-1'];
- const fill = ids.includes(cfg.id) ? '#c86bdd' : '#5ae859';
- return {
- fill,
- radius: [2, 0, 0, 2],
- };
- },
- },
- items: {
- padding: 6,
- containerStyle: {
- fill: '#fff',
- },
- style: (cfg, group, type) => {
- const styles = {
- icon: {
- width: 12,
- height: 12,
- },
- value: {
- fill: '#f00',
- },
- text: {
- fill: '#aaa',
- },
- };
- return styles[type];
- },
- },
- nodeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- },
- },
- title: {
- containerStyle: {
- fill: 'transparent',
- },
- style: {
- fill: '#000',
- fontSize: 12,
- },
- },
- style: {
- fill: '#E6EAF1',
- stroke: '#B2BED5',
- radius: [2, 2, 2, 2],
- },
- },
- edgeCfg: {
- label: {
- style: {
- fill: '#aaa',
- fontSize: 12,
- fillOpacity: 1,
- },
- },
- style: (edge) => {
- const stroke = edge.target === '0' ? '#c86bdd' : '#5ae859';
- return {
- stroke,
- lineWidth: 1,
- strokeOpacity: 0.5,
- };
- },
- edgeStateStyles: {
- hover: {
- lineWidth: 2,
- strokeOpacity: 1,
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/flow-analysis-graph/index.en.md b/site/examples/relation-graph/flow-analysis-graph/index.en.md
deleted file mode 100644
index 4b38637d9..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Flow Analysis Graph
-order: 1
----
diff --git a/site/examples/relation-graph/flow-analysis-graph/index.zh.md b/site/examples/relation-graph/flow-analysis-graph/index.zh.md
deleted file mode 100644
index cfc2ce4c0..000000000
--- a/site/examples/relation-graph/flow-analysis-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 来源去向图
-order: 1
----
diff --git a/site/examples/relation-graph/fund-flow-graph/API.en.md b/site/examples/relation-graph/fund-flow-graph/API.en.md
deleted file mode 100644
index 718c4c032..000000000
--- a/site/examples/relation-graph/fund-flow-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/fund-flow-graph/API.zh.md b/site/examples/relation-graph/fund-flow-graph/API.zh.md
deleted file mode 100644
index 8ef851055..000000000
--- a/site/examples/relation-graph/fund-flow-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/fund-flow-graph/demo/basic.js b/site/examples/relation-graph/fund-flow-graph/demo/basic.js
deleted file mode 100644
index 3468fb883..000000000
--- a/site/examples/relation-graph/fund-flow-graph/demo/basic.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { FundFlowGraph } from '@ant-design/graphs';
-
-const DemoFundFlowGraph = () => {
- const data = {
- nodes: [
- {
- id: '1',
- value: {
- text: 'Company1',
- // 建议使用 bae64 数据
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/28B4PgocL4/bbd3e7ef-6b5e-4034-893d-1b5073ad9aa4.png',
- },
- },
- {
- id: '2',
- value: { text: 'Company2' },
- },
- {
- id: '3',
- value: { text: 'Company3' },
- },
- {
- id: '4',
- value: { text: 'Company4' },
- },
- {
- id: '5',
- value: { text: 'Company5' },
- },
- {
- id: '6',
- value: { text: 'Company6' },
- },
- {
- id: '7',
- value: { text: 'Company7' },
- },
- {
- id: '8',
- value: { text: 'Company8' },
- },
- {
- id: '9',
- value: { text: 'Company9' },
- },
- ],
- edges: [
- {
- source: '1',
- target: '2',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '1',
- target: '3',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '2',
- target: '5',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '5',
- target: '6',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '3',
- target: '4',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '4',
- target: '7',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '1',
- target: '8',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '1',
- target: '9',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- ],
- };
- const config = {
- data,
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/fund-flow-graph/demo/meta.json b/site/examples/relation-graph/fund-flow-graph/demo/meta.json
deleted file mode 100644
index 4f115e0dc..000000000
--- a/site/examples/relation-graph/fund-flow-graph/demo/meta.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "资金流向图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qQk2NkG%26En/8a4e97f4-23a0-4aba-b2a6-a71343b7a3f8.png"
- },
- {
- "filename": "style.js",
- "title": {
- "zh": "资金流向图-格式化设置",
- "en": "Style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/p7h4IUyVXM/680af564-b119-4e38-9626-bb9917424ec7.png"
- }
- ]
-}
diff --git a/site/examples/relation-graph/fund-flow-graph/demo/style.js b/site/examples/relation-graph/fund-flow-graph/demo/style.js
deleted file mode 100644
index c003477b1..000000000
--- a/site/examples/relation-graph/fund-flow-graph/demo/style.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { FundFlowGraph } from '@ant-design/graphs';
-
-const DemoFundFlowGraph = () => {
- const data = {
- nodes: [
- {
- id: '1',
- value: {
- text: 'Company1',
- // 建议使用 bae64 数据
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/28B4PgocL4/bbd3e7ef-6b5e-4034-893d-1b5073ad9aa4.png',
- },
- },
- {
- id: '2',
- value: { text: 'Company2' },
- },
- {
- id: '3',
- value: { text: 'Company3' },
- },
- {
- id: '4',
- value: { text: 'Company4' },
- },
- {
- id: '5',
- value: { text: 'Company5' },
- },
- {
- id: '6',
- value: { text: 'Company6' },
- },
- {
- id: '7',
- value: { text: 'Company7' },
- },
- {
- id: '8',
- value: { text: 'Company8' },
- },
- {
- id: '9',
- value: { text: 'Company9' },
- },
- ],
- edges: [
- {
- source: '1',
- target: '2',
- value: { text: '100,000 Yuan', subText: '2019-08-03', extraKey: 'A' },
- },
- {
- source: '1',
- target: '3',
- value: { text: '100,000 Yuan', subText: '2019-08-03', extraKey: 'B' },
- },
- {
- source: '2',
- target: '5',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '5',
- target: '6',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '3',
- target: '4',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '4',
- target: '7',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '1',
- target: '8',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- {
- source: '1',
- target: '9',
- value: { text: '100,000 Yuan', subText: '2019-08-03' },
- },
- ],
- };
- const colorMap = {
- A: '#FFAA15',
- B: '#72CC4A',
- };
- const config = {
- data,
- edgeCfg: {
- // type: 'line',
- endArrow: (edge) => {
- const { value } = edge;
- return {
- fill: colorMap[value.extraKey] || '#40a9ff',
- };
- },
- style: (edge) => {
- const { value } = edge;
- return {
- stroke: colorMap[value.extraKey] || '#40a9ff',
- };
- },
- edgeStateStyles: {
- hover: {
- stroke: '#1890ff',
- lineWidth: 2,
- endArrow: {
- fill: '#1890ff',
- },
- },
- },
- },
- markerCfg: (cfg) => {
- const { edges } = data;
- return {
- position: 'right',
- show: edges.find((item) => item.source === cfg.id),
- collapsed: !edges.find((item) => item.source === cfg.id),
- };
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/fund-flow-graph/index.en.md b/site/examples/relation-graph/fund-flow-graph/index.en.md
deleted file mode 100644
index 77e92773e..000000000
--- a/site/examples/relation-graph/fund-flow-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Fund Flow Graph
-order: 2
----
diff --git a/site/examples/relation-graph/fund-flow-graph/index.zh.md b/site/examples/relation-graph/fund-flow-graph/index.zh.md
deleted file mode 100644
index ffce08c52..000000000
--- a/site/examples/relation-graph/fund-flow-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 资金流向图
-order: 2
----
diff --git a/site/examples/relation-graph/mind-map-graph/API.en.md b/site/examples/relation-graph/mind-map-graph/API.en.md
deleted file mode 100644
index f75476884..000000000
--- a/site/examples/relation-graph/mind-map-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/mind-map-graph/API.zh.md b/site/examples/relation-graph/mind-map-graph/API.zh.md
deleted file mode 100644
index d68916f48..000000000
--- a/site/examples/relation-graph/mind-map-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/mind-map-graph/demo/basic.js b/site/examples/relation-graph/mind-map-graph/demo/basic.js
deleted file mode 100644
index 060b87e7b..000000000
--- a/site/examples/relation-graph/mind-map-graph/demo/basic.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { MindMapGraph } from '@ant-design/graphs';
-
-const MindMapGraphGraph = () => {
- const data = {
- id: 'A0',
- value: {
- title: '订单金额',
- items: [
- {
- text: '3031万',
- },
- ],
- },
- children: [
- {
- id: 'A1',
- value: {
- title: '华南',
- items: [
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- children: [
- {
- id: 'A11',
- value: {
- title: '广东',
- items: [
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A12',
- value: {
- title: '广西',
- items: [
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- {
- id: 'A13',
- value: {
- title: '海南',
- items: [
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- {
- id: 'A2',
- value: {
- title: '华北',
- items: [
- {
- text: '占比',
- value: '30%',
- icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
- },
- ],
- },
- children: [
- {
- id: 'A2-1',
- value: {
- title: '华北',
- items: [
- {
- text: '占比',
- value: '30%',
- },
- ],
- },
- },
- ],
- },
- ],
- };
-
- const level = [-2, -1, 0, 1, 2];
- const levelTexts = level.map((l) => {
- if (l < 0) return `${Math.abs(l)}层上游`;
- if (l > 0) return `${Math.abs(l)}层下游`;
- return `主节点`;
- });
- const containerWidth = 800;
- const width = 120;
- const LevelFC = () => (
-
- {levelTexts.map((l) => (
-
-
- {l}
-
-
- ))}
-
- );
-
- const nodeSize = [width, 40];
- const config = {
- data: data,
- autoFit: false,
- width: containerWidth,
- // level: 5,
- layout: {
- getHeight: () => {
- return 40;
- },
- getWidth: () => {
- return nodeSize[0];
- },
- getVGap: () => {
- return 16;
- },
- getHGap: () => {
- return (containerWidth / level.length - width) / 2;
- },
- },
- // level,
- nodeCfg: {
- size: nodeSize,
- padding: 4,
- style: {
- stroke: '#5AD8A6',
- },
- items: {
- padding: [4, 0],
- },
- customContent: (item, group, cfg) => {
- const { startX, startY, width } = cfg;
- const { text, value, icon, trend } = item;
- const tagWidth = 28;
- const tagHeight = 16;
- group?.addShape('rect', {
- attrs: {
- x: 0,
- y: 0,
- width: nodeSize[0],
- height: nodeSize[1] + 8,
- fillOpacity: 0.1,
- },
- // group 内唯一字段
- name: `container-${Math.random()}`,
- });
- group?.addShape('rect', {
- attrs: {
- x: startX,
- y: startY,
- width: tagWidth,
- height: tagHeight,
- fill: '#47c796',
- },
- // group 内唯一字段
- name: `tag-${Math.random()}`,
- });
- group?.addShape('text', {
- attrs: {
- textBaseline: 'middle',
- textAlign: 'center',
- x: startX + tagWidth / 2,
- y: startY + tagHeight / 2,
- text: '人群',
- fill: '#fff',
- fontSize: 10,
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- group?.addShape('text', {
- attrs: {
- textBaseline: 'middle',
- textAlign: 'start',
- x: startX + tagWidth + 4,
- y: startY + tagHeight / 2,
- text: '人群服务名称',
- fill: 'rgba(0,0,0,.65)',
- fontSize: 10,
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- const textMargin = 10;
- const sense = group?.addShape('text', {
- attrs: {
- textBaseline: 'top',
- textAlign: 'start',
- x: startX,
- y: startY + tagHeight + textMargin,
- text: '所属场景：',
- fill: 'rgba(0,0,0,.45)',
- fontSize: 10,
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- group?.addShape('text', {
- attrs: {
- textBaseline: 'top',
- textAlign: 'start',
- x: sense.getBBox().maxX,
- y: startY + tagHeight + textMargin,
- text: '这是场景名称',
- fill: 'rgba(0,0,0,.45)',
- fontSize: 10,
- },
- // group 内唯一字段
- name: `text-${Math.random()}`,
- });
- },
- },
- markerCfg: (cfg) => {
- const { children = [], id } = cfg;
- if (id === 'A0') {
- return [
- {
- position: 'left',
- show: !!children?.length,
- collapsed: !children?.length,
- },
- {
- position: 'right',
- show: !!children?.length,
- collapsed: !children?.length,
- },
- ];
- }
- return {
- position: 'right',
- show: !!children?.length,
- collapsed: !children?.length,
- };
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return (
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/mind-map-graph/index.en.md b/site/examples/relation-graph/mind-map-graph/index.en.md
deleted file mode 100644
index 5a892d065..000000000
--- a/site/examples/relation-graph/mind-map-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: MindMap Graph
-order: 0
----
diff --git a/site/examples/relation-graph/mind-map-graph/index.zh.md b/site/examples/relation-graph/mind-map-graph/index.zh.md
deleted file mode 100644
index 7734d8494..000000000
--- a/site/examples/relation-graph/mind-map-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 脑图
-order: 4
----
diff --git a/site/examples/relation-graph/organization-graph/API.en.md b/site/examples/relation-graph/organization-graph/API.en.md
deleted file mode 100644
index 4e754e489..000000000
--- a/site/examples/relation-graph/organization-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/organization-graph/API.zh.md b/site/examples/relation-graph/organization-graph/API.zh.md
deleted file mode 100644
index 0b4207193..000000000
--- a/site/examples/relation-graph/organization-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/organization-graph/demo/basic.js b/site/examples/relation-graph/organization-graph/demo/basic.js
deleted file mode 100644
index 8a3a1ae9f..000000000
--- a/site/examples/relation-graph/organization-graph/demo/basic.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { OrganizationGraph } from '@ant-design/graphs';
-
-const DemoOrganizationGraph = () => {
- const data = {
- id: 'root',
- value: {
- name: '股东会',
- },
- children: [
- {
- id: 'joel',
- value: {
- name: 'Joel Alan',
- },
- children: [
- {
- id: 'c1',
- value: {
- name: 'c1',
- },
- children: [
- {
- id: 'c1-1',
- value: {
- name: 'c1-1',
- },
- },
- {
- id: 'c1-2',
- value: {
- name: 'c1-2',
- },
- children: [
- {
- id: 'c1-2-1',
- value: {
- name: 'c1-2-1',
- },
- },
- {
- id: 'c1-2-2',
- value: {
- name: 'c1-2-2',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c2',
- value: {
- name: 'c2',
- },
- },
- {
- id: 'c3',
- value: {
- name: 'c3',
- },
- children: [
- {
- id: 'c3-1',
- value: {
- name: 'c3-1',
- },
- },
- {
- id: 'c3-2',
- value: {
- name: 'c3-2',
- },
- children: [
- {
- id: 'c3-2-1',
- value: {
- name: 'c3-2-1',
- },
- },
- {
- id: 'c3-2-2',
- value: {
- name: 'c3-2-2',
- },
- },
- {
- id: 'c3-2-3',
- value: {
- name: 'c3-2-3',
- },
- },
- ],
- },
- {
- id: 'c3-3',
- value: {
- name: 'c3-3',
- },
- },
- ],
- },
- ],
- },
- ],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/organization-graph/demo/custom.js b/site/examples/relation-graph/organization-graph/demo/custom.js
deleted file mode 100644
index a7ba1abcf..000000000
--- a/site/examples/relation-graph/organization-graph/demo/custom.js
+++ /dev/null
@@ -1,320 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { OrganizationGraph } from '@ant-design/graphs';
-
-const DemoOrganizationGraph = () => {
- const data = {
- id: 'root',
- value: {
- name: '赵某某',
- },
- children: [
- {
- id: 'jug',
- value: {
- name: '审判长',
- level: 2,
- },
- children: [
- {
- id: 'joel',
- value: {
- name: '一审',
- level: 1,
- },
- children: [
- {
- id: 'c1',
- value: {
- name: '原告',
- level: 2,
- },
- children: [
- {
- id: 'c1-1',
- value: {
- name: '中纺原料xx有限公司',
- },
- children: [
- {
- id: 'c1-1-1',
- value: {
- name: '法定代表人',
- },
- children: [
- {
- id: 'c1-1-1-1',
- value: {
- name: '刘某某',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c1-2',
- value: {
- name: '委托诉讼代理人',
- },
- children: [
- {
- id: 'c1-2-1',
- value: {
- name: '北京xx律师事务所',
- },
- },
- {
- id: 'c1-2-2',
- value: {
- name: '赵某某',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c2',
- value: {
- name: '被告1',
- level: 2,
- },
- children: [
- {
- id: 'c2-1',
- value: {
- name: '北京西郊xxxx农副产品批发市场有限公司',
- },
- children: [
- {
- id: 'c2-1-1',
- value: {
- name: '法定代表人',
- },
- children: [
- {
- id: 'c2-1-1-1',
- value: {
- name: '李某某',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c2-2',
- value: {
- name: '委托诉讼代理人',
- },
- children: [
- {
- id: 'c2-2-1',
- value: {
- name: '北京xx律师事务所',
- },
- },
- {
- id: 'c2-2-2',
- value: {
- name: '张某某',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c3',
- value: {
- name: '被告2',
- level: 2,
- },
- children: [
- {
- id: 'c3-1',
- value: {
- name: '徐某某',
- },
- },
- {
- id: 'c3-2',
- value: {
- name: '委托诉讼代理人',
- },
- children: [
- {
- id: 'c3-2-1',
- value: {
- name: '北京xx律师事务所',
- },
- },
- {
- id: 'c3-2-2',
- value: {
- name: '张某某',
- },
- },
- ],
- },
- ],
- },
- ],
- },
- ],
- },
- ],
- };
- const getTextStyle = (level) => {
- switch (level) {
- case 1:
- return 18;
- case 2:
- return 12;
- default:
- return 12;
- }
- };
-
- const getRootTextAttrs = () => {
- return {
- fontSize: getTextStyle(1),
- fontWeight: 'bold',
- fill: '#fff',
- };
- };
-
- const getSecondTextStyle = () => {
- return {
- fontSize: getTextStyle(2),
- color: '#000',
- };
- };
-
- const getRootNodeStyle = () => {
- return {
- fill: '#1E88E5',
- stroke: '#1E88E5',
- radius: 5,
- };
- };
-
- const getSecondNodeStyle = () => {
- return {
- fill: '#e8e8e8',
- stroke: '#e8e8e8',
- radius: 5,
- };
- };
-
- const calcStrLen = function calcStrLen(str) {
- var len = 0;
- for (var i = 0; i < str.length; i++) {
- if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
- len++;
- } else {
- len += 2;
- }
- }
- return len;
- };
-
- const config = {
- nodeCfg: {
- size: [40, 40],
- autoWidth: true,
- padding: 10,
- style: (item) => {
- const { level } = item.value;
- return {
- fill: 'transparent',
- stroke: 'transparent',
- radius: 4,
- cursor: 'pointer',
- ...(level === 1 ? getRootNodeStyle() : {}),
- ...(level === 2 ? getSecondNodeStyle() : {}),
- };
- },
- nodeStateStyles: {
- hover: {
- lineWidth: 2,
- stroke: '#96DEFF',
- },
- },
- label: {
- style: (cfg, group, type) => {
- const { level, href } = cfg.value;
-
- if (type !== 'name') {
- return {};
- }
- return {
- fontSize: getTextStyle(),
- cursor: 'pointer',
- fill: href ? '#1890ff' : '#000',
- ...(level === 1 ? getRootTextAttrs() : {}),
- ...(level === 2 ? getSecondTextStyle() : {}),
- };
- },
- },
- anchorPoints: [
- [0, 0.5],
- [1, 0.5],
- ],
- },
- edgeCfg: {
- type: 'polyline',
- style: {
- stroke: '#000',
- endArrow: false,
- },
- },
- markerCfg: (cfg) => {
- const { level, direction } = cfg.value;
- const show = level !== 1 && cfg.children && cfg.children.length > 0;
- return {
- position: direction,
- show,
- };
- },
- layout: {
- type: 'mindmap',
- direction: 'H',
- getWidth: (cfg) => {
- const { name, level } = cfg.value;
- const fontSize = getTextStyle(level);
- const width = (fontSize * calcStrLen(name)) / 2;
- return width;
- },
- getHeight: () => {
- return 25;
- },
- getVGap: () => {
- return 20;
- },
- getHGap: () => {
- return 40;
- },
- getSide: (d) => {
- return d.data.value.direction === 'left' ? 'left' : 'right';
- },
- },
- autoFit: true,
- fitCenter: true,
- animate: false,
- behaviors: ['drag-canvas', 'zoom-canvas'],
- onReady: (graph) => {
- graph.on('node:click', (evt) => {
- const { item, target } = evt;
- const { value } = item.get('model');
- if (value.href) {
- window.open(value.href);
- }
- });
- },
- };
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/organization-graph/demo/meta.json b/site/examples/relation-graph/organization-graph/demo/meta.json
deleted file mode 100644
index 7ff54143a..000000000
--- a/site/examples/relation-graph/organization-graph/demo/meta.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "组织架构图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ZOrAJo18HO/5f53b378-ffc0-4982-83d4-a0ddcac86b4d.png"
- },
- {
- "filename": "style.js",
- "title": {
- "zh": "组织架构图-格式化设置",
- "en": "Style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/9Q5ftNEgkR/f9f6ae73-9a2c-4c8d-8ce2-919b16acdad0.png"
- },
- {
- "filename": "custom.js",
- "title": {
- "zh": "组织架构图-自定义样式",
- "en": "Custom"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/JailFwu5B3/042ce37a-9b73-4218-ae2c-dcdb5994379a.png"
- }
- ]
-}
diff --git a/site/examples/relation-graph/organization-graph/demo/style.js b/site/examples/relation-graph/organization-graph/demo/style.js
deleted file mode 100644
index 67d4383b8..000000000
--- a/site/examples/relation-graph/organization-graph/demo/style.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { OrganizationGraph } from '@ant-design/graphs';
-
-const DemoOrganizationGraph = () => {
- const data = {
- id: 'joel',
- value: {
- name: 'Joel Alan',
- title: 'CEO',
- // 建议使用 bae64 数据
- icon: 'https://avatars.githubusercontent.com/u/31396322?v=4',
- },
- children: [
- {
- id: 'c1',
- value: {
- name: 'c1',
- title: 'CTO',
- },
- children: [
- {
- id: 'c1-1',
- value: {
- name: 'c1-1',
- },
- },
- {
- id: 'c1-2',
- value: {
- name: 'c1-2',
- },
- children: [
- {
- id: 'c1-2-1',
- value: {
- name: 'c1-2-1',
- },
- },
- {
- id: 'c1-2-2',
- value: {
- name: 'c1-2-2',
- },
- },
- ],
- },
- ],
- },
- {
- id: 'c2',
- value: {
- name: 'c2',
- title: 'COO',
- },
- },
- {
- id: 'c3',
- value: {
- name: 'c3',
- title: 'CFO',
- },
- children: [
- {
- id: 'c3-1',
- value: {
- name: 'c3-1',
- },
- },
- {
- id: 'c3-2',
- value: {
- name: 'c3-2',
- },
- children: [
- {
- id: 'c3-2-1',
- value: {
- name: 'c3-2-1',
- },
- },
- {
- id: 'c3-2-2',
- value: {
- name: 'c3-2-2',
- },
- },
- {
- id: 'c3-2-3',
- value: {
- name: 'c3-2-3',
- },
- },
- ],
- },
- {
- id: 'c3-3',
- value: {
- name: 'c3-3',
- },
- },
- ],
- },
- ],
- };
-
- return (
- {
- return node.id === 'joel'
- ? {
- fill: '#91d5ff',
- stroke: '#91d5ff',
- }
- : {};
- },
- label: {
- style: (node, group, type) => {
- const styles = {
- icon: {
- width: 32,
- height: 32,
- },
- title: {
- fill: '#fff',
- },
- name: {
- fill: '#fff',
- },
- };
- return node.id === 'joel' ? styles[type] : {};
- },
- },
- }}
- />
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/organization-graph/index.en.md b/site/examples/relation-graph/organization-graph/index.en.md
deleted file mode 100644
index dee962beb..000000000
--- a/site/examples/relation-graph/organization-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Organization Graph
-order: 3
----
diff --git a/site/examples/relation-graph/organization-graph/index.zh.md b/site/examples/relation-graph/organization-graph/index.zh.md
deleted file mode 100644
index 91f7b83bb..000000000
--- a/site/examples/relation-graph/organization-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 组织架构图
-order: 3
----
diff --git a/site/examples/relation-graph/radial-graph/API.en.md b/site/examples/relation-graph/radial-graph/API.en.md
deleted file mode 100644
index 101499f13..000000000
--- a/site/examples/relation-graph/radial-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/radial-graph/API.zh.md b/site/examples/relation-graph/radial-graph/API.zh.md
deleted file mode 100644
index 7f9528d9c..000000000
--- a/site/examples/relation-graph/radial-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/radial-graph/demo/basic.js b/site/examples/relation-graph/radial-graph/demo/basic.js
deleted file mode 100644
index 75327cc83..000000000
--- a/site/examples/relation-graph/radial-graph/demo/basic.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { RadialGraph } from '@ant-design/graphs';
-
-const DemoRadialGraph = () => {
- const chartRef = useRef();
- const RadialData = {
- nodes: [
- {
- id: '0',
- label: '0',
- },
- {
- id: '1',
- label: '1',
- },
- {
- id: '2',
- label: '2',
- },
- {
- id: '3',
- label: '3',
- },
- {
- id: '4',
- label: '4',
- },
- {
- id: '5',
- label: '5',
- },
- {
- id: '6',
- label: '6',
- },
- {
- id: '7',
- label: '7',
- },
- {
- id: '8',
- label: '8',
- },
- {
- id: '9',
- label: '9',
- },
- ],
- edges: [
- {
- source: '0',
- target: '1',
- },
- {
- source: '0',
- target: '2',
- },
- {
- source: '0',
- target: '3',
- },
- {
- source: '0',
- target: '4',
- },
- {
- source: '0',
- target: '5',
- },
- {
- source: '0',
- target: '6',
- },
- {
- source: '0',
- target: '7',
- },
- {
- source: '0',
- target: '8',
- },
- {
- source: '0',
- target: '9',
- },
- ],
- };
-
- const fetchData = (node) => {
- return new Promise((resolve, reject) => {
- const data = new Array(Math.ceil(Math.random() * 10) + 2).fill('').map((_, i) => i + 1);
- setTimeout(() => {
- resolve({
- nodes: [
- {
- ...node,
- },
- ].concat(
- data.map((i) => {
- return {
- id: `${node.id}-${i}`,
- label: `${node.label}-${i}`,
- };
- }),
- ),
- edges: data.map((i) => {
- return {
- source: node.id,
- target: `${node.id}-${i}`,
- };
- }),
- });
- }, 1000);
- });
- };
-
- const asyncData = async (node) => {
- return await fetchData(node);
- };
-
- const config = {
- data: RadialData,
- autoFit: false,
- layout: {
- unitRadius: 80,
- /** 节点直径 */
- nodeSize: 20,
- /** 节点间距 */
- nodeSpacing: 10,
- },
- nodeCfg: {
- asyncData,
- size: 20,
- style: {
- fill: '#6CE8DC',
- stroke: '#6CE8DC',
- },
- labelCfg: {
- style: {
- fontSize: 5,
- fill: '#000',
- },
- },
- },
- menuCfg: {
- customContent: (e) => {
- return (
-
-
-
- );
- },
- },
- edgeCfg: {
- style: {
- lineWidth: 1,
- },
- endArrow: {
- d: 10,
- size: 2,
- },
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- onReady: (graph) => {
- chartRef.current = graph;
- },
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/radial-graph/demo/meta.json b/site/examples/relation-graph/radial-graph/demo/meta.json
deleted file mode 100644
index 903e6234b..000000000
--- a/site/examples/relation-graph/radial-graph/demo/meta.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "辐射图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/LvOmM0I5dZ/explore.gif"
- }
- ]
-}
diff --git a/site/examples/relation-graph/radial-graph/index.en.md b/site/examples/relation-graph/radial-graph/index.en.md
deleted file mode 100644
index 00d16afe6..000000000
--- a/site/examples/relation-graph/radial-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Radial Graph
-order: 4
----
diff --git a/site/examples/relation-graph/radial-graph/index.zh.md b/site/examples/relation-graph/radial-graph/index.zh.md
deleted file mode 100644
index 06b4d2274..000000000
--- a/site/examples/relation-graph/radial-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 辐射图
-order: 4
----
diff --git a/site/examples/relation-graph/radial-tree-graph/API.en.md b/site/examples/relation-graph/radial-tree-graph/API.en.md
deleted file mode 100644
index 2573d7e7d..000000000
--- a/site/examples/relation-graph/radial-tree-graph/API.en.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/radial-tree-graph/API.zh.md b/site/examples/relation-graph/radial-tree-graph/API.zh.md
deleted file mode 100644
index 938048a7b..000000000
--- a/site/examples/relation-graph/radial-tree-graph/API.zh.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/site/examples/relation-graph/radial-tree-graph/demo/basic.js b/site/examples/relation-graph/radial-tree-graph/demo/basic.js
deleted file mode 100644
index 3a9ba9092..000000000
--- a/site/examples/relation-graph/radial-tree-graph/demo/basic.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { RadialTreeGraph } from '@ant-design/graphs';
-
-const DemoRadialTreeGraph = () => {
- const data = {
- id: 'Modeling Methods',
- children: [
- {
- id: 'Classification',
- children: [
- { id: 'Logistic regression', value: 'Logistic regression' },
- { id: 'Linear discriminant analysis', value: 'Linear discriminant analysis' },
- { id: 'Rules', value: 'Rules' },
- { id: 'Decision trees', value: 'Decision trees' },
- { id: 'Naive Bayes', value: 'Naive Bayes' },
- { id: 'K nearest neighbor', value: 'K nearest neighbor' },
- { id: 'Probabilistic neural network', value: 'Probabilistic neural network' },
- { id: 'Support vector machine', value: 'Support vector machine' },
- ],
- value: 'Classification',
- },
- {
- id: 'Consensus',
- children: [
- {
- id: 'Models diversity',
- children: [
- { id: 'Different initializations', value: 'Different initializations' },
- { id: 'Different parameter choices', value: 'Different parameter choices' },
- { id: 'Different architectures', value: 'Different architectures' },
- { id: 'Different modeling methods', value: 'Different modeling methods' },
- { id: 'Different training sets', value: 'Different training sets' },
- { id: 'Different feature sets', value: 'Different feature sets' },
- ],
- value: 'Models diversity',
- },
- {
- id: 'Methods',
- children: [
- { id: 'Classifier selection', value: 'Classifier selection' },
- { id: 'Classifier fusion', value: 'Classifier fusion' },
- ],
- value: 'Methods',
- },
- {
- id: 'Common',
- children: [
- { id: 'Bagging', value: 'Bagging' },
- { id: 'Boosting', value: 'Boosting' },
- { id: 'AdaBoost', value: 'AdaBoost' },
- ],
- value: 'Common',
- },
- ],
- value: 'Consensus',
- },
- {
- id: 'Regression',
- children: [
- { id: 'Multiple linear regression', value: 'Multiple linear regression' },
- { id: 'Partial least squares', value: 'Partial least squares' },
- {
- id: 'Multi-layer feedforward neural network',
- value: 'Multi-layer feedforward neural network',
- },
- { id: 'General regression neural network', value: 'General regression neural network' },
- { id: 'Support vector regression', value: 'Support vector regression' },
- ],
- value: 'Regression',
- },
- ],
- value: 'Modeling Methods',
- };
-
- const config = {
- data,
- nodeCfg: {
- type: 'diamond',
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/radial-tree-graph/demo/layout.js b/site/examples/relation-graph/radial-tree-graph/demo/layout.js
deleted file mode 100644
index 18c459a5c..000000000
--- a/site/examples/relation-graph/radial-tree-graph/demo/layout.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { RadialTreeGraph } from '@ant-design/graphs';
-
-const DemoRadialTreeGraph = () => {
- const data = {
- id: 'Modeling Methods',
- children: [
- {
- id: 'Classification',
- children: [
- { id: 'Logistic regression', value: 'Logistic regression' },
- { id: 'Linear discriminant analysis', value: 'Linear discriminant analysis' },
- { id: 'Rules', value: 'Rules' },
- { id: 'Decision trees', value: 'Decision trees' },
- { id: 'Naive Bayes', value: 'Naive Bayes' },
- { id: 'K nearest neighbor', value: 'K nearest neighbor' },
- { id: 'Probabilistic neural network', value: 'Probabilistic neural network' },
- { id: 'Support vector machine', value: 'Support vector machine' },
- ],
- value: 'Classification',
- },
- {
- id: 'Consensus',
- children: [
- {
- id: 'Models diversity',
- children: [
- { id: 'Different initializations', value: 'Different initializations' },
- { id: 'Different parameter choices', value: 'Different parameter choices' },
- { id: 'Different architectures', value: 'Different architectures' },
- { id: 'Different modeling methods', value: 'Different modeling methods' },
- { id: 'Different training sets', value: 'Different training sets' },
- { id: 'Different feature sets', value: 'Different feature sets' },
- ],
- value: 'Models diversity',
- },
- {
- id: 'Methods',
- children: [
- { id: 'Classifier selection', value: 'Classifier selection' },
- { id: 'Classifier fusion', value: 'Classifier fusion' },
- ],
- value: 'Methods',
- },
- {
- id: 'Common',
- children: [
- { id: 'Bagging', value: 'Bagging' },
- { id: 'Boosting', value: 'Boosting' },
- { id: 'AdaBoost', value: 'AdaBoost' },
- ],
- value: 'Common',
- },
- ],
- value: 'Consensus',
- },
- {
- id: 'Regression',
- children: [
- { id: 'Multiple linear regression', value: 'Multiple linear regression' },
- { id: 'Partial least squares', value: 'Partial least squares' },
- {
- id: 'Multi-layer feedforward neural network',
- value: 'Multi-layer feedforward neural network',
- },
- { id: 'General regression neural network', value: 'General regression neural network' },
- { id: 'Support vector regression', value: 'Support vector regression' },
- ],
- value: 'Regression',
- },
- ],
- value: 'Modeling Methods',
- };
-
- const config = {
- data,
- nodeCfg: {
- type: 'diamond',
- },
- layout: {
- type: 'compactBox',
- direction: 'RL',
- getId: function getId(d) {
- return d.id;
- },
- getHeight: () => {
- return 26;
- },
- getWidth: () => {
- return 26;
- },
- getVGap: () => {
- return 20;
- },
- getHGap: () => {
- return 30;
- },
- radial: true,
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/radial-tree-graph/demo/meta.json b/site/examples/relation-graph/radial-tree-graph/demo/meta.json
deleted file mode 100644
index ee632caf5..000000000
--- a/site/examples/relation-graph/radial-tree-graph/demo/meta.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "title": {
- "zh": "中文分类",
- "en": "Category"
- },
- "demos": [
- {
- "filename": "basic.js",
- "title": {
- "zh": "辐射树图",
- "en": "Basic"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lXkLSzbqST/c58f6a93-e4de-478b-93c2-4c1fc1471fbd.png"
- },
- {
- "filename": "layout.js",
- "title": {
- "zh": "辐射树图-调整布局",
- "en": "Layout"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%242j6oyybYK/46bf0b8d-9d34-4fbe-a9bb-1580346f7f1b.png"
- },
- {
- "filename": "style.js",
- "title": {
- "zh": "辐射树图-格式化设置",
- "en": "Style"
- },
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tCykDJncjJ/2200d0c0-40bd-46a8-a885-30393fb165b1.png"
- }
- ]
-}
diff --git a/site/examples/relation-graph/radial-tree-graph/demo/style.js b/site/examples/relation-graph/radial-tree-graph/demo/style.js
deleted file mode 100644
index 75c425bfe..000000000
--- a/site/examples/relation-graph/radial-tree-graph/demo/style.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { RadialTreeGraph } from '@ant-design/graphs';
-
-const DemoRadialTreeGraph = () => {
- const data = {
- id: 'Modeling Methods',
- children: [
- {
- id: 'Classification',
- children: [
- { id: 'Logistic regression', value: 'Logistic regression' },
- {
- id: 'Linear discriminant analysis',
- value: 'Linear discriminant analysis',
- },
- { id: 'Rules', value: 'Rules' },
- { id: 'Decision trees', value: 'Decision trees' },
- { id: 'Naive Bayes', value: 'Naive Bayes' },
- { id: 'K nearest neighbor', value: 'K nearest neighbor' },
- {
- id: 'Probabilistic neural network',
- value: 'Probabilistic neural network',
- },
- { id: 'Support vector machine', value: 'Support vector machine' },
- ],
- value: 'Classification',
- },
- {
- id: 'Consensus',
- children: [
- {
- id: 'Models diversity',
- children: [
- {
- id: 'Different initializations',
- value: 'Different initializations',
- },
- {
- id: 'Different parameter choices',
- value: 'Different parameter choices',
- },
- {
- id: 'Different architectures',
- value: 'Different architectures',
- },
- {
- id: 'Different modeling methods',
- value: 'Different modeling methods',
- },
- {
- id: 'Different training sets',
- value: 'Different training sets',
- },
- { id: 'Different feature sets', value: 'Different feature sets' },
- ],
- value: 'Models diversity',
- },
- {
- id: 'Methods',
- children: [
- { id: 'Classifier selection', value: 'Classifier selection' },
- { id: 'Classifier fusion', value: 'Classifier fusion' },
- ],
- value: 'Methods',
- },
- {
- id: 'Common',
- children: [
- { id: 'Bagging', value: 'Bagging' },
- { id: 'Boosting', value: 'Boosting' },
- { id: 'AdaBoost', value: 'AdaBoost' },
- ],
- value: 'Common',
- },
- ],
- value: 'Consensus',
- },
- {
- id: 'Regression',
- children: [
- {
- id: 'Multiple linear regression',
- value: 'Multiple linear regression',
- },
- { id: 'Partial least squares', value: 'Partial least squares' },
- {
- id: 'Multi-layer feedforward neural network',
- value: 'Multi-layer feedforward neural network',
- },
- {
- id: 'General regression neural network',
- value: 'General regression neural network',
- },
- {
- id: 'Support vector regression',
- value: 'Support vector regression',
- },
- ],
- value: 'Regression',
- },
- ],
- value: 'Modeling Methods',
- };
- const themeColor = '#73B3D1';
- const config = {
- data,
- nodeCfg: {
- size: 30,
- type: 'circle',
- label: {
- style: {
- fill: '#fff',
- },
- },
- style: {
- fill: themeColor,
- stroke: '#0E1155',
- lineWidth: 2,
- strokeOpacity: 0.45,
- shadowColor: themeColor,
- shadowBlur: 25,
- },
- nodeStateStyles: {
- hover: {
- stroke: themeColor,
- lineWidth: 2,
- strokeOpacity: 1,
- },
- },
- },
- edgeCfg: {
- style: {
- stroke: themeColor,
- shadowColor: themeColor,
- shadowBlur: 20,
- },
- endArrow: {
- type: 'triangle',
- fill: themeColor,
- d: 15,
- size: 8,
- },
- edgeStateStyles: {
- hover: {
- stroke: themeColor,
- lineWidth: 2,
- },
- },
- },
- behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
- };
-
- return (
-
-
-
- );
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/relation-graph/radial-tree-graph/index.en.md b/site/examples/relation-graph/radial-tree-graph/index.en.md
deleted file mode 100644
index 5f34626db..000000000
--- a/site/examples/relation-graph/radial-tree-graph/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Radial Tree Graph
-order: 5
----
diff --git a/site/examples/relation-graph/radial-tree-graph/index.zh.md b/site/examples/relation-graph/radial-tree-graph/index.zh.md
deleted file mode 100644
index 07f5a3c62..000000000
--- a/site/examples/relation-graph/radial-tree-graph/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 辐射树图
-order: 5
----
diff --git a/site/package.json b/site/package.json
index 08bb7173c..742683553 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,7 +1,7 @@
{
"private": true,
"name": "@ant-design/charts-site",
- "version": "0.0.1-beta.4",
+ "version": "2.0.0-alpha.0",
"description": "React Visual component library",
"keywords": [
"antv",
@@ -44,7 +44,6 @@
"@ant-design/maps": "^1.0.1",
"@ant-design/plots": "^2.0.0-alpha.0",
"@antv/data-set": "^0.11.8",
- "@antv/util": "^2.0.9",
"antd": "^4.16.13",
"insert-css": "^2.0.0",
"react": "^16.14.0",
diff --git a/template/chart/index.ejs b/template/chart/index.ejs
index 6c2975c75..0fe012b42 100644
--- a/template/chart/index.ejs
+++ b/template/chart/index.ejs
@@ -1,40 +1,42 @@
-import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
-import { <%= chartName %> as G2plot<%= chartName %>, <%= chartName %>Options as G2plotConfig } from '@antv/g2plot';
-import useChart from '../hooks/useChart';
-import { getChart } from '../util';
-import { ChartRefConfig, ContainerConfig } from '../interface';
-import { ErrorBoundary } from '../base';
-import ChartLoading from '../util/createLoading';
+import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
+import { <%= chartName %> as G2plot<%= chartName %>, <%= chartName %>Options as G2plotConfig } from '@antv/g2';
+ import useChart from '../hooks/useChart';
+ import { getChart } from '../util';
+ import { ChartRefConfig, ContainerConfig } from '../interface';
+ import { ErrorBoundary } from '../base';
+ import ChartLoading from '../util/createLoading';
-export interface <%= chartName %>Config extends G2plotConfig, ContainerConfig {
- chartRef?: ChartRefConfig;
-}
+ export interface <%= chartName %>Config extends G2plotConfig, ContainerConfig {
+ chartRef?: ChartRefConfig;
+ }
-const <%= chartName %>Chart = forwardRef((props: <%= chartName %>Config, ref) => {
- const {
- chartRef,
- style = {
- height: 'inherit'
- },
- className,
- loading,
- loadingTemplate,
- errorTemplate,
- ...rest
- } = props;
- const { chart, container } = useChart, <%= chartName %>Config>(G2plot<%= chartName %>, rest);
- useEffect(() => {
- getChart(chartRef, chart.current);
- }, [chart.current]);
- useImperativeHandle(ref, () => ({
- getChart: () => chart.current,
- }));
- return (
-
- {loading && }
-
-
- );
-});
+ const <%= chartName %>Chart = forwardRef((props: <%= chartName %>Config, ref) => {
+ const {
+ chartRef,
+ style = {
+ height: 'inherit'
+ },
+ className,
+ loading,
+ loadingTemplate,
+ errorTemplate,
+ ...rest
+ } = props;
+ const { chart, container } = useChart, <%= chartName %>Config>(G2plot<%= chartName
+ %>, rest);
+ useEffect(() => {
+ getChart(chartRef, chart.current);
+ }, [chart.current]);
+ useImperativeHandle(ref, () => ({
+ getChart: () => chart.current,
+ }));
+ return (
+
+ {loading &&
+ }
+
+
+ );
+ });
-export default <%= chartName %>Chart;
\ No newline at end of file
+ export default <%= chartName %>Chart;
\ No newline at end of file
diff --git a/template/doc/demo.ejs b/template/doc/demo.ejs
index 672427ab8..7e6097f25 100644
--- a/template/doc/demo.ejs
+++ b/template/doc/demo.ejs
@@ -2,7 +2,7 @@ import React, { useState, useEffect }from 'react';
import ReactDOM from 'react-dom';
import { <%= plotName %> } from '@ant-design/<%= lib %>';
<% if (utilName) { %>
-import { <%= utilName %> } from '@antv/util';
+import { <%= utilName %> } from 'lodash-es';
<% } %>
<% if (dataSet) { %>
import { <%= dataSet %> } from '@antv/data-set';
From 7693a30b955cb90d1ac3044553ce7f0f4688765f Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Fri, 11 Aug 2023 17:51:11 +0800
Subject: [PATCH 004/268] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=842.0=E6=9E=B6?=
=?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/plots/src/components/base/index.tsx | 6 +-
.../plots/src/components/column/index.tsx | 2 +-
packages/plots/src/components/index.ts | 3 +-
packages/plots/src/components/line/index.tsx | 2 +-
packages/plots/src/components/pie/index.tsx | 10 +++
.../core/plot.ts => core/base/index.ts} | 5 +-
.../src/{g2-core => core}/components/index.ts | 0
.../src/{g2-core => core}/components/mark.ts | 0
packages/plots/src/core/constants/index.ts | 81 +++++++++++++++++++
packages/plots/src/{g2-core => core}/index.ts | 4 +-
.../plots/src/{g2-core => core}/module.d.ts | 0
.../{g2-core => core}/plots/column/adaptor.ts | 4 +-
.../{g2-core => core}/plots/column/index.ts | 4 +-
.../{g2-core => core}/plots/column/type.ts | 0
.../{g2-core => core}/plots/line/adaptor.ts | 4 +-
.../src/{g2-core => core}/plots/line/index.ts | 4 +-
.../src/{g2-core => core}/plots/line/type.ts | 0
packages/plots/src/core/plots/pie/adaptor.ts | 21 +++++
packages/plots/src/core/plots/pie/index.ts | 37 +++++++++
packages/plots/src/core/plots/pie/type.ts | 3 +
packages/plots/src/core/types/common.ts | 27 +++++++
.../src/{g2-core => core}/types/index.ts | 0
packages/plots/src/core/utils/index.ts | 3 +
.../utils/is-composite-plot.ts | 0
packages/plots/src/core/utils/transform.ts | 69 ++++++++++++++++
packages/plots/src/g2-core/types/common.ts | 10 ---
packages/plots/src/g2-core/utils/index.ts | 2 -
packages/plots/src/interface.ts | 8 +-
site/.dumirc.ts | 8 ++
site/examples/column/basic/demo/basic.js | 12 ++-
site/examples/line/basic/demo/basic.js | 47 ++++++++---
.../examples/line/basic/demo/connect-nulls.js | 52 ++++++++++++
site/examples/line/basic/demo/meta.json | 16 ++++
site/examples/line/basic/demo/multi.js | 19 +++++
site/examples/pie/basic/API.en.md | 1 +
site/examples/pie/basic/API.zh.md | 1 +
site/examples/pie/basic/demo/basic.js | 21 +++++
site/examples/pie/basic/demo/meta.json | 16 ++++
site/examples/pie/basic/design.en.md | 29 +++++++
site/examples/pie/basic/design.zh.md | 29 +++++++
site/examples/pie/basic/index.en.md | 4 +
site/examples/pie/basic/index.zh.md | 6 ++
42 files changed, 516 insertions(+), 54 deletions(-)
create mode 100644 packages/plots/src/components/pie/index.tsx
rename packages/plots/src/{g2-core/core/plot.ts => core/base/index.ts} (97%)
rename packages/plots/src/{g2-core => core}/components/index.ts (100%)
rename packages/plots/src/{g2-core => core}/components/mark.ts (100%)
create mode 100644 packages/plots/src/core/constants/index.ts
rename packages/plots/src/{g2-core => core}/index.ts (65%)
rename packages/plots/src/{g2-core => core}/module.d.ts (100%)
rename packages/plots/src/{g2-core => core}/plots/column/adaptor.ts (76%)
rename packages/plots/src/{g2-core => core}/plots/column/index.ts (86%)
rename packages/plots/src/{g2-core => core}/plots/column/type.ts (100%)
rename packages/plots/src/{g2-core => core}/plots/line/adaptor.ts (76%)
rename packages/plots/src/{g2-core => core}/plots/line/index.ts (87%)
rename packages/plots/src/{g2-core => core}/plots/line/type.ts (100%)
create mode 100644 packages/plots/src/core/plots/pie/adaptor.ts
create mode 100644 packages/plots/src/core/plots/pie/index.ts
create mode 100644 packages/plots/src/core/plots/pie/type.ts
create mode 100644 packages/plots/src/core/types/common.ts
rename packages/plots/src/{g2-core => core}/types/index.ts (100%)
create mode 100644 packages/plots/src/core/utils/index.ts
rename packages/plots/src/{g2-core => core}/utils/is-composite-plot.ts (100%)
create mode 100644 packages/plots/src/core/utils/transform.ts
delete mode 100644 packages/plots/src/g2-core/types/common.ts
delete mode 100644 packages/plots/src/g2-core/utils/index.ts
create mode 100644 site/examples/line/basic/demo/connect-nulls.js
create mode 100644 site/examples/line/basic/demo/multi.js
create mode 100644 site/examples/pie/basic/API.en.md
create mode 100644 site/examples/pie/basic/API.zh.md
create mode 100644 site/examples/pie/basic/demo/basic.js
create mode 100644 site/examples/pie/basic/demo/meta.json
create mode 100644 site/examples/pie/basic/design.en.md
create mode 100644 site/examples/pie/basic/design.zh.md
create mode 100644 site/examples/pie/basic/index.en.md
create mode 100644 site/examples/pie/basic/index.zh.md
diff --git a/packages/plots/src/components/base/index.tsx b/packages/plots/src/components/base/index.tsx
index 23cff9c03..6f83d13b0 100644
--- a/packages/plots/src/components/base/index.tsx
+++ b/packages/plots/src/components/base/index.tsx
@@ -1,12 +1,12 @@
import React, { useImperativeHandle, forwardRef } from 'react';
import { ErrorBoundary, ChartLoading } from 'rc-utils';
import useChart from '../../hooks/useChart';
-import { Plots } from '../../g2-core';
+import { Plots } from '../../core';
import { CommonConfig, Chart } from '../../interface';
export const BaseChart: React.FC = forwardRef(({ chartType, ...config }: CommonConfig, ref) => {
const {
- style = {
+ containerStyle = {
height: 'inherit',
},
className,
@@ -23,7 +23,7 @@ export const BaseChart: React.FC = forwardRef(({ chartType, ...config }: Co
return (
{loading && }
-
+
);
});
diff --git a/packages/plots/src/components/column/index.tsx b/packages/plots/src/components/column/index.tsx
index 065768a9e..7b771203a 100644
--- a/packages/plots/src/components/column/index.tsx
+++ b/packages/plots/src/components/column/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ColumnOptions } from '../../g2-core';
+import { ColumnOptions } from '../../core';
import { CommonConfig } from '../../interface';
import { BaseChart } from '../base';
diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts
index 47b963d2a..073343e06 100644
--- a/packages/plots/src/components/index.ts
+++ b/packages/plots/src/components/index.ts
@@ -1,4 +1,5 @@
import Column from './column';
import Line from './line';
+import Pie from './pie';
-export { Column, Line };
+export { Column, Line, Pie };
diff --git a/packages/plots/src/components/line/index.tsx b/packages/plots/src/components/line/index.tsx
index dc7b54338..dc8844c4b 100644
--- a/packages/plots/src/components/line/index.tsx
+++ b/packages/plots/src/components/line/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { LineOptions } from '../../g2-core';
+import { LineOptions } from '../../core';
import { CommonConfig } from '../../interface';
import { BaseChart } from '../base';
diff --git a/packages/plots/src/components/pie/index.tsx b/packages/plots/src/components/pie/index.tsx
new file mode 100644
index 000000000..672596f91
--- /dev/null
+++ b/packages/plots/src/components/pie/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { PieOptions } from '../../core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type PieConfig = CommonConfig;
+
+const PieChart = (props: PieConfig) => ;
+
+export default PieChart;
diff --git a/packages/plots/src/g2-core/core/plot.ts b/packages/plots/src/core/base/index.ts
similarity index 97%
rename from packages/plots/src/g2-core/core/plot.ts
rename to packages/plots/src/core/base/index.ts
index 1d16ec4d0..ba9c1606c 100644
--- a/packages/plots/src/g2-core/core/plot.ts
+++ b/packages/plots/src/core/base/index.ts
@@ -26,7 +26,6 @@ export abstract class Plot extends EE {
this.container = typeof container === 'string' ? document.getElementById(container) : container;
this.options = merge({}, this.getBaseOptions(), this.getDefaultOptions(), options);
this.createG2();
- this.render();
this.bindEvents();
}
@@ -62,7 +61,7 @@ export abstract class Plot extends EE {
}
this.chart = new Chart(this.getChartOptions());
// 给容器增加标识，知道图表的来源区别于 G2
- this.container.setAttribute(SOURCE_ATTRIBUTE_NAME, 'G2Plot');
+ this.container.setAttribute(SOURCE_ATTRIBUTE_NAME, 'Ant Design Charts');
}
/**
@@ -164,7 +163,7 @@ export abstract class Plot extends EE {
// 转化成 G2 Spec
adaptor({
chart: this.chart,
- options: this.options,
+ options: omit(this.options, CHART_OPTIONS),
});
}
diff --git a/packages/plots/src/g2-core/components/index.ts b/packages/plots/src/core/components/index.ts
similarity index 100%
rename from packages/plots/src/g2-core/components/index.ts
rename to packages/plots/src/core/components/index.ts
diff --git a/packages/plots/src/g2-core/components/mark.ts b/packages/plots/src/core/components/mark.ts
similarity index 100%
rename from packages/plots/src/g2-core/components/mark.ts
rename to packages/plots/src/core/components/mark.ts
diff --git a/packages/plots/src/core/constants/index.ts b/packages/plots/src/core/constants/index.ts
new file mode 100644
index 000000000..afa564da0
--- /dev/null
+++ b/packages/plots/src/core/constants/index.ts
@@ -0,0 +1,81 @@
+import { isBoolean } from '../utils';
+/**
+ * @title 字段转换逻辑
+ * @example
+ * 1. xField: 'year' -> encode: {x: 'year'}
+ * 2. yField: 'scales' -> encode: {y: 'scales'}
+ * 3. shape: 'smooth' -> style: {shape: 'smooth'}
+ * 4. connectNulls: {connect: true} -> style: {connect: true}
+ */
+export const TRANSFORM_OPTION_KEY = {
+ encode: {
+ xField: 'x',
+ yField: 'y',
+ colorField: 'color',
+ angleField: 'y',
+ },
+ transform: {
+ /**
+ * @title 是否堆叠
+ * @example
+ * 1. stack: true -> transform: [{type: 'stackY'}]
+ */
+ stack: (value: boolean | object) => {
+ if (isBoolean(value)) {
+ return {
+ type: 'stackY',
+ available: value,
+ };
+ }
+ return value;
+ },
+ },
+ style: {
+ /**
+ * @title 折线的形状
+ * @example
+ * 1. shape: 'smooth' -> style: {shape: 'smooth'}
+ */
+ shape: 'shape',
+ /**
+ * @title 是否链接空值
+ * @description 支持 boolean 和 对象类型
+ */
+ connectNulls: (value: boolean | object) => {
+ if (isBoolean(value)) {
+ return {
+ connect: value,
+ };
+ }
+ return value;
+ },
+ },
+};
+
+/**
+ * @title 将 CHILDREN_SHAPE 中的配置项, 转换为 children
+ * @example
+ * 1. annotations: [{type: 'text'}] -> children: [{type: 'text'}]
+ */
+export const CHILDREN_SHAPE = ['annotations'];
+
+/**
+ * @description 一些特殊的配置项，需要自定义转换逻辑
+ */
+export const SPECIAL_OPTIONS = [
+ {
+ key: 'transform',
+ callback: (origin: object, key: string, value: { type: string; available?: boolean }) => {
+ origin[key] = origin[key] || [];
+ const { available = true } = value;
+ if (available) {
+ origin[key].push(value);
+ } else {
+ origin[key].splice(
+ origin[key].indexOf((item) => item.type === value.type),
+ 1,
+ );
+ }
+ },
+ },
+];
diff --git a/packages/plots/src/g2-core/index.ts b/packages/plots/src/core/index.ts
similarity index 65%
rename from packages/plots/src/g2-core/index.ts
rename to packages/plots/src/core/index.ts
index cbc2c82ff..d04d1c6b7 100644
--- a/packages/plots/src/g2-core/index.ts
+++ b/packages/plots/src/core/index.ts
@@ -4,8 +4,10 @@ export * from './types';
import { Line } from './plots/line';
import { Column } from './plots/column';
+import { Pie } from './plots/pie';
export type { LineOptions } from './plots/line';
export type { ColumnOptions } from './plots/column';
+export type { PieOptions } from './plots/pie';
-export const Plots = { Line, Column };
+export const Plots = { Line, Column, Pie };
diff --git a/packages/plots/src/g2-core/module.d.ts b/packages/plots/src/core/module.d.ts
similarity index 100%
rename from packages/plots/src/g2-core/module.d.ts
rename to packages/plots/src/core/module.d.ts
diff --git a/packages/plots/src/g2-core/plots/column/adaptor.ts b/packages/plots/src/core/plots/column/adaptor.ts
similarity index 76%
rename from packages/plots/src/g2-core/plots/column/adaptor.ts
rename to packages/plots/src/core/plots/column/adaptor.ts
index 28a3427bb..fb0b3ae2d 100644
--- a/packages/plots/src/g2-core/plots/column/adaptor.ts
+++ b/packages/plots/src/core/plots/column/adaptor.ts
@@ -1,4 +1,4 @@
-import { flow } from '../../utils';
+import { flow, transformOptions } from '../../utils';
import { mark } from '../../components';
import type { Adaptor } from '../../types';
import type { ColumnOptions } from './type';
@@ -17,5 +17,5 @@ export function adaptor(params: Params) {
return params;
};
- return flow(init, mark)(params);
+ return flow(init, transformOptions, mark)(params);
}
diff --git a/packages/plots/src/g2-core/plots/column/index.ts b/packages/plots/src/core/plots/column/index.ts
similarity index 86%
rename from packages/plots/src/g2-core/plots/column/index.ts
rename to packages/plots/src/core/plots/column/index.ts
index a86ac6496..3d03b4000 100644
--- a/packages/plots/src/g2-core/plots/column/index.ts
+++ b/packages/plots/src/core/plots/column/index.ts
@@ -1,4 +1,4 @@
-import { Plot } from '../../core/plot';
+import { Plot } from '../../base';
import type { Adaptor } from '../../types';
import { adaptor } from './adaptor';
import { ColumnOptions } from './type';
@@ -14,7 +14,7 @@ export class Column extends Plot {
* 供外部使用
*/
static getDefaultOptions(): Partial {
- return { type: 'interval' };
+ return { type: 'view', children: [{ type: 'interval' }] };
}
/**
diff --git a/packages/plots/src/g2-core/plots/column/type.ts b/packages/plots/src/core/plots/column/type.ts
similarity index 100%
rename from packages/plots/src/g2-core/plots/column/type.ts
rename to packages/plots/src/core/plots/column/type.ts
diff --git a/packages/plots/src/g2-core/plots/line/adaptor.ts b/packages/plots/src/core/plots/line/adaptor.ts
similarity index 76%
rename from packages/plots/src/g2-core/plots/line/adaptor.ts
rename to packages/plots/src/core/plots/line/adaptor.ts
index 1dfed8bc8..0d95bbed1 100644
--- a/packages/plots/src/g2-core/plots/line/adaptor.ts
+++ b/packages/plots/src/core/plots/line/adaptor.ts
@@ -1,4 +1,4 @@
-import { flow } from '../../utils';
+import { flow, transformOptions } from '../../utils';
import { mark } from '../../components';
import type { Adaptor } from '../../types';
import type { LineOptions } from './type';
@@ -17,5 +17,5 @@ export function adaptor(params: Params) {
return params;
};
- return flow(init, mark)(params);
+ return flow(init, transformOptions, mark)(params);
}
diff --git a/packages/plots/src/g2-core/plots/line/index.ts b/packages/plots/src/core/plots/line/index.ts
similarity index 87%
rename from packages/plots/src/g2-core/plots/line/index.ts
rename to packages/plots/src/core/plots/line/index.ts
index 8a65b1fd8..6f5b67e4a 100644
--- a/packages/plots/src/g2-core/plots/line/index.ts
+++ b/packages/plots/src/core/plots/line/index.ts
@@ -1,4 +1,4 @@
-import { Plot } from '../../core/plot';
+import { Plot } from '../../base';
import type { Adaptor } from '../../types';
import { adaptor } from './adaptor';
import { LineOptions } from './type';
@@ -14,7 +14,7 @@ export class Line extends Plot {
* 供外部使用
*/
static getDefaultOptions(): Partial {
- return { type: 'line' };
+ return { type: 'view', children: [{ type: 'line' }] };
}
/**
diff --git a/packages/plots/src/g2-core/plots/line/type.ts b/packages/plots/src/core/plots/line/type.ts
similarity index 100%
rename from packages/plots/src/g2-core/plots/line/type.ts
rename to packages/plots/src/core/plots/line/type.ts
diff --git a/packages/plots/src/core/plots/pie/adaptor.ts b/packages/plots/src/core/plots/pie/adaptor.ts
new file mode 100644
index 000000000..c0d8f7857
--- /dev/null
+++ b/packages/plots/src/core/plots/pie/adaptor.ts
@@ -0,0 +1,21 @@
+import { flow, transformOptions } from '../../utils';
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import type { PieOptions } from './type';
+
+type Params = Adaptor;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+ /**
+ * 图表差异化处理
+ */
+ const init = (params: Params) => {
+ return params;
+ };
+
+ return flow(init, transformOptions, mark)(params);
+}
diff --git a/packages/plots/src/core/plots/pie/index.ts b/packages/plots/src/core/plots/pie/index.ts
new file mode 100644
index 000000000..0f25695f3
--- /dev/null
+++ b/packages/plots/src/core/plots/pie/index.ts
@@ -0,0 +1,37 @@
+import { Plot } from '../../base';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { PieOptions } from './type';
+
+export type { PieOptions };
+
+export class Pie extends Plot {
+ /** 图表类型 */
+ public type = 'pie';
+
+ /**
+ * 获取 饼图 默认配置项
+ * 供外部使用
+ */
+ static getDefaultOptions(): Partial {
+ return {
+ children: [{ type: 'interval' }],
+ transform: [{ type: 'stackY' }],
+ coordinate: { type: 'theta' },
+ };
+ }
+
+ /**
+ * 获取 折线图 默认配置
+ */
+ protected getDefaultOptions() {
+ return Pie.getDefaultOptions();
+ }
+
+ /**
+ * 折线图适配器
+ */
+ protected getSchemaAdaptor(): (params: Adaptor) => void {
+ return adaptor;
+ }
+}
diff --git a/packages/plots/src/core/plots/pie/type.ts b/packages/plots/src/core/plots/pie/type.ts
new file mode 100644
index 000000000..89e02a8bd
--- /dev/null
+++ b/packages/plots/src/core/plots/pie/type.ts
@@ -0,0 +1,3 @@
+import type { Options } from '../../types/common';
+
+export type PieOptions = Options;
diff --git a/packages/plots/src/core/types/common.ts b/packages/plots/src/core/types/common.ts
new file mode 100644
index 000000000..dd737a037
--- /dev/null
+++ b/packages/plots/src/core/types/common.ts
@@ -0,0 +1,27 @@
+import type { Chart, G2Spec } from '@antv/g2';
+
+export type Options = G2Spec &
+ AppendOptions & {
+ [key: string]: any;
+ };
+
+export type Adaptor = {
+ chart: Chart;
+ options: P;
+ originOptions?: P;
+};
+
+export type AppendOptions = {
+ /**
+ * @title x轴字段
+ */
+ readonly xField: string;
+ /**
+ * @title y轴字段
+ */
+ readonly yField: string;
+ /**
+ * @title 拆分字段
+ */
+ readonly colorField?: string;
+};
diff --git a/packages/plots/src/g2-core/types/index.ts b/packages/plots/src/core/types/index.ts
similarity index 100%
rename from packages/plots/src/g2-core/types/index.ts
rename to packages/plots/src/core/types/index.ts
diff --git a/packages/plots/src/core/utils/index.ts b/packages/plots/src/core/utils/index.ts
new file mode 100644
index 000000000..8af5c87ef
--- /dev/null
+++ b/packages/plots/src/core/utils/index.ts
@@ -0,0 +1,3 @@
+export { omit, pick, isArray, flatten, flow, merge, isBoolean } from 'lodash-es';
+export { isCompositePlot } from './is-composite-plot';
+export { transformOptions } from './transform';
diff --git a/packages/plots/src/g2-core/utils/is-composite-plot.ts b/packages/plots/src/core/utils/is-composite-plot.ts
similarity index 100%
rename from packages/plots/src/g2-core/utils/is-composite-plot.ts
rename to packages/plots/src/core/utils/is-composite-plot.ts
diff --git a/packages/plots/src/core/utils/transform.ts b/packages/plots/src/core/utils/transform.ts
new file mode 100644
index 000000000..50fb5b2da
--- /dev/null
+++ b/packages/plots/src/core/utils/transform.ts
@@ -0,0 +1,69 @@
+import { omit } from './index';
+import { TRANSFORM_OPTION_KEY, CHILDREN_SHAPE, SPECIAL_OPTIONS } from '../constants';
+import { Adaptor } from '../types';
+/**
+ * @title 将自定义配置转换为 G2 接受的格式
+ */
+export const transformOptions = (params: Adaptor) => {
+ const { options } = params;
+ const { children = [] } = options;
+
+ const getRest = (o: Adaptor['options']) => {
+ const { children, type, data, ...rest } = o;
+ return omit(rest, CHILDREN_SHAPE);
+ };
+
+ const rest = getRest(options);
+
+ const getValue = (newConfig: string | Function, value: unknown, origin: object) => {
+ if (typeof newConfig === 'function') {
+ return newConfig(value, origin);
+ }
+ return {
+ [newConfig]: value,
+ };
+ };
+
+ const getCustomTransform = (key: string) => {
+ return SPECIAL_OPTIONS.find((option) => option.key === key)?.callback;
+ };
+
+ children.forEach((child) => {
+ /**
+ * @description 外层配置应用到所有 children
+ */
+ const transformOption = Object.assign(child, rest);
+
+ Object.keys(TRANSFORM_OPTION_KEY).forEach((specKey) => {
+ const transformObject = TRANSFORM_OPTION_KEY[specKey];
+ /**
+ * @description 遍历配置项，如果存在对应的映射规则，则进行转换
+ * @example 详见 src/core/constants/index.ts
+ */
+ Object.keys(transformObject).forEach((key) => {
+ if (options[key]) {
+ const transformValue = getValue(transformObject[key], options[key], transformOption);
+ const callback = getCustomTransform(specKey);
+ if (callback) {
+ callback(transformOption, specKey, transformValue);
+ } else {
+ transformOption[specKey] = Object.assign(transformOption[specKey] || {}, transformValue);
+ delete options[key];
+ }
+ }
+ });
+ });
+ });
+
+ /**
+ * @description 将 CHILDREN_SHAPE 中的配置项, 转换为 children
+ * @example 详见 src/core/constants/index.ts
+ */
+ Object.keys(options).forEach((key) => {
+ if (CHILDREN_SHAPE.includes(key)) {
+ children.push(...options[key]);
+ delete options[key];
+ }
+ });
+ return params;
+};
diff --git a/packages/plots/src/g2-core/types/common.ts b/packages/plots/src/g2-core/types/common.ts
deleted file mode 100644
index 02aed368c..000000000
--- a/packages/plots/src/g2-core/types/common.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Chart, G2Spec } from '@antv/g2';
-
-export type Options = G2Spec & {
- [key: string]: any;
-};
-
-export type Adaptor
= {
- chart: Chart;
- options: P;
-};
diff --git a/packages/plots/src/g2-core/utils/index.ts b/packages/plots/src/g2-core/utils/index.ts
deleted file mode 100644
index d431bd922..000000000
--- a/packages/plots/src/g2-core/utils/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { omit, pick, isArray, flatten, flow, merge } from 'lodash-es';
-export { isCompositePlot } from './is-composite-plot';
diff --git a/packages/plots/src/interface.ts b/packages/plots/src/interface.ts
index f855b695c..31e0ea39e 100644
--- a/packages/plots/src/interface.ts
+++ b/packages/plots/src/interface.ts
@@ -1,4 +1,4 @@
-import { Options, G2Spec } from './g2-core';
+import { Options, G2Spec } from './core';
/**
* @title 图表浮窗配置
@@ -20,10 +20,10 @@ export interface ContainerConfig {
/**
* @title 图表样式
* @description 配置图表样式
- * @title.en_US Chart style
- * @description.en_US Configure chart styles
+ * @title.en_US Chart containerStyle
+ * @description.en_US Configure chart container styles
*/
- style?: React.CSSProperties;
+ containerStyle?: React.CSSProperties;
/**
* @title 容器class
* @description 类名添加
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index 13b8fdebe..ef630e189 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -85,6 +85,14 @@ export default defineConfig({
en: 'Line',
},
},
+ {
+ slug: 'pie',
+ icon: 'pie',
+ title: {
+ zh: '饼图',
+ en: 'Pie',
+ },
+ },
],
detail: {
title: {
diff --git a/site/examples/column/basic/demo/basic.js b/site/examples/column/basic/demo/basic.js
index c2a79ff71..70a91de5f 100644
--- a/site/examples/column/basic/demo/basic.js
+++ b/site/examples/column/basic/demo/basic.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';
const DemoColumn = () => {
- const props = {
+ const config = {
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
@@ -11,13 +11,11 @@ const DemoColumn = () => {
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
- encode: {
- x: 'genre',
- y: 'sold',
- color: 'genre',
- },
+ xField: 'genre',
+ yField: 'sold',
+ colorField: 'genre',
};
- return ;
+ return ;
};
ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/basic.js b/site/examples/line/basic/demo/basic.js
index 8542f8d09..6f29fb3c6 100644
--- a/site/examples/line/basic/demo/basic.js
+++ b/site/examples/line/basic/demo/basic.js
@@ -3,21 +3,42 @@ import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';
const DemoLine = () => {
- const props = {
- data: [
- { genre: 'Sports', sold: 275 },
- { genre: 'Strategy', sold: 115 },
- { genre: 'Action', sold: 120 },
- { genre: 'Shooter', sold: 350 },
- { genre: 'Other', sold: 150 },
- ],
- encode: {
- x: 'genre',
- y: 'sold',
- color: 'genre',
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json',
+ },
+ xField: 'Date',
+ yField: 'scales',
+ shape: 'smooth',
+ style: {
+ lineWidth: 2,
},
+ annotations: [
+ {
+ type: 'text',
+ data: ['2014-03', 1834],
+ style: {
+ text: '2014-03, 受比特币影响，blockchain 1834',
+ wordWrap: true,
+ wordWrapWidth: 164,
+ dx: -174,
+ dy: 30,
+ fill: '#2C3542',
+ fillOpacity: 0.65,
+ fontSize: 10,
+ background: true,
+ backgroundRadius: 2,
+ connector: true,
+ startMarker: true,
+ startMarkerFill: '#2C3542',
+ startMarkerFillOpacity: 0.65,
+ },
+ tooltip: false,
+ },
+ ],
};
- return ;
+ return ;
};
ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/connect-nulls.js b/site/examples/line/basic/demo/connect-nulls.js
new file mode 100644
index 000000000..1ceac1cb4
--- /dev/null
+++ b/site/examples/line/basic/demo/connect-nulls.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: [
+ {
+ Date: '2010-01',
+ scales: 1998,
+ },
+ {
+ Date: '2010-02',
+ scales: 1850,
+ },
+ {
+ Date: '2010-03',
+ scales: 1720,
+ },
+ {
+ Date: '2010-04',
+ scales: 1818,
+ },
+ {
+ Date: '2010-05',
+ scales: null,
+ },
+ {
+ Date: '2010-06',
+ scales: 1802,
+ },
+ {
+ Date: '2010-07',
+ scales: 1945,
+ },
+ {
+ Date: '2010-08',
+ scales: 1856,
+ },
+ ],
+ xField: 'Date',
+ yField: 'scales',
+ shape: 'smooth',
+ connectNulls: {
+ connect: true,
+ connectStroke: 'red',
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/meta.json b/site/examples/line/basic/demo/meta.json
index ba97e2b6b..1562ebf34 100644
--- a/site/examples/line/basic/demo/meta.json
+++ b/site/examples/line/basic/demo/meta.json
@@ -11,6 +11,22 @@
"en": "Basic line plot"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ },
+ {
+ "filename": "multi.js",
+ "title": {
+ "zh": "多折线图",
+ "en": "Multi line plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*IZ9nRq-a6fIAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "connect-nulls.js",
+ "title": {
+ "zh": "连接空值",
+ "en": "Connect nulls plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
}
]
}
diff --git a/site/examples/line/basic/demo/multi.js b/site/examples/line/basic/demo/multi.js
new file mode 100644
index 000000000..60b43d2ee
--- /dev/null
+++ b/site/examples/line/basic/demo/multi.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json',
+ },
+ xField: 'year',
+ yField: 'value',
+ stack: true,
+ colorField: 'category',
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/pie/basic/API.en.md b/site/examples/pie/basic/API.en.md
new file mode 100644
index 000000000..6c00eaf29
--- /dev/null
+++ b/site/examples/pie/basic/API.en.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/examples/pie/basic/API.zh.md b/site/examples/pie/basic/API.zh.md
new file mode 100644
index 000000000..ca784afc7
--- /dev/null
+++ b/site/examples/pie/basic/API.zh.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/examples/pie/basic/demo/basic.js b/site/examples/pie/basic/demo/basic.js
new file mode 100644
index 000000000..a8e223928
--- /dev/null
+++ b/site/examples/pie/basic/demo/basic.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Pie } from '@ant-design/plots';
+
+const DemoPie = () => {
+ const config = {
+ data: [
+ { type: '分类一', value: 27 },
+ { type: '分类二', value: 25 },
+ { type: '分类三', value: 18 },
+ { type: '分类四', value: 15 },
+ { type: '分类五', value: 10 },
+ { type: '其他', value: 5 },
+ ],
+ angleField: 'value',
+ colorField: 'type',
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/pie/basic/demo/meta.json b/site/examples/pie/basic/demo/meta.json
new file mode 100644
index 000000000..589aa8c6c
--- /dev/null
+++ b/site/examples/pie/basic/demo/meta.json
@@ -0,0 +1,16 @@
+{
+ "title": {
+ "zh": "中文分类",
+ "en": "Category"
+ },
+ "demos": [
+ {
+ "filename": "basic.js",
+ "title": {
+ "zh": "基础饼图",
+ "en": "Basic pie plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*wmldRZZj9lIAAAAAAAAAAABkARQnAQ"
+ }
+ ]
+}
diff --git a/site/examples/pie/basic/design.en.md b/site/examples/pie/basic/design.en.md
new file mode 100644
index 000000000..e041c7a04
--- /dev/null
+++ b/site/examples/pie/basic/design.en.md
@@ -0,0 +1,29 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+
+
+## 元素
+
+
+
+- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/site/examples/pie/basic/design.zh.md b/site/examples/pie/basic/design.zh.md
new file mode 100644
index 000000000..e041c7a04
--- /dev/null
+++ b/site/examples/pie/basic/design.zh.md
@@ -0,0 +1,29 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| 功能 | 对比分类数据的数值大小 |
+| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 |
+
+## 用法建议
+
+
+
+## 元素
+
+
+
+- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。
+- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
+- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/site/examples/pie/basic/index.en.md b/site/examples/pie/basic/index.en.md
new file mode 100644
index 000000000..fdd33a6e6
--- /dev/null
+++ b/site/examples/pie/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Basic Pie
+order: 0
+---
\ No newline at end of file
diff --git a/site/examples/pie/basic/index.zh.md b/site/examples/pie/basic/index.zh.md
new file mode 100644
index 000000000..fccb7b6ee
--- /dev/null
+++ b/site/examples/pie/basic/index.zh.md
@@ -0,0 +1,6 @@
+---
+title: 基础饼图
+order: 0
+---
+
+柱状图用于描述分类数据之间的对比，如果我们把时间周期，如周、月、年，也理解为一种分类数据 (time category)，那么柱状图也可以用于描述时间周期之间的数值比较。
From a2610bc36a25e0fd24b7f11d5e5d8761891c6d7f Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Fri, 11 Aug 2023 18:00:44 +0800
Subject: [PATCH 005/268] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9=E5=85=B1?=
=?UTF-8?q?=E5=BB=BA=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
CONTRIBUTING.zh-CN.md | 55 ++++++-------------------------------------
1 file changed, 7 insertions(+), 48 deletions(-)
diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md
index 79ddeb3e5..e14d66b89 100644
--- a/CONTRIBUTING.zh-CN.md
+++ b/CONTRIBUTING.zh-CN.md
@@ -10,12 +10,17 @@
```bash
# clone 代码
-$ git clone https://github.com/ant-design/ant-design-charts.git
+$ git clone -b v2 https://github.com/ant-design/ant-design-charts.git
$ cd ./ant-design-charts
# 依赖安装，由于项目使用了 pnpm 做多包管理，如果没有安装 pnpm，请先[安装pnpm](https://pnpm.io/installation#using-npm)，并配置对应的 [store-dir](https://pnpm.io/configuring)
$ pnpm i
# 先创建开发分支开发，分支名应该有含义，避免使用 update、tmp 之类的
$ git checkout -b branch-name
+# 启动本地官网
+$ pnpm start
+# 监听要改动的包，eg plots
+$ cd ./packages/plots
+$ pnpm start
# 开发完成后跑下测试是否通过，必要时需要新增或修改测试用例
$ pnpm test
# 测试通过后，提交代码，message 见下面的规范
@@ -39,56 +44,10 @@ $ git push origin branch-name
```ts
- packages
- - charts
- - flowchart
- - graphs
- - maps
+ - rc-utils
- plots
```
-以 graphs 为例，`cd ./packages/graphs`, 修改 scripts 里面的 `test:live` 文件路径修改为对应的测试文件, 并执行 `pnpm test:live` 即可，由于 afterEach 会移除对应的 DOM，测试时记得注释掉。
-
-```tsx
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { render } from '../../src/utils';
-import { FileTreeGraph } from '../../src';
-import { FileData } from '../data';
-
-describe('File Tree', () => {
- let container;
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
- });
- afterEach(() => {
- // document.body.removeChild(container);
- // container = null;
- });
- it('render', () => {
- let chartRef = undefined;
- const chartProps = {
- data: FileData,
- onReady: (graph) => {
- chartRef = graph;
- },
- };
- act(() => {
- render(, container);
- });
- expect(chartRef).not.toBeUndefined();
- expect(
- chartRef
- .findById('0-1')
- .get('group')
- .getChildren()
- .filter((item) => item.cfg.name === 'text-shape').length,
- ).toBe(1);
- });
-});
-```
-
-
### 代码风格
你的代码风格必须通过 eslint，你可以运行 `$ pnpm lint -r` 本地测试。
From 8168468d15b8664e427f01ad29c14cb08680cdbb Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Fri, 11 Aug 2023 20:11:45 +0800
Subject: [PATCH 006/268] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E8=BD=AC?=
=?UTF-8?q?=E6=8D=A2=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/plots/src/core/constants/index.ts | 53 ++++++++++++++++++++--
packages/plots/src/core/utils/transform.ts | 8 +++-
site/examples/line/basic/demo/color.js | 31 +++++++++++++
site/examples/line/basic/demo/group.js | 26 +++++++++++
site/examples/line/basic/demo/meta.json | 32 +++++++++++++
site/examples/line/basic/demo/multi.js | 3 ++
site/examples/line/basic/demo/normalize.js | 33 ++++++++++++++
site/examples/line/basic/demo/series.js | 19 ++++++++
8 files changed, 200 insertions(+), 5 deletions(-)
create mode 100644 site/examples/line/basic/demo/color.js
create mode 100644 site/examples/line/basic/demo/group.js
create mode 100644 site/examples/line/basic/demo/normalize.js
create mode 100644 site/examples/line/basic/demo/series.js
diff --git a/packages/plots/src/core/constants/index.ts b/packages/plots/src/core/constants/index.ts
index afa564da0..9bb7de529 100644
--- a/packages/plots/src/core/constants/index.ts
+++ b/packages/plots/src/core/constants/index.ts
@@ -13,10 +13,12 @@ export const TRANSFORM_OPTION_KEY = {
yField: 'y',
colorField: 'color',
angleField: 'y',
+ sizeField: 'size',
+ seriesField: 'series',
},
transform: {
/**
- * @title 是否堆叠
+ * @title 堆叠
* @example
* 1. stack: true -> transform: [{type: 'stackY'}]
*/
@@ -27,6 +29,44 @@ export const TRANSFORM_OPTION_KEY = {
available: value,
};
}
+ return { type: 'stackY', ...(value as object) };
+ },
+ /**
+ * @title 归一化
+ * @example
+ * 1. normalize: true -> transform: [{type: 'normalizeY'}]
+ */
+ normalize: (value: boolean | object) => {
+ if (isBoolean(value)) {
+ return {
+ type: 'normalizeY',
+ available: value,
+ };
+ }
+ return { type: 'normalizeY', ...(value as object) };
+ },
+ /**
+ * @title 聚合
+ * @example
+ * 1. group: true -> transform: [{type: 'groupX'}]
+ */
+ group: (value: boolean | object) => {
+ if (isBoolean(value)) {
+ return {
+ type: 'groupX',
+ available: value,
+ };
+ }
+ return { type: 'groupX', ...(value as object) };
+ },
+ },
+ scale: {
+ meta: (value: object) => {
+ return value;
+ },
+ },
+ labels: {
+ label: (value: object) => {
return value;
},
},
@@ -67,9 +107,9 @@ export const SPECIAL_OPTIONS = [
key: 'transform',
callback: (origin: object, key: string, value: { type: string; available?: boolean }) => {
origin[key] = origin[key] || [];
- const { available = true } = value;
+ const { available = true, ...rest } = value;
if (available) {
- origin[key].push(value);
+ origin[key].push(rest);
} else {
origin[key].splice(
origin[key].indexOf((item) => item.type === value.type),
@@ -78,4 +118,11 @@ export const SPECIAL_OPTIONS = [
}
},
},
+ {
+ key: 'labels',
+ callback: (origin: object, key: string, value: { type: string; available?: boolean }) => {
+ origin[key] = origin[key] || [];
+ origin[key].push(value);
+ },
+ },
];
diff --git a/packages/plots/src/core/utils/transform.ts b/packages/plots/src/core/utils/transform.ts
index 50fb5b2da..07fc083ae 100644
--- a/packages/plots/src/core/utils/transform.ts
+++ b/packages/plots/src/core/utils/transform.ts
@@ -10,7 +10,11 @@ export const transformOptions = (params: Adaptor) => {
const getRest = (o: Adaptor['options']) => {
const { children, type, data, ...rest } = o;
- return omit(rest, CHILDREN_SHAPE);
+ const customKeys = [];
+ Object.keys(TRANSFORM_OPTION_KEY).forEach((key) => {
+ customKeys.push(...Object.keys(TRANSFORM_OPTION_KEY[key]));
+ });
+ return omit(rest, CHILDREN_SHAPE, customKeys);
};
const rest = getRest(options);
@@ -48,8 +52,8 @@ export const transformOptions = (params: Adaptor) => {
callback(transformOption, specKey, transformValue);
} else {
transformOption[specKey] = Object.assign(transformOption[specKey] || {}, transformValue);
- delete options[key];
}
+ delete options[key];
}
});
});
diff --git a/site/examples/line/basic/demo/color.js b/site/examples/line/basic/demo/color.js
new file mode 100644
index 000000000..0ccc047d8
--- /dev/null
+++ b/site/examples/line/basic/demo/color.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://assets.antv.antgroup.com/g2/temperatures1.json',
+ },
+ xField: (d) => new Date(d.date),
+ yField: 'value',
+ colorField: 'condition',
+ seriesField: () => 'a',
+ shape: 'hvh',
+ style: {
+ gradient: 'x',
+ lineWidth: 2,
+ },
+ meta: {
+ y: { nice: true },
+ color: {
+ domain: ['CLR', 'FEW', 'SCT', 'BKN', 'OVC', 'VV '],
+ range: ['deepskyblue', 'lightskyblue', 'lightblue', '#aaaaaa', '#666666', '#666666'],
+ },
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/group.js b/site/examples/line/basic/demo/group.js
new file mode 100644
index 000000000..1c213ec3a
--- /dev/null
+++ b/site/examples/line/basic/demo/group.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/cb99c4ab-e0a3-4c76-9586-fe7fa2ff1a8c.csv',
+ },
+ xField: (d) => new Date(d.date).getFullYear(),
+ yField: 'price',
+ colorField: 'symbol',
+ label: {
+ text: 'price',
+ transform: [{ type: 'overlapDodgeY' }],
+ style: {
+ fontSize: 10,
+ },
+ },
+ group: { y: 'mean' },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/meta.json b/site/examples/line/basic/demo/meta.json
index 1562ebf34..5f67b3856 100644
--- a/site/examples/line/basic/demo/meta.json
+++ b/site/examples/line/basic/demo/meta.json
@@ -27,6 +27,38 @@
"en": "Connect nulls plot"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ },
+ {
+ "filename": "series.js",
+ "title": {
+ "zh": "系列折线图",
+ "en": "Series Line plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ },
+ {
+ "filename": "normalize.js",
+ "title": {
+ "zh": "归一化折线图",
+ "en": "Normalize Line plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ },
+ {
+ "filename": "group.js",
+ "title": {
+ "zh": "聚合折线图",
+ "en": "Group Line plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ },
+ {
+ "filename": "color.js",
+ "title": {
+ "zh": "多色折线图",
+ "en": "Colors Line plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
}
]
}
diff --git a/site/examples/line/basic/demo/multi.js b/site/examples/line/basic/demo/multi.js
index 60b43d2ee..0185a717e 100644
--- a/site/examples/line/basic/demo/multi.js
+++ b/site/examples/line/basic/demo/multi.js
@@ -10,7 +10,10 @@ const DemoLine = () => {
},
xField: 'year',
yField: 'value',
+ sizeField: 'value',
stack: true,
+ shape: 'trail',
+ legend: { size: false },
colorField: 'category',
};
return ;
diff --git a/site/examples/line/basic/demo/normalize.js b/site/examples/line/basic/demo/normalize.js
new file mode 100644
index 000000000..26cc1037f
--- /dev/null
+++ b/site/examples/line/basic/demo/normalize.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://assets.antv.antgroup.com/g2/indices.json',
+ },
+ xField: (d) => new Date(d.Date),
+ yField: 'Close',
+ colorField: 'Symbol',
+ normalize: { basis: 'first', groupBy: 'color' },
+ meta: {
+ y: { type: 'log' },
+ },
+ axis: {
+ y: { title: '↑ Change in price (%)' },
+ },
+ label: {
+ text: 'Symbol',
+ selector: 'last',
+ style: {
+ fontSize: 10,
+ },
+ },
+ tooltip: { channel: 'y', valueFormatter: '.1f' },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/line/basic/demo/series.js b/site/examples/line/basic/demo/series.js
new file mode 100644
index 000000000..0eb649849
--- /dev/null
+++ b/site/examples/line/basic/demo/series.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Line } from '@ant-design/plots';
+
+const DemoLine = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/728a4bdc-9d0b-49e0-a92f-6320a6cddeed.csv',
+ },
+ xField: 'date',
+ yField: 'unemployment',
+ colorField: 'steelblue',
+ seriesField: 'division',
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
From 9d7387f6cd17754ab921513d07ff8330624bc287 Mon Sep 17 00:00:00 2001
From: OctKun
Date: Sun, 13 Aug 2023 12:54:45 +0800
Subject: [PATCH 007/268] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E9=9D=A2?=
=?UTF-8?q?=E7=A7=AF=E5=9B=BE=20(#2025)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: chenkun
---
packages/plots/src/components/area/index.tsx | 10 +
packages/plots/src/components/index.ts | 3 +-
packages/plots/src/components/interface.ts | 1 +
packages/plots/src/core/index.ts | 4 +-
packages/plots/src/core/plots/area/adaptor.ts | 21 ++
packages/plots/src/core/plots/area/index.ts | 33 +++
packages/plots/src/core/plots/area/type.ts | 3 +
site/.dumirc.ts | 8 +
site/examples/area/basic/demo/basic.js | 247 ++++++++++++++++++
site/examples/area/basic/demo/meta.json | 16 ++
site/examples/area/basic/index.en.md | 4 +
site/examples/area/basic/index.zh.md | 4 +
12 files changed, 352 insertions(+), 2 deletions(-)
create mode 100644 packages/plots/src/components/area/index.tsx
create mode 100644 packages/plots/src/core/plots/area/adaptor.ts
create mode 100644 packages/plots/src/core/plots/area/index.ts
create mode 100644 packages/plots/src/core/plots/area/type.ts
create mode 100644 site/examples/area/basic/demo/basic.js
create mode 100644 site/examples/area/basic/demo/meta.json
create mode 100644 site/examples/area/basic/index.en.md
create mode 100644 site/examples/area/basic/index.zh.md
diff --git a/packages/plots/src/components/area/index.tsx b/packages/plots/src/components/area/index.tsx
new file mode 100644
index 000000000..ad6f6412f
--- /dev/null
+++ b/packages/plots/src/components/area/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { AreaOptions } from '../../core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type AreaConfig = CommonConfig;
+
+const AreaChart = (props: AreaConfig) => ;
+
+export default AreaChart;
diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts
index 073343e06..fb2b74828 100644
--- a/packages/plots/src/components/index.ts
+++ b/packages/plots/src/components/index.ts
@@ -1,5 +1,6 @@
+import Area from './area';
import Column from './column';
import Line from './line';
import Pie from './pie';
-export { Column, Line, Pie };
+export { Column, Line, Pie, Area };
diff --git a/packages/plots/src/components/interface.ts b/packages/plots/src/components/interface.ts
index 7fc0412ef..83af69d6a 100644
--- a/packages/plots/src/components/interface.ts
+++ b/packages/plots/src/components/interface.ts
@@ -1,2 +1,3 @@
+export type { AreaConfig } from './area';
export type { ColumnConfig } from './column';
export type { LineConfig } from './line';
diff --git a/packages/plots/src/core/index.ts b/packages/plots/src/core/index.ts
index d04d1c6b7..1fd8b40b5 100644
--- a/packages/plots/src/core/index.ts
+++ b/packages/plots/src/core/index.ts
@@ -5,9 +5,11 @@ export * from './types';
import { Line } from './plots/line';
import { Column } from './plots/column';
import { Pie } from './plots/pie';
+import { Area } from './plots/area';
export type { LineOptions } from './plots/line';
export type { ColumnOptions } from './plots/column';
export type { PieOptions } from './plots/pie';
+export type { AreaOptions } from './plots/area';
-export const Plots = { Line, Column, Pie };
+export const Plots = { Line, Column, Pie, Area };
diff --git a/packages/plots/src/core/plots/area/adaptor.ts b/packages/plots/src/core/plots/area/adaptor.ts
new file mode 100644
index 000000000..3e874697f
--- /dev/null
+++ b/packages/plots/src/core/plots/area/adaptor.ts
@@ -0,0 +1,21 @@
+import { flow, transformOptions } from '../../utils';
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import type { AreaOptions } from './type';
+
+type Params = Adaptor;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+ /**
+ * 图表差异化处理
+ */
+ const init = (params: Params) => {
+ return params;
+ };
+
+ return flow(init, transformOptions, mark)(params);
+}
diff --git a/packages/plots/src/core/plots/area/index.ts b/packages/plots/src/core/plots/area/index.ts
new file mode 100644
index 000000000..72a2dbda3
--- /dev/null
+++ b/packages/plots/src/core/plots/area/index.ts
@@ -0,0 +1,33 @@
+import { Plot } from '../../base';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { AreaOptions } from './type';
+
+export type { AreaOptions };
+
+export class Area extends Plot {
+ /** 图表类型 */
+ public type = 'area';
+
+ /**
+ * 获取 面积图 默认配置项
+ * 供外部使用
+ */
+ static getDefaultOptions(): Partial {
+ return { type: 'view', children: [{ type: 'area' }] };
+ }
+
+ /**
+ * 获取 面积图 默认配置
+ */
+ protected getDefaultOptions() {
+ return Area.getDefaultOptions();
+ }
+
+ /**
+ * 面积图适配器
+ */
+ protected getSchemaAdaptor(): (params: Adaptor) => void {
+ return adaptor;
+ }
+}
diff --git a/packages/plots/src/core/plots/area/type.ts b/packages/plots/src/core/plots/area/type.ts
new file mode 100644
index 000000000..939cba7f4
--- /dev/null
+++ b/packages/plots/src/core/plots/area/type.ts
@@ -0,0 +1,3 @@
+import type { Options } from '../../types/common';
+
+export type AreaOptions = Options;
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index ef630e189..18a84a212 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -93,6 +93,14 @@ export default defineConfig({
en: 'Pie',
},
},
+ {
+ slug: 'area',
+ icon: 'area',
+ title: {
+ zh: '面积图',
+ en: 'Area',
+ },
+ },
],
detail: {
title: {
diff --git a/site/examples/area/basic/demo/basic.js b/site/examples/area/basic/demo/basic.js
new file mode 100644
index 000000000..2adc8090a
--- /dev/null
+++ b/site/examples/area/basic/demo/basic.js
@@ -0,0 +1,247 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Area } from '@ant-design/plots';
+
+const DemoArea = () => {
+ const config = {
+ data: [
+ {
+ timePeriod: '2006 Q3',
+ value: 1,
+ },
+ {
+ timePeriod: '2006 Q4',
+ value: 1.08,
+ },
+ {
+ timePeriod: '2007 Q1',
+ value: 1.17,
+ },
+ {
+ timePeriod: '2007 Q2',
+ value: 1.26,
+ },
+ {
+ timePeriod: '2007 Q3',
+ value: 1.34,
+ },
+ {
+ timePeriod: '2007 Q4',
+ value: 1.41,
+ },
+ {
+ timePeriod: '2008 Q1',
+ value: 1.52,
+ },
+ {
+ timePeriod: '2008 Q2',
+ value: 1.67,
+ },
+ {
+ timePeriod: '2008 Q3',
+ value: 1.84,
+ },
+ {
+ timePeriod: '2008 Q4',
+ value: 2.07,
+ },
+ {
+ timePeriod: '2009 Q1',
+ value: 2.39,
+ },
+ {
+ timePeriod: '2009 Q2',
+ value: 2.71,
+ },
+ {
+ timePeriod: '2009 Q3',
+ value: 3.03,
+ },
+ {
+ timePeriod: '2009 Q4',
+ value: 3.33,
+ },
+ {
+ timePeriod: '2010 Q1',
+ value: 3.5,
+ },
+ {
+ timePeriod: '2010 Q2',
+ value: 3.37,
+ },
+ {
+ timePeriod: '2010 Q3',
+ value: 3.15,
+ },
+ {
+ timePeriod: '2010 Q4',
+ value: 3.01,
+ },
+ {
+ timePeriod: '2011 Q1',
+ value: 2.8,
+ },
+ {
+ timePeriod: '2011 Q2',
+ value: 2.8,
+ },
+ {
+ timePeriod: '2011 Q3',
+ value: 2.84,
+ },
+ {
+ timePeriod: '2011 Q4',
+ value: 2.75,
+ },
+ {
+ timePeriod: '2012 Q1',
+ value: 2.64,
+ },
+ {
+ timePeriod: '2012 Q2',
+ value: 2.55,
+ },
+ {
+ timePeriod: '2012 Q3',
+ value: 2.46,
+ },
+ {
+ timePeriod: '2012 Q4',
+ value: 2.45,
+ },
+ {
+ timePeriod: '2013 Q1',
+ value: 2.57,
+ },
+ {
+ timePeriod: '2013 Q2',
+ value: 2.68,
+ },
+ {
+ timePeriod: '2013 Q3',
+ value: 2.8,
+ },
+ {
+ timePeriod: '2013 Q4',
+ value: 2.89,
+ },
+ {
+ timePeriod: '2014 Q1',
+ value: 2.85,
+ },
+ {
+ timePeriod: '2014 Q2',
+ value: 2.73,
+ },
+ {
+ timePeriod: '2014 Q3',
+ value: 2.54,
+ },
+ {
+ timePeriod: '2014 Q4',
+ value: 2.32,
+ },
+ {
+ timePeriod: '2015 Q1',
+ value: 2.25,
+ },
+ {
+ timePeriod: '2015 Q2',
+ value: 2.33,
+ },
+ {
+ timePeriod: '2015 Q3',
+ value: 2.53,
+ },
+ {
+ timePeriod: '2015 Q4',
+ value: 2.74,
+ },
+ {
+ timePeriod: '2016 Q1',
+ value: 2.76,
+ },
+ {
+ timePeriod: '2016 Q2',
+ value: 2.61,
+ },
+ {
+ timePeriod: '2016 Q3',
+ value: 2.35,
+ },
+ {
+ timePeriod: '2016 Q4',
+ value: 2.11,
+ },
+ {
+ timePeriod: '2017 Q1',
+ value: 2.08,
+ },
+ {
+ timePeriod: '2017 Q2',
+ value: 2.2,
+ },
+ {
+ timePeriod: '2017 Q3',
+ value: 2.38,
+ },
+ {
+ timePeriod: '2017 Q4',
+ value: 2.59,
+ },
+ {
+ timePeriod: '2018 Q1',
+ value: 2.63,
+ },
+ {
+ timePeriod: '2018 Q2',
+ value: 2.67,
+ },
+ {
+ timePeriod: '2018 Q3',
+ value: 2.64,
+ },
+ {
+ timePeriod: '2018 Q4',
+ value: 2.5,
+ },
+ {
+ timePeriod: '2019 Q1',
+ value: 2.31,
+ },
+ {
+ timePeriod: '2019 Q2',
+ value: 2.04,
+ },
+ {
+ timePeriod: '2019 Q3',
+ value: 1.83,
+ },
+ {
+ timePeriod: '2019 Q4',
+ value: 1.71,
+ },
+ {
+ timePeriod: '2020 Q1',
+ value: 1.65,
+ },
+ {
+ timePeriod: '2020 Q2',
+ value: 1.59,
+ },
+ {
+ timePeriod: '2020 Q3',
+ value: 1.58,
+ },
+ ],
+ xField: 'timePeriod',
+ yField: 'value',
+ xAxis: {
+ range: [0, 1],
+ },
+ };
+
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/area/basic/demo/meta.json b/site/examples/area/basic/demo/meta.json
new file mode 100644
index 000000000..0546bb3b0
--- /dev/null
+++ b/site/examples/area/basic/demo/meta.json
@@ -0,0 +1,16 @@
+{
+ "title": {
+ "zh": "中文分类",
+ "en": "Category"
+ },
+ "demos": [
+ {
+ "filename": "basic.js",
+ "title": {
+ "zh": "基础面积图",
+ "en": "Basic Area plot"
+ },
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ld0NQtdLO0/mianjitugengxinshuju-after.gif"
+ }
+ ]
+}
diff --git a/site/examples/area/basic/index.en.md b/site/examples/area/basic/index.en.md
new file mode 100644
index 000000000..ce79c401d
--- /dev/null
+++ b/site/examples/area/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Basic Area
+order: 0
+---
\ No newline at end of file
diff --git a/site/examples/area/basic/index.zh.md b/site/examples/area/basic/index.zh.md
new file mode 100644
index 000000000..6bf328e49
--- /dev/null
+++ b/site/examples/area/basic/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 基础面积图
+order: 0
+---
From 322186bfc08bdd3d9602df5799dcaa3541e54ee0 Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Mon, 14 Aug 2023 14:48:58 +0800
Subject: [PATCH 008/268] fix: demo error
---
package.json | 3 +-
packages/charts/package.json | 2 -
packages/plots/src/core/base/index.ts | 2 +-
packages/plots/src/core/constants/index.ts | 8 +--
packages/plots/src/core/utils/transform.ts | 4 +-
.../plots/tests/plots/column-proxy-spec.tsx | 15 ++---
site/examples/column/basic/demo/bar-dodged.js | 27 +++++++++
site/examples/column/basic/demo/basic.js | 21 -------
site/examples/column/basic/demo/column-log.js | 25 +++++++++
.../column/basic/demo/column-maxwidth.js | 20 +++++++
site/examples/column/basic/demo/column.js | 22 ++++++++
site/examples/column/basic/demo/meta.json | 32 +++++++++--
site/examples/line/basic/demo/basic.js | 2 +-
.../examples/line/basic/demo/connect-nulls.js | 55 ++++++-------------
site/examples/line/basic/demo/meta.json | 10 ++--
site/package.json | 6 +-
template/doc/demo.ejs | 3 -
17 files changed, 159 insertions(+), 98 deletions(-)
create mode 100644 site/examples/column/basic/demo/bar-dodged.js
delete mode 100644 site/examples/column/basic/demo/basic.js
create mode 100644 site/examples/column/basic/demo/column-log.js
create mode 100644 site/examples/column/basic/demo/column-maxwidth.js
create mode 100644 site/examples/column/basic/demo/column.js
diff --git a/package.json b/package.json
index 852c83bce..be2434b0f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
"add:changelog": "pnpm changeset"
},
"devDependencies": {
- "@antv/data-set": "^0.11.8",
"@babel/core": "^7.11.6",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.13.9",
@@ -65,7 +64,7 @@
"overrides": {
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
- "monaco-editor": "0.21.3"
+ "tslib": "2.3.1"
}
},
"gitHooks": {
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 3b02e246c..e3e63b7ce 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -34,8 +34,6 @@
"@ant-design/plots": "workspace:*"
},
"peerDependencies": {
- "@ant-design/icons": "^4.6.0",
- "antd": "^4.6.3",
"lodash": "^4.17.20",
"react": ">=16.8.4",
"react-dom": ">=16.8.4"
diff --git a/packages/plots/src/core/base/index.ts b/packages/plots/src/core/base/index.ts
index ba9c1606c..154cbf5a3 100644
--- a/packages/plots/src/core/base/index.ts
+++ b/packages/plots/src/core/base/index.ts
@@ -1,8 +1,8 @@
import EE from '@antv/event-emitter';
import { Chart } from '@antv/g2';
import { bind } from 'size-sensor';
+import type { Adaptor, Options } from '../types';
import { merge, omit, pick } from '../utils';
-import type { Options, Adaptor } from '../types';
const SOURCE_ATTRIBUTE_NAME = 'data-chart-source-type';
diff --git a/packages/plots/src/core/constants/index.ts b/packages/plots/src/core/constants/index.ts
index 9bb7de529..d0b3bf273 100644
--- a/packages/plots/src/core/constants/index.ts
+++ b/packages/plots/src/core/constants/index.ts
@@ -46,18 +46,18 @@ export const TRANSFORM_OPTION_KEY = {
return { type: 'normalizeY', ...(value as object) };
},
/**
- * @title 聚合
+ * @title 分组
* @example
- * 1. group: true -> transform: [{type: 'groupX'}]
+ * 1. group: true -> transform: [{type: 'dodgeX'}]
*/
group: (value: boolean | object) => {
if (isBoolean(value)) {
return {
- type: 'groupX',
+ type: 'dodgeX',
available: value,
};
}
- return { type: 'groupX', ...(value as object) };
+ return { type: 'dodgeX', ...(value as object) };
},
},
scale: {
diff --git a/packages/plots/src/core/utils/transform.ts b/packages/plots/src/core/utils/transform.ts
index 07fc083ae..ee17e0bb8 100644
--- a/packages/plots/src/core/utils/transform.ts
+++ b/packages/plots/src/core/utils/transform.ts
@@ -1,6 +1,6 @@
-import { omit } from './index';
-import { TRANSFORM_OPTION_KEY, CHILDREN_SHAPE, SPECIAL_OPTIONS } from '../constants';
+import { CHILDREN_SHAPE, SPECIAL_OPTIONS, TRANSFORM_OPTION_KEY } from '../constants';
import { Adaptor } from '../types';
+import { omit } from './index';
/**
* @title 将自定义配置转换为 G2 接受的格式
*/
diff --git a/packages/plots/tests/plots/column-proxy-spec.tsx b/packages/plots/tests/plots/column-proxy-spec.tsx
index c1532618d..78f8b730d 100644
--- a/packages/plots/tests/plots/column-proxy-spec.tsx
+++ b/packages/plots/tests/plots/column-proxy-spec.tsx
@@ -1,9 +1,8 @@
-import React, { useRef } from 'react';
+import { renderHook } from '@testing-library/react-hooks/server';
import { render } from 'rc-utils';
+import React, { useRef } from 'react';
import { act } from 'react-dom/test-utils';
-import { renderHook } from '@testing-library/react-hooks/server';
import { Column } from '../../src';
-import { setTimeout } from 'timers';
const ref: any = renderHook(() => useRef());
@@ -28,14 +27,13 @@ describe('Proxy config', () => {
document.body.appendChild(container);
});
afterEach(() => {
- // document.body.removeChild(container);
- // container = null;
+ document.body.removeChild(container);
+ container = null;
});
it('chart render', async () => {
let stateProxy: any;
let plot: any;
- const proxy = (state) => (stateProxy = state);
const config = {
data,
xField: 'date',
@@ -45,11 +43,8 @@ describe('Proxy config', () => {
onReady: (plotInstance) => (plot = plotInstance),
};
act(() => {
- render(, container);
+ render(, container);
});
expect(stateProxy['xField']).toBe('date');
- stateProxy.data = [...stateProxy.data, { date: '2010-04', scales: 1250 }];
- await new Promise((r) => setTimeout(r, 2000));
- expect(plot.chart.getData().length).toBe(4);
});
});
diff --git a/site/examples/column/basic/demo/bar-dodged.js b/site/examples/column/basic/demo/bar-dodged.js
new file mode 100644
index 000000000..1b11cf804
--- /dev/null
+++ b/site/examples/column/basic/demo/bar-dodged.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const DemoColumn = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
+ format: 'csv',
+ },
+ xField: 'state',
+ yField: 'population',
+ colorFiekd: 'age',
+ group: {},
+ axis: {
+ y: { labelFormatter: '~s' },
+ },
+ interaction: {
+ tooltip: { shared: true },
+ elementHighlightByColor: { background: true },
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/column/basic/demo/basic.js b/site/examples/column/basic/demo/basic.js
deleted file mode 100644
index 70a91de5f..000000000
--- a/site/examples/column/basic/demo/basic.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Column } from '@ant-design/plots';
-
-const DemoColumn = () => {
- const config = {
- data: [
- { genre: 'Sports', sold: 275 },
- { genre: 'Strategy', sold: 115 },
- { genre: 'Action', sold: 120 },
- { genre: 'Shooter', sold: 350 },
- { genre: 'Other', sold: 150 },
- ],
- xField: 'genre',
- yField: 'sold',
- colorField: 'genre',
- };
- return ;
-};
-
-ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/column/basic/demo/column-log.js b/site/examples/column/basic/demo/column-log.js
new file mode 100644
index 000000000..53212b56e
--- /dev/null
+++ b/site/examples/column/basic/demo/column-log.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const EPSILON = 1e-6;
+
+const DemoColumn = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ },
+ xField: 'letter',
+ yField: 'frequency',
+ meta: {
+ y: { type: 'log' },
+ },
+ axis: {
+ y: { labelFormatter: (d) => (d === EPSILON ? 0 : d) },
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/column/basic/demo/column-maxwidth.js b/site/examples/column/basic/demo/column-maxwidth.js
new file mode 100644
index 000000000..0799203d3
--- /dev/null
+++ b/site/examples/column/basic/demo/column-maxwidth.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const DemoColumn = () => {
+ const config = {
+ data: [{ letter: 'A', frequency: 120 }],
+ xField: 'letter',
+ yField: 'frequency',
+ meta: {
+ x: { padding: 0.5 },
+ },
+ style: {
+ maxWidth: 200,
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/column/basic/demo/column.js b/site/examples/column/basic/demo/column.js
new file mode 100644
index 000000000..011e4ee5e
--- /dev/null
+++ b/site/examples/column/basic/demo/column.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Column } from '@ant-design/plots';
+
+const DemoColumn = () => {
+ const config = {
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+ },
+ xField: 'letter',
+ yField: 'frequency',
+ axis: {
+ y: {
+ labelFormatter: '.0%',
+ },
+ },
+ };
+ return ;
+};
+
+ReactDOM.render(, document.getElementById('container'));
diff --git a/site/examples/column/basic/demo/meta.json b/site/examples/column/basic/demo/meta.json
index 3874aa334..388a1e36d 100644
--- a/site/examples/column/basic/demo/meta.json
+++ b/site/examples/column/basic/demo/meta.json
@@ -5,12 +5,36 @@
},
"demos": [
{
- "filename": "basic.js",
+ "filename": "column.js",
"title": {
- "zh": "基础柱状图",
- "en": "Basic column plot"
+ "zh": "柱形图",
+ "en": "Column Chart"
},
- "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*KAg2TY-oYRUAAAAAAAAAAAAAARQnAQ"
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vhCKQJ9UJX4AAAAAAAAAAAAADmJ7AQ/original"
+ },
+ {
+ "filename": "column-maxwidth.js",
+ "title": {
+ "zh": "限制宽度的柱形图",
+ "en": "Column with maxWidth"
+ },
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fu-BSYg7U_kAAAAAAAAAAAAADmJ7AQ/original"
+ },
+ {
+ "filename": "column-log.js",
+ "title": {
+ "zh": "对数柱形图",
+ "en": "Log Column Chart"
+ },
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cRE5TqJGnVUAAAAAAAAAAAAADmJ7AQ/original"
+ },
+ {
+ "filename": "bar-dodged.js",
+ "title": {
+ "zh": "分组条形图",
+ "en": "Dodged Bar Chart"
+ },
+ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FrshQpaS4f0AAAAAAAAAAAAADmJ7AQ/original"
}
]
}
diff --git a/site/examples/line/basic/demo/basic.js b/site/examples/line/basic/demo/basic.js
index 6f29fb3c6..d3591c8f9 100644
--- a/site/examples/line/basic/demo/basic.js
+++ b/site/examples/line/basic/demo/basic.js
@@ -1,6 +1,6 @@
+import { Line } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';
-import { Line } from '@ant-design/plots';
const DemoLine = () => {
const config = {
diff --git a/site/examples/line/basic/demo/connect-nulls.js b/site/examples/line/basic/demo/connect-nulls.js
index 1ceac1cb4..9ec63c585 100644
--- a/site/examples/line/basic/demo/connect-nulls.js
+++ b/site/examples/line/basic/demo/connect-nulls.js
@@ -4,46 +4,25 @@ import { Line } from '@ant-design/plots';
const DemoLine = () => {
const config = {
- data: [
- {
- Date: '2010-01',
- scales: 1998,
- },
- {
- Date: '2010-02',
- scales: 1850,
- },
- {
- Date: '2010-03',
- scales: 1720,
- },
- {
- Date: '2010-04',
- scales: 1818,
- },
- {
- Date: '2010-05',
- scales: null,
- },
- {
- Date: '2010-06',
- scales: 1802,
- },
- {
- Date: '2010-07',
- scales: 1945,
- },
- {
- Date: '2010-08',
- scales: 1856,
- },
- ],
- xField: 'Date',
- yField: 'scales',
- shape: 'smooth',
+ data: {
+ type: 'fetch',
+ value: 'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
+ transform: [
+ // Mock missing data.
+ {
+ type: 'map',
+ callback: (d) => ({
+ ...d,
+ close: d.date.getUTCMonth() < 3 ? NaN : d.close,
+ }),
+ },
+ ],
+ },
+ xField: 'date',
+ yField: 'close',
connectNulls: {
connect: true,
- connectStroke: 'red',
+ connectStroke: '#aaa',
},
};
return ;
diff --git a/site/examples/line/basic/demo/meta.json b/site/examples/line/basic/demo/meta.json
index 5f67b3856..988fd54da 100644
--- a/site/examples/line/basic/demo/meta.json
+++ b/site/examples/line/basic/demo/meta.json
@@ -26,7 +26,7 @@
"zh": "连接空值",
"en": "Connect nulls plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*46DiTJLA2t8AAAAAAAAAAAAADmJ7AQ"
},
{
"filename": "series.js",
@@ -34,7 +34,7 @@
"zh": "系列折线图",
"en": "Series Line plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*y84BS5AqJLYAAAAAAAAAAAAADmJ7AQ"
},
{
"filename": "normalize.js",
@@ -42,7 +42,7 @@
"zh": "归一化折线图",
"en": "Normalize Line plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*MzXYRqHjHQEAAAAAAAAAAAAADmJ7AQ"
},
{
"filename": "group.js",
@@ -50,7 +50,7 @@
"zh": "聚合折线图",
"en": "Group Line plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*-q4yQZ7WtDcAAAAAAAAAAAAADmJ7AQ"
},
{
"filename": "color.js",
@@ -58,7 +58,7 @@
"zh": "多色折线图",
"en": "Colors Line plot"
},
- "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aiERL4ey%24U/08d95f7b-46cb-4bfd-89b2-be36343d44a1.png"
+ "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*WVwSRa-HQAcAAAAAAAAAAAAADmJ7AQ"
}
]
}
diff --git a/site/package.json b/site/package.json
index 742683553..2863267bd 100644
--- a/site/package.json
+++ b/site/package.json
@@ -28,7 +28,7 @@
"start": "NODE_OPTIONS=--max_old_space_size=8192 pnpm run develop"
},
"devDependencies": {
- "@antv/dumi-theme-antv": "^0.3.0",
+ "@antv/dumi-theme-antv": "0.3.18",
"@types/react": "^16.14.8",
"@types/react-dom": "^16.9.13",
"cross-env": "^7.0.3",
@@ -39,11 +39,7 @@
"typescript": "^3.6.5"
},
"dependencies": {
- "@ant-design/flowchart": "^1.0.2",
- "@ant-design/graphs": "^1.0.1",
- "@ant-design/maps": "^1.0.1",
"@ant-design/plots": "^2.0.0-alpha.0",
- "@antv/data-set": "^0.11.8",
"antd": "^4.16.13",
"insert-css": "^2.0.0",
"react": "^16.14.0",
diff --git a/template/doc/demo.ejs b/template/doc/demo.ejs
index 7e6097f25..3ad0b1f58 100644
--- a/template/doc/demo.ejs
+++ b/template/doc/demo.ejs
@@ -4,9 +4,6 @@ import { <%= plotName %> } from '@ant-design/<%= lib %>';
<% if (utilName) { %>
import { <%= utilName %> } from 'lodash-es';
<% } %>
-<% if (dataSet) { %>
-import { <%= dataSet %> } from '@antv/data-set';
-<% } %>
const Demo<%= chartName %> = () => {
<%- chartContent.toString() %>
From 975b047084749008b225c7f494203579d3874613 Mon Sep 17 00:00:00 2001
From: lxfu1 <954055752@qq.com>
Date: Mon, 14 Aug 2023 17:46:24 +0800
Subject: [PATCH 009/268] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 2 +-
packages/plots/src/components/bar/index.tsx | 10 +++++
packages/plots/src/components/index.ts | 3 +-
packages/plots/src/core/base/index.ts | 10 ++---
packages/plots/src/core/constants/index.ts | 18 +++++++++
packages/plots/src/core/index.ts | 18 ++++-----
packages/plots/src/core/plots/bar/adaptor.ts | 21 +++++++++++
packages/plots/src/core/plots/bar/index.ts | 33 +++++++++++++++++
packages/plots/src/core/plots/bar/type.ts | 3 ++
.../plots/src/core/utils/get-custom-keys.ts | 9 +++++
packages/plots/src/core/utils/index.ts | 3 +-
packages/plots/src/core/utils/transform.ts | 9 ++---
site/.dumirc.ts | 8 ++++
site/examples/bar/basic/API.en.md | 1 +
site/examples/bar/basic/API.zh.md | 1 +
site/examples/bar/basic/demo/bar.js | 35 ++++++++++++++++++
site/examples/bar/basic/demo/meta.json | 32 ++++++++++++++++
.../bar/basic/demo/normalized-stacked.js | 35 ++++++++++++++++++
site/examples/bar/basic/demo/stacked.js | 33 +++++++++++++++++
site/examples/bar/basic/design.en.md | 29 +++++++++++++++
site/examples/bar/basic/design.zh.md | 29 +++++++++++++++
site/examples/bar/basic/index.en.md | 4 ++
site/examples/bar/basic/index.zh.md | 6 +++
site/examples/column/basic/demo/bar-dodged.js | 11 ++++--
site/examples/column/basic/demo/column-log.js | 25 -------------
site/examples/column/basic/demo/column.js | 6 ++-
site/examples/column/basic/demo/meta.json | 16 ++++++--
site/examples/column/basic/demo/range.js | 37 +++++++++++++++++++
site/examples/column/basic/demo/stacked.js | 34 +++++++++++++++++
29 files changed, 425 insertions(+), 56 deletions(-)
create mode 100644 packages/plots/src/components/bar/index.tsx
create mode 100644 packages/plots/src/core/plots/bar/adaptor.ts
create mode 100644 packages/plots/src/core/plots/bar/index.ts
create mode 100644 packages/plots/src/core/plots/bar/type.ts
create mode 100644 packages/plots/src/core/utils/get-custom-keys.ts
create mode 100644 site/examples/bar/basic/API.en.md
create mode 100644 site/examples/bar/basic/API.zh.md
create mode 100644 site/examples/bar/basic/demo/bar.js
create mode 100644 site/examples/bar/basic/demo/meta.json
create mode 100644 site/examples/bar/basic/demo/normalized-stacked.js
create mode 100644 site/examples/bar/basic/demo/stacked.js
create mode 100644 site/examples/bar/basic/design.en.md
create mode 100644 site/examples/bar/basic/design.zh.md
create mode 100644 site/examples/bar/basic/index.en.md
create mode 100644 site/examples/bar/basic/index.zh.md
delete mode 100644 site/examples/column/basic/demo/column-log.js
create mode 100644 site/examples/column/basic/demo/range.js
create mode 100644 site/examples/column/basic/demo/stacked.js
diff --git a/package.json b/package.json
index be2434b0f..98597b767 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
"overrides": {
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
- "tslib": "2.3.1"
+ "tslib": "2.6.1"
}
},
"gitHooks": {
diff --git a/packages/plots/src/components/bar/index.tsx b/packages/plots/src/components/bar/index.tsx
new file mode 100644
index 000000000..44463e3f4
--- /dev/null
+++ b/packages/plots/src/components/bar/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { BarOptions } from '../../core';
+import { CommonConfig } from '../../interface';
+import { BaseChart } from '../base';
+
+export type BarConfig = CommonConfig;
+
+const BarChart = (props: BarConfig) => ;
+
+export default BarChart;
diff --git a/packages/plots/src/components/index.ts b/packages/plots/src/components/index.ts
index fb2b74828..31833ae47 100644
--- a/packages/plots/src/components/index.ts
+++ b/packages/plots/src/components/index.ts
@@ -1,6 +1,7 @@
import Area from './area';
+import Bar from './bar';
import Column from './column';
import Line from './line';
import Pie from './pie';
-export { Column, Line, Pie, Area };
+export { Column, Line, Pie, Area, Bar };
diff --git a/packages/plots/src/core/base/index.ts b/packages/plots/src/core/base/index.ts
index 154cbf5a3..ae68e2146 100644
--- a/packages/plots/src/core/base/index.ts
+++ b/packages/plots/src/core/base/index.ts
@@ -1,14 +1,12 @@
import EE from '@antv/event-emitter';
import { Chart } from '@antv/g2';
import { bind } from 'size-sensor';
+import { CHART_OPTIONS } from '../constants';
import type { Adaptor, Options } from '../types';
-import { merge, omit, pick } from '../utils';
+import { getCustomKeys, merge, omit, pick } from '../utils';
const SOURCE_ATTRIBUTE_NAME = 'data-chart-source-type';
-/** new Chart options */
-export const CHART_OPTIONS = ['width', 'height', 'renderer', 'autoFit', 'canvas', 'theme'];
-
export abstract class Plot extends EE {
/** plot 类型名称 */
public abstract readonly type: string;
@@ -49,7 +47,7 @@ export abstract class Plot extends EE {
* G2 options(Spec) 配置
*/
private getSpecOptions() {
- return omit(this.options, CHART_OPTIONS);
+ return omit(this.options, CHART_OPTIONS, getCustomKeys());
}
/**
@@ -94,6 +92,8 @@ export abstract class Plot extends EE {
this.execAdaptor();
// options 转换
+ console.log(this.getSpecOptions());
+
this.chart.options(this.getSpecOptions());
// 渲染
this.chart.render();
diff --git a/packages/plots/src/core/constants/index.ts b/packages/plots/src/core/constants/index.ts
index d0b3bf273..63dfe93ca 100644
--- a/packages/plots/src/core/constants/index.ts
+++ b/packages/plots/src/core/constants/index.ts
@@ -1,4 +1,8 @@
import { isBoolean } from '../utils';
+
+/** new Chart options */
+export const CHART_OPTIONS = ['width', 'height', 'renderer', 'autoFit', 'canvas', 'theme'];
+
/**
* @title 字段转换逻辑
* @example
@@ -59,6 +63,20 @@ export const TRANSFORM_OPTION_KEY = {
}
return { type: 'dodgeX', ...(value as object) };
},
+ /**
+ * @title 排序
+ * @example
+ * 1. sort: true -> transform: [{type: 'sortX'}]
+ */
+ sort: (value: boolean | object) => {
+ if (isBoolean(value)) {
+ return {
+ type: 'sortX',
+ available: value,
+ };
+ }
+ return { type: 'sortX', ...(value as object) };
+ },
},
scale: {
meta: (value: object) => {
diff --git a/packages/plots/src/core/index.ts b/packages/plots/src/core/index.ts
index 1fd8b40b5..da580b70f 100644
--- a/packages/plots/src/core/index.ts
+++ b/packages/plots/src/core/index.ts
@@ -1,15 +1,15 @@
export * as G2 from '@antv/g2';
-
+export type { AreaOptions } from './plots/area';
+export type { BarOptions } from './plots/bar';
+export type { ColumnOptions } from './plots/column';
+export type { LineOptions } from './plots/line';
+export type { PieOptions } from './plots/pie';
export * from './types';
-import { Line } from './plots/line';
+import { Area } from './plots/area';
+import { Bar } from './plots/bar';
import { Column } from './plots/column';
+import { Line } from './plots/line';
import { Pie } from './plots/pie';
-import { Area } from './plots/area';
-
-export type { LineOptions } from './plots/line';
-export type { ColumnOptions } from './plots/column';
-export type { PieOptions } from './plots/pie';
-export type { AreaOptions } from './plots/area';
-export const Plots = { Line, Column, Pie, Area };
+export const Plots = { Line, Column, Pie, Area, Bar };
diff --git a/packages/plots/src/core/plots/bar/adaptor.ts b/packages/plots/src/core/plots/bar/adaptor.ts
new file mode 100644
index 000000000..3407852b8
--- /dev/null
+++ b/packages/plots/src/core/plots/bar/adaptor.ts
@@ -0,0 +1,21 @@
+import { mark } from '../../components';
+import type { Adaptor } from '../../types';
+import { flow, transformOptions } from '../../utils';
+import type { BarOptions } from './type';
+
+type Params = Adaptor;
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params) {
+ /**
+ * 图表差异化处理
+ */
+ const init = (params: Params) => {
+ return params;
+ };
+
+ return flow(init, transformOptions, mark)(params);
+}
diff --git a/packages/plots/src/core/plots/bar/index.ts b/packages/plots/src/core/plots/bar/index.ts
new file mode 100644
index 000000000..a72592014
--- /dev/null
+++ b/packages/plots/src/core/plots/bar/index.ts
@@ -0,0 +1,33 @@
+import { Plot } from '../../base';
+import type { Adaptor } from '../../types';
+import { adaptor } from './adaptor';
+import { BarOptions } from './type';
+
+export type { BarOptions };
+
+export class Bar extends Plot
- 
-
-### Flowchart
-
-
-### Relation Graphs
-
-
-
## ✨ Features
- Easy to use
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 953850fac..3b02e246c 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -1,7 +1,7 @@
{
"private": false,
"name": "@ant-design/charts",
- "version": "1.4.2",
+ "version": "2.0.0-alpha.0",
"description": "AntV upper level visual component library",
"bugs": {
"url": "https://github.com/ant-design/ant-design-charts/issues"
@@ -31,9 +31,6 @@
"copy": "node ./scripts/copy.js"
},
"dependencies": {
- "@ant-design/flowchart": "workspace:*",
- "@ant-design/graphs": "workspace:*",
- "@ant-design/maps": "workspace:*",
"@ant-design/plots": "workspace:*"
},
"peerDependencies": {
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
index a1bf6a389..49a0ba5a1 100644
--- a/packages/charts/src/index.ts
+++ b/packages/charts/src/index.ts
@@ -1,6 +1,3 @@
export * from '@ant-design/plots';
-export * from '@ant-design/flowchart';
-export * from '@ant-design/graphs';
-export * from '@ant-design/maps';
-export const version = '1.4.2';
+export const version = '2.0.0-alpha.0';
diff --git a/packages/flowchart/.babelrc b/packages/flowchart/.babelrc
deleted file mode 100644
index 633f93f42..000000000
--- a/packages/flowchart/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": "../../.babelrc"
-}
diff --git a/packages/flowchart/.eslintignore b/packages/flowchart/.eslintignore
deleted file mode 100644
index cc6f6d2b0..000000000
--- a/packages/flowchart/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-dist
-es
-lib
-node_modules
-tests
\ No newline at end of file
diff --git a/packages/flowchart/.eslintrc.js b/packages/flowchart/.eslintrc.js
deleted file mode 100644
index 6a8e85093..000000000
--- a/packages/flowchart/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- extends: '../../.eslintrc.js',
-};
diff --git a/packages/flowchart/CHANGELOG.md b/packages/flowchart/CHANGELOG.md
deleted file mode 100644
index 7282fac7d..000000000
--- a/packages/flowchart/CHANGELOG.md
+++ /dev/null
@@ -1,31 +0,0 @@
-## 1.2.2
-
-`2023-01-12`
-
-- 🐞 修复 React18 页面卡死
-- 🔥 新增 `onDelNode、onCopy、onPaste` 方法
-
-## 1.2.1
-
-`2022-08-23`
-
-- 🐞 修复流程图 `canvasProps.config` 配置无效
-
-## 1.2.0
-
-`2022-08-16`
-
-- 🔥 新增 canvasProps.showPortsOnNodeSelected 属性，支持选中节点时连线
-- 🔥 新增 canvasProps.edgeConfig 属性，支持默认连线配置
-
-## 1.1.9
-
-`2022-07-26`
-
-- 🐞 [新建边无反应](https://github.com/ant-design/ant-design-charts/issues/1455)
-
-## 1.1.8
-
-`2022-07-19`
-
-- 🐞 [Critical security vulnerabilities immer](https://github.com/ant-design/ant-design-charts/issues/1289)
diff --git a/packages/flowchart/README.md b/packages/flowchart/README.md
deleted file mode 100644
index 66c214483..000000000
--- a/packages/flowchart/README.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# @ant-design/flowchart
-
-
-
-## 📜 Document & API
-
-```ts
-export interface FlowchartProps extends FlowchartContainerProps {
- /** 默认数据 */
- data?: Datum;
-
- /** 画布是否自动居中 */
- isAutoCenter?: boolean;
-
- /** 节点面板配置 */
- nodePanelProps?: NodePanelProps;
-
- /** 画布主要区域配置 */
- canvasProps?: CanvasProps;
-
- /**
- * @title 画布状态
- * @description scan 会禁用一些画布事件，例如连线、鼠标右键等
- * @default "edit"
- */
- mode?: 'edit' | 'scan';
-
- /** toolbar */
- toolbarPanelProps?: ToolbarPanelProps;
-
- /** keyBinding */
- keyBindingProps?: false | KeybindingConfig;
-
- /** scale toolbar */
- scaleToolbarPanelProps?: ScaleToolbarPanelProps;
-
- /** form editor */
- detailPanelProps?: DetailPanelProps;
-
- /** 右键菜单配置 */
- contextMenuPanelProps?: ContextMenuPanelProps;
-
- /** popover */
- popoverProps?: PopoverProps;
-
- /** onReady */
- onReady?: (graph: IFlowchartGraph, app: IApplication) => void;
-
- /** 点击回调，仅支持 save-graph-data */
- onSave?: (data: Datum) => void;
-
- /** 新增节点时回调 */
- onAddNode?: (node: NsGraph.INodeConfig) => void;
-
- /** 新增边时回调 */
- onAddEdge?: (edge: NsGraph.IEdgeConfig) => void;
-
- /** xflow app 销毁前的回调 */
- onDestroy?: IAppDestroy;
-
- /** xflow app 初始化后的回调 */
- onConfigReady?: IAppConfigReady;
-
- /** 节点或边更新数据时调用 */
- onConfigChange?: (params: { data: Datum; type: string; config?: NsGraph.INodeConfig | NsGraph.IEdgeConfig }) => void;
-}
-```
-
-## 🤝 How to Contribute
-
-Your contributions are always welcome! Please Do have a look at the [issues](https://github.com/ant-design/ant-design-charts/issues) first.
-
-## 📧 Contact us
-
-DingTalk group number: `44788198 `.
-
-
-
-## License
-
-MIT
diff --git a/packages/flowchart/jest.config.js b/packages/flowchart/jest.config.js
deleted file mode 100644
index 6f8dc6a64..000000000
--- a/packages/flowchart/jest.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { BaseJestConfig, OnlineConfig } = require('../../config/jest');
-module.exports = {
- ...BaseJestConfig,
- ...(process.env.DEBUG_MODE === '1' ? OnlineConfig : {}),
- moduleNameMapper: {
- '^lodash-es$': 'lodash',
- '^.+\\.(css|less)$': 'identity-obj-proxy',
- '@antv/xflow': '
-
-## 1.3.3-beta.3
-
-- 🔥 `FileTreeGraph` 新增 `nodeCfg.lineStyle` 配置
-
-`2022-11-10`
-## 1.3.3-beta.0
-
-`2022-10-17`
-
-- 🔥 新增 `FileTreeGraph`
-
-
-## 1.2.6
-
-`2022-08-23`
-
-- 🐞 修复 `edgeCfg` 透传错误
-
-## 1.2.5
-
-`2022-08-22`
-
-- 🔥 `RadialGraph` 升级，可以动态拓展
-- 🔥 新增 `fetchLoading` 配置，可配合 `asyncData` `getChildren` 等配置做自定义 loading
-- 🐞 完善 `layout` 定义
-
-## 1.2.4
-
-`2022-08-19`
-
-- 🔥 新增 `menuCfg` 配置
-- 🐞 [关系图透传节点配置，支持 image 等节点](https://github.com/ant-design/ant-design-charts/issues/1489)
-
-## 1.2.3
-
-`2022-07-22`
-
-- 🐞 [指标拆解图 fitCenter 设置为 false 时， 树从头节点重新展开](https://github.com/ant-design/ant-design-charts/issues/1441)
-
-## 1.2.2
-
-`2022-07-21`
-
-- 🔥 [来源去向图新增一个异步加载功能](https://github.com/ant-design/ant-design-charts/issues/1437)
diff --git a/packages/graphs/README.md b/packages/graphs/README.md
deleted file mode 100644
index 6f26a6576..000000000
--- a/packages/graphs/README.md
+++ /dev/null
@@ -1,284 +0,0 @@
-# @ant-design/graphs
-
-
- 
- 
-
- 
- 
-
- 
-
- 
- 
-