diff --git a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VChart.md b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VChart.md index 9d0b95c32d..25434b3ec3 100644 --- a/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VChart.md +++ b/docs/assets/guide/en/tutorial_docs/Basic/How_to_Import_VChart.md @@ -128,29 +128,42 @@ vchart.renderSync(); ## Import on demand -`@visactor/vchart` provides all VChart functionality by default. If your project has strong requirements for code size, you can also import the relevant charts and components on demand. Let's take a bar chart as an example to demonstrate how to import on demand: +`@visactor/vchart` provides all VChart functionality by default. If your project has strong requirements for code size, you can also import the relevant charts and components on demand. +VChart supports on-demand loading through tree-shaking optimization to reduce the bundle size. If you have not turned off the tree-shaking optimization of your bundle tool, you can register the charts and components you need as shown like the example below: + +```ts +// Import the VChart core module +import { VChart } from '@visactor/vchart'; +// Import bar chart register +import { registerBarChart } from '@visactor/vchart'; +// Import Tooltip, CrossHair components +import { registerTooltip, registerCartesianCrossHair, registerDomTooltipHandler } from '@visactor/vchart'; + +// Register +VChart.useRegisters([registerBarChart, registerTooltip, registerDomTooltipHandler, registerCartesianCrossHair]); +``` + +If the tree-shaking optimization of your bundle tool is turned off, you need to manually import the internal files from `@visactor/vchart/esm/xxx`, such as `@visactor/vchart/esm/core` or `@visactor/vchart/esm/component`, etc. The usage is as follows: ```ts // Import the VChart core module import { VChart } from '@visactor/vchart/esm/core'; // Import bar chart register import { registerBarChart } from '@visactor/vchart/esm/chart'; -// Import Cartesian axes, Tooltip, CrossHair components' registers -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} from '@visactor/vchart/esm/component'; -// Import cross-environment code, here we only load code for browser +// Import Tooltip, CrossHair components +import { registerTooltip, registerCartesianCrossHair } from '@visactor/vchart/esm/component'; +// Import dom tooltip plugin +import { registerDomTooltipHandler } from '@visactor/vchart/esm/plugin'; +// Import WeChat environment code +import { registerWXEnv } from '@visactor/vchart/esm/env'; // Register VChart.useRegisters([ registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, registerTooltip, - registerCartesianCrossHair + registerCartesianCrossHair, + registerDomTooltipHandler, + registerWXEnv ]); ``` @@ -158,33 +171,8 @@ VChart provides support for browser and node environments by default. If your pr For example, when using in WeChat Mini Program, you need to call `registerWXEnv`: ```ts -import { registerWXEnv } from '@visactor/vchart/esm/env'; +import { registerWXEnv } from '@visactor/vchart'; VChart.useRegisters([registerWXEnv]); ``` -Note that if your project uses cjs (commonJS), please import from the `@visactor/vchart/cjs` directory as follows: - -```js -// Import the VChart core module -const { VChart } = require('@visactor/vchart/cjs/core'); -// Import bar chart register -const { registerBarChart } = require('@visactor/vchart/cjs/chart'); -// Import Cartesian axes, Tooltip, CrossHair components' registers -const { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} = require('@visactor/vchart/cjs/component'); - -// Register -VChart.useRegisters([ - registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -]); -``` - You can specifically view the code example: [On-demand import of bar chart](https://codesandbox.io/s/the-example-of-visactor-vcharts-shrinking-bundle-size-4gsdfn). For more detailed instructions, please refer to the[ Load on Demand Tutorial](/vchart/guide/tutorial_docs/Load_on_Demand) diff --git a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md index f042c4efb2..fe1cd68b78 100644 --- a/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md +++ b/docs/assets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md @@ -411,7 +411,7 @@ If there are components not covered by syntactic tags when using React-VChart, y React-VChart itself supports on-demand loading. When VChart needs to be loaded on demand, it is recommended to use the `` tag, -The `` component and the `` component are used in almost the same way. The only difference is that users need to import the `VChart` constructor class from `@viasctor/vchart/esm/core` and pass it to ``; +The `` component and the `` component are used in almost the same way. The only difference is that users need to import the `VChart` constructor class from `@viasctor/vchart` and pass it to ``; Reference for on-demand import of VChart [related documents](/vchart/guide/tutorial_docs/Load_on_Demand) ```typescript diff --git a/docs/assets/guide/en/tutorial_docs/Load_on_Demand.md b/docs/assets/guide/en/tutorial_docs/Load_on_Demand.md index 4ace5b13d6..e2a342a448 100644 --- a/docs/assets/guide/en/tutorial_docs/Load_on_Demand.md +++ b/docs/assets/guide/en/tutorial_docs/Load_on_Demand.md @@ -6,24 +6,37 @@ ```ts // import VChart core module -import { VChart } from '@visactor/vchart/esm/core'; +import { VChart } from '@visactor/vchart'; // import bar chart -import { registerBarChart } from '@visactor/vchart/esm/chart'; -// import axis, tooltip, crosshair components -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} from '@visactor/vchart/esm/component'; +import { registerBarChart } from '@visactor/vchart'; +// import tooltip, crosshair components +import { registerTooltip, registerDomTooltipHandler, registerCartesianCrossHair } from '@visactor/vchart'; // register chart and components +VChart.useRegisters([registerBarChart, registerTooltip, registerDomTooltipHandler, registerCartesianCrossHair]); +``` + +If the tree-shaking optimization of your bundle tool is turned off, you need to manually import the internal files from `@visactor/vchart/esm/xxx`, such as `@visactor/vchart/esm/core` or `@visactor/vchart/esm/component`, etc. The usage is as follows: + +```ts +// Import the VChart core module +import { VChart } from '@visactor/vchart/esm/core'; +// Import bar chart register +import { registerBarChart } from '@visactor/vchart/esm/chart'; +// Import Tooltip, CrossHair components +import { registerTooltip, registerCartesianCrossHair } from '@visactor/vchart/esm/component'; +// Import dom tooltip plugin +import { registerDomTooltipHandler } from '@visactor/vchart/esm/plugin'; +// Import WeChat environment code +import { registerWXEnv } from '@visactor/vchart/esm/env'; + +// Register VChart.useRegisters([ registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, registerTooltip, - registerCartesianCrossHair + registerCartesianCrossHair, + registerDomTooltipHandler, + registerWXEnv ]); ``` @@ -31,7 +44,7 @@ VChart.useRegisters([ When you import VChart in the following way, you get an constructor that only contains the core logic.Which **does not include any charts, components, plugins, or environment compatibility**. Users need to manually import the relevant charts and components, and register them. -> `import { VChart } from '@visactor/vchart/esm/core'` +> `import { VChart } from '@visactor/vchart'` The options for registration usually include: @@ -49,51 +62,289 @@ This document will explain the rules for component import in as much detail as p VChart currently supports 20+ [chart types](/vchart/guide/tutorial_docs/Chart_Types/chart_types), which can be imported as follows: -> `import { registerBarChart } from '@visactor/vchart/esm/chart';` +> `import { registerBarChart } from '@visactor/vchart';` + +#### How to import combination charts + +A combination chart refers to a chart with type: 'common' in the chart configuration, usually using multiple data series and multiple visual elements, such as line series, bar series, area series, scatter series, pie series, etc., to present various types of data. It is most commonly used to draw dual-axis charts and bar-line combination charts. For a detailed introduction, please refer to the[Combination Chart Tutorial.](vchart/guide/tutorial_docs/Chart_Types/Combination) + +When introducing as needed, you need to introduce the Common chart and register the series that will be used: + +```ts +import { registerCommonChart, registerBarSeries, registerLineSeries } from '@visactor/vchart'; + +VChart.useRegisters([registerCommonChart, registerBarSeries, registerLineSeries]); +``` + +For a list of series register methods, please refer to Appendix I at the end of the document. ### How to import components Users can understand the forms of various functional components in the chart through the related content of [Chart Concepts](/vchart/guide/tutorial_docs/Chart_Concepts/Understanding_VChart) in the tutorial documents, so as to better choose the required components. -For the following Cartesian coordinate system charts, it is **necessary to import the cartesian coordinate system [axes](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)** for the calculation of data-to-graphic position mapping. +For the following Cartesian coordinate system charts, **the cartesian coordinate system [axes](/vchart/guide/tutorial_docs/Chart_Concepts/Axes) will be registered by default** for the calculation of data-to-graphic position mapping. > Line chart, area chart, bar chart, histogram, scatter, heatmap, boxplot, waterfall, intervalBar chart, intervalArea chart, linearProgress chart -Usually, importing the continuous axis (`registerCartesianLinearAxis`) and the discrete axis (`registerCartesianBandAxis`) is enough to meet most needs. If you need to use the logarithmic axis (`registerCartesianLogAxis`) or the time axis (`registerCartesianTimeAxis`), you need to load them separately. +Usually, linear axis (`registerCartesianLinearAxis`) and the band axis (`registerCartesianBandAxis`) is enough to meet most needs. If you need to use the logarithmic axis (`registerCartesianLogAxis`) or the time axis (`registerCartesianTimeAxis`), you need to load them separately. ```ts -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerCartesianCrossHair, - registerCartesianTimeAxis, - registerCartesianLogAxis -} from '@visactor/vchart/esm/component'; +import { registerCartesianTimeAxis, registerCartesianLogAxis } from '@visactor/vchart'; VChart.useRegisters([ - registerCartesianLinearAxis, // Required - registerCartesianBandAxis, // Required registerCartesianTimeAxis, // Optional registerCartesianLogAxis // Optional ]); ``` -For the following polar coordinate system charts, it is **necessary to import the polar coordinate system [axes](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)**. +For the following polar coordinate system charts, **the polar coordinate system [axes](/vchart/guide/tutorial_docs/Chart_Concepts/Axes) will be registered by default**. > Radar chart, rose chart, gauge chart, circularProgress chart, circlePacking chart -You need to import the continuous axis (`registerPolarLinearAxis`) and the discrete axis (`registerPolarBandAxis`). +Other components and their registration methods can be found in Appendix II at the end of the document. -```ts -import { registerPolarLinearAxis, registerPolarBandAxis } from '@visactor/vchart/esm/component'; +#### Supplementary: CustomMark components -VChart.useRegisters([ - registerPolarLinearAxis, // Required - registerPolarBandAxis // Required -]); +CustomMark components, namely the `customMark` and `extensionMark` items in the chart configuration, are usually used to draw supplementary annotations. The usage can be referred to the [Custom Graphic Example.](vchart/examples/custom/series-extension) + +VChart provides more than 10 types of graphics. In the mode of loading as needed, in order to minimize redundant packaging, graphics need to be manually registered. For example: + +```js +import { registerTextMark, registerImageMark } from '@visactor/vchart'; + +VChart.useRegisters([registerTextMark, registerImageMark]); ``` -For other components, you can refer to the following checklist: +Of course, we also provide a method to register all graphics: + +```js +import { registerAllMarks } from '@visactor/vchart'; + +VChart.useRegisters([registerAllMarks]); +``` + +For a specific list of graphics and their registration methods, please refer to Appendix III at the end of the document. + +### How to import plugins + +Taking the [Media Query](/vchart/guide/tutorial_docs/Self-adaption/Media_Query)as an example, it can be imported in the following way: + +> `import { registerMediaQuery } from '@visactor/vchart';` + +## React VChart Load on Demand + +The code of React-VChart itself supports load on demand. When VChart needs to be loaded on demand, you need to use the `` tag. + +The usage of the `` component and the `` component is basically the same. The only difference is that the user needs to import the VChart constructor class from @viasctor/vchart, register the required charts and components according to the description in this article, and pass them to ``. + +```typescript +interface VChartSimpleProps extends EventsProps { + /** chart spec */ + spec: any; + /** chart options */ + options?: ChartOptions; + /** Chart Rendering Completion Event */ + onReady?: (instance: VChart, isInitial: boolean) => void; + /** throw error when chart run into an error */ + onError?: (err: Error) => void; + /** + * Switch to Synchronous Rendering + * + * @since 1.8.3 + **/ + useSyncRender?: boolean; + /** + * When props are updated, skip all function checks, i.e., all functions are considered not updated. + * + * @since 1.6.5 + **/ + skipFunctionDiff?: boolean; + /** + * VChart constructor + * + * @since 1.8.3 + **/ + vchartConstrouctor: IVChartConstructor; +} +``` + +## Load-on-demand in taro-vchart + +> Supported after version 1.10.0 + +Similar to react-vchart, when VChart needs to be loaded on demand, you also need to use the `` tag. + +The usage of the `` component and the `` component is basically the same. The only difference is that the user needs to import the VChart constructor class from @viasctor/vchart, register the required charts and components according to the description in this article, and pass them to ``. + +## Cross-platform Related + +VChart provides support for the browser and node environments by default. If your project needs to run in a mini-program environment, please note to import the mini-program environment code when loading on demand. +For example, when using in WeChat Mini Program, you need to call `registerWXEnv`: + +```ts +import { registerWXEnv } from '@visactor/vchart'; +VChart.useRegisters([registerWXEnv]); +``` + +The environment compatibility registrars currently supported by VChart include: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EnvironmentComponent Registration Method
BrowserregisterBrowserEnv
NoderegisterNodeEnv
WeChat Mini ProgramregisterWXEnv
Lark Mini ProgramregisterLarkEnv
LynxregisterLynxEnv
All of the aboveregisterAllEnv
+ +## Appendix I: List of series registration methods + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeriesSeries Register
BarregisterBarSeries
ArearegisterAreaSeries
LineregisterLineSeries
ScatterregisterScatterSeries
PieregisterPieSeries
MapregisterMapSeries
RadarregisterRadarSeries
Linear ProgressregisterLinearProgressSeries
BoxplotregisterBoxplotSeries
HeatmapregisterHeatmapSeries
RangeArearegisterRangeAreaSeries
RangeColumnregisterRangeColumnSeries
WaterfallregisterWaterfallSeries
Dot in SequenceregisterDotSeries
Link in SequenceregisterLinkSeries
FunnelregisterFunnelSeries
GaugeregisterGaugeSeries
RoseregisterRoseSeries
Circular ProgressregisterCircularProgressSeries
Gauge PointerregisterGaugePointerSeries
SankeyregisterSankeySeries
TreemapregisterTreemapSeries
WordCloudregisterWordCloudSeries
Circle PackingregisterCirclePackingSeries
3d BarregisterBar3dSeries
3d FunnelregisterFunnel3dSeries
3d PieregisterPie3dSeries
3d RangeColumnregisterRangeColumn3dSeries
3d WordCloudregisterWordCloud3dSeries
+ +## Appendix II: List of component registration methods @@ -104,14 +355,14 @@ For other components, you can refer to the following checklist: - - @@ -127,35 +378,35 @@ For other components, you can refer to the following checklist: - - - - - @@ -175,28 +426,28 @@ For other components, you can refer to the following checklist: - - - - @@ -209,134 +460,101 @@ For other components, you can refer to the following checklist: - -
Discrete Legend registerDiscreteLegendDiscrete Legend Illustration
Continuous Legend registerContinuousLegendContinuous Legend Illustration
Crosshair (Cartesian Coordinate System) registerCartesianCrossHairCartesian CrossHair Illustration
Crosshair (Polar Coordinate System) registerPolarCrossHairPolar CrossHair Illustration
Zoom Slider registerDataZoomDataZoom Illustration
Scrollbar registerScrollBarScrollBar Illustration
Label registerLabelLabel Illustration
Mark Line registerMarkLineMarkLine Illustration
Mark Point registerMarkPointMarkPoint Illustration
Mark Area registerMarkAreaMarkArea Illustration
Total Label registerTotalLabelUsually used for stacked charts to display the total stack.
Usually used for stacked charts to display the total stack.
TotalLabel Illustration
Custom Mark registerCustomMarkProvides the ability to extend custom drawing.
Provides the ability to extend custom drawing.
Custom Mark Illustration
Player registerPlayerPlayer Illustration
-### How to import plugins - -Taking the [Media Query](/vchart/guide/tutorial_docs/Self-adaption/Media_Query)as an example, it can be imported in the following way: - -> `import { registerMediaQuery } from '@visactor/vchart/esm/plugin';` - -## React VChart Load on Demand - -The code of React-VChart itself supports load on demand. When VChart needs to be loaded on demand, you need to use the `` tag. - -The usage of the `` component and the `` component is basically the same. The only difference is that the user needs to import the VChart constructor class from @viasctor/vchart/esm/core, register the required charts and components according to the description in this article, and pass them to ``. - -```typescript -interface VChartSimpleProps extends EventsProps { - /** chart spec */ - spec: any; - /** chart options */ - options?: ChartOptions; - /** Chart Rendering Completion Event */ - onReady?: (instance: VChart, isInitial: boolean) => void; - /** throw error when chart run into an error */ - onError?: (err: Error) => void; - /** - * Switch to Synchronous Rendering - * - * @since 1.8.3 - **/ - useSyncRender?: boolean; - /** - * When props are updated, skip all function checks, i.e., all functions are considered not updated. - * - * @since 1.6.5 - **/ - skipFunctionDiff?: boolean; - /** - * VChart constructor - * - * @since 1.8.3 - **/ - vchartConstrouctor: IVChartConstructor; -} -``` - -## taro-vchart 按需加载 - -> Supported after version 1.10.0 - -Similar to react-vchart, when VChart needs to be loaded on demand, you also need to use the `` tag. - -The usage of the `` component and the `` component is basically the same. The only difference is that the user needs to import the VChart constructor class from @viasctor/vchart/esm/core, register the required charts and components according to the description in this article, and pass them to ``. - -## Cross-platform Related - -VChart provides support for the browser and node environments by default. If your project needs to run in a mini-program environment, please note to import the mini-program environment code when loading on demand. -For example, when using in WeChat Mini Program, you need to call `registerWXEnv`: - -```ts -import { registerWXEnv } from '@visactor/vchart/esm/env'; -VChart.useRegisters([registerWXEnv]); -``` - -The environment compatibility registrars currently supported by VChart include: +## Appendix III: List of graphic registration methods - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EnvironmentComponent Registration Method
BrowserregisterBrowserEnv
NoderegisterNodeEnv
WeChat Mini ProgramregisterWXEnv
Lark Mini ProgramregisterLarkEnv
LynxregisterLynxEnv
All of the aboveregisterAllEnv
MarkMark RegisterScene Illustration
SymbolregisterSymbolMarkSymbol mark is used to draw specific shapes such as circles and rectangles, and can create visualization effects like scatter plots.Support :
1. Built-In shapes,Please refer toexample
Built-In Symbol Illustration
2. svg path
SVG Symbol Illustration
TextregisterTextMarkext mark is used to draw text and can create visualization effects such as labels and titles. Text mark supports both regular text and rich text.
1. Regular text
text Illustration
2. Richtext, Please refer toexample
RichText Illustration
RectangleregisterRectMarkRectangle mark is used to draw rectangles and can create visualization effects such as bar charts. Please refer toexample
Rect Mark Illustration
ImageregisterImageMarkImage mark is used to insert images in visualization scenes, creating visualization effects such as backgrounds and icons. Please refer toexample
Image Mark Illustration
PolygonregisterPolygonMarkPolygon mark is used to draw polygons and can create visualization effects such as funnel charts and convex hulls. Please refer toexample
Polygon Mark Illustration
ArcregisterArcMarkArc mark s used to draw arcs and can create visualization effects such as pie charts and ring charts. Please refer toexample
Arc Mark Illustration
GroupregisterGroupMarkGroup mark are used to group multiple primitives for unified operations such as scaling and translation. It should be noted that group mark is different from other basic marks and do not support data mapping. A declared Group Mark can only correspond to a single final group graphic element. Please refer toexample
LineregisterLineMarkLine mark is used to draw lines and can create visualization effects such as line charts.
RuleregisterRuleMarkRule mark is used to draw straight lines and can create visualization effects such as guide lines and reference lines.
ArearegisterAreaMarkArea mark is used to draw areas between closed curves and coordinate axes, creating visualization effects such as area charts.
PathregisterPathMarkPath mark is used to draw arbitrary shapes of paths, creating visualization effects such as custom shapes and geographic trajectories.
RippleregisterRippleMarkRipplePoint is a point glyph with a ripple effect, typically used to emphasize a specific data point or indicate data changes at a specific location. In map visualization and time series analysis, RipplePoint glyphs can express the spatial distribution of data and the dynamic process of data change. Application scenarios include showing the spread of earthquakes, epidemics, news events, etc.
3D RectangleregisterRect3dMark3D rectangle mark is used to draw cuboids and can create visualization effects such as bar charts in 3D visualizations.
3D ArcregisterRect3dMark3D arc mark is used to draw cylinders and can create visualization effects such as pie charts and ring charts in 3D visualizations.
3D Pyramid registerPyramid3dMark3D pyramid marks is used to draw pyramid-shaped hexahedrons and can create visualization effects such as funnel charts in 3D visualizations.
- -Please note that if your project uses cjs (commonJS), please import from the @visactor/vchart/cjs directory, as follows: - -```js -// import VChart core module -const { VChart } = require('@visactor/vchart/cjs/core'); -// import bar chart -const { registerBarChart } = require('@visactor/vchart/cjs/chart'); -// import axis, tooltip, crosshair components -const { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} = require('@visactor/vchart/cjs/component'); - -// register chart and components -VChart.useRegisters([ - registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -]); -``` +```` diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VChart.md b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VChart.md index 71adde1ddd..2f7bbfbdbd 100644 --- a/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VChart.md +++ b/docs/assets/guide/zh/tutorial_docs/Basic/How_to_Import_VChart.md @@ -128,7 +128,22 @@ vchart.renderSync(); ## 按需引入 -`@visactor/vchart` 默认提供的是 VChart 所有的功能，如果你的项目对代码的体积有强要求的话，也可以按需引入相关的图表及组件。下面我们以一个柱图为例介绍按需引用的方法： +`@visactor/vchart` 默认提供的是 VChart 所有的功能，如果你的项目对代码的体积有强要求的话，也可以按需引入相关的图表及组件。 +VChart 核心是通过 tree-shaking 支持按需加载，以减少加载的代码量。如果在你的项目中，没有关闭打包软件的 tree-shaking 优化，你可以像下面的示例一样注册你需要的图表和组件： + +```ts +// 引入 VChart 核心模块 +import { VChart } from '@visactor/vchart'; +// 引入柱状图 +import { registerBarChart } from '@visactor/vchart'; +// 引入坐标轴、Tooltip、CrossHair组件 +import { registerTooltip, registerCartesianCrossHair, registerDomTooltipHandler } from '@visactor/vchart'; + +// 注册图表和组件 +VChart.useRegisters([registerBarChart, registerTooltip, registerDomTooltipHandler, registerCartesianCrossHair]); +``` + +如果关闭了打包软件的 tree-shaking 优化，则需要手动引入内部文件 `@visactor/vchart/esm/xxx`，如`@visactor/vchart/esm/core`或`@visactor/vchart/esm/component`等，使用方法如下所示： ```ts // 引入 VChart 核心模块 @@ -136,20 +151,19 @@ import { VChart } from '@visactor/vchart/esm/core'; // 引入柱状图 import { registerBarChart } from '@visactor/vchart/esm/chart'; // 引入坐标轴、Tooltip、CrossHair组件 -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} from '@visactor/vchart/esm/component'; +import { registerTooltip, registerCartesianCrossHair } from '@visactor/vchart/esm/component'; +// 引入 Dom tooltip 逻辑 +import { registerDomTooltipHandler } from '@visactor/vchart/esm/plugin'; +// 引入微信小程序环境代码 +import { registerWXEnv } from '@visactor/vchart/esm/env'; // 注册图表和组件 VChart.useRegisters([ registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, registerTooltip, - registerCartesianCrossHair + registerCartesianCrossHair, + registerDomTooltipHandler, + registerWXEnv ]); ``` @@ -157,33 +171,8 @@ VChart 默认对浏览器和 node 环境提供了支持。如果你的项目需 例如，在微信小程序中使用时，需要调用 `registerWXEnv`： ```ts -import { registerWXEnv } from '@visactor/vchart/esm/env'; +import { registerWXEnv } from '@visactor/vchart'; VChart.useRegisters([registerWXEnv]); ``` -注意如果你的项目使用的是 cjs(commonJS) 的话，请从 `@visactor/vchart/cjs` 目录下引用，如下： - -```js -// 引入 VChart 核心模块 -const { VChart } = require('@visactor/vchart/cjs/core'); -// 引入柱状图 -const { registerBarChart } = require('@visactor/vchart/cjs/chart'); -// 引入坐标轴、Tooltip、CrossHair组件 -const { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} = require('@visactor/vchart/cjs/component'); - -// 注册 -VChart.useRegisters([ - registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -]); -``` - 具体可以查看代码示例：[按需引入柱状图](https://codesandbox.io/s/the-example-of-visactor-vcharts-shrinking-bundle-size-4gsdfn)，更详细说明请参考[按需加载教程](/vchart/guide/tutorial_docs/Load_on_Demand) diff --git a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md index 7af79cf523..ad17af1410 100644 --- a/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md +++ b/docs/assets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react.md @@ -419,7 +419,7 @@ export default MyChart; React-VChart 本身代码都支持按需加载，当需要 VChart 按需加载的时候，建议使用 `` 标签， -``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart/esm/core` 引用 `VChart` 构造类，并传入给 ``; +``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart` 引用 `VChart` 构造类，并传入给 ``; VChart 按需引用参考[相关文档](/vchart/guide/tutorial_docs/Load_on_Demand) ```typescript diff --git a/docs/assets/guide/zh/tutorial_docs/Load_on_Demand.md b/docs/assets/guide/zh/tutorial_docs/Load_on_Demand.md index 178f05004e..18be6bb4c6 100644 --- a/docs/assets/guide/zh/tutorial_docs/Load_on_Demand.md +++ b/docs/assets/guide/zh/tutorial_docs/Load_on_Demand.md @@ -6,24 +6,37 @@ ```ts // 引入 VChart 核心模块 -import { VChart } from '@visactor/vchart/esm/core'; +import { VChart } from '@visactor/vchart'; // 引入柱状图 -import { registerBarChart } from '@visactor/vchart/esm/chart'; +import { registerBarChart } from '@visactor/vchart'; // 引入坐标轴、提示信息、十字准星组件 -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} from '@visactor/vchart/esm/component'; +import { registerTooltip, registerCartesianCrossHair, registerDomTooltipHandler } from '@visactor/vchart'; // 注册柱状图和组件 +VChart.useRegisters([registerBarChart, registerTooltip, registerDomTooltipHandler, registerCartesianCrossHair]); +``` + +如果你的项目中关闭了打包软件的 tree-shaking 优化，则需要手动引入内部文件 `@visactor/vchart/esm/xxx`，如`@visactor/vchart/esm/core`或`@visactor/vchart/esm/component`等，使用方法如下所示： + +```ts +// 引入 VChart 核心模块 +import { VChart } from '@visactor/vchart/esm/core'; +// 引入柱状图 +import { registerBarChart } from '@visactor/vchart/esm/chart'; +// 引入坐标轴、Tooltip、CrossHair组件 +import { registerTooltip, registerCartesianCrossHair } from '@visactor/vchart/esm/component'; +// 引入 Dom tooltip 逻辑 +import { registerDomTooltipHandler } from '@visactor/vchart/esm/plugin'; +// 引入微信小程序环境代码 +import { registerWXEnv } from '@visactor/vchart/esm/env'; + +// 注册图表和组件 VChart.useRegisters([ registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, registerTooltip, - registerCartesianCrossHair + registerCartesianCrossHair, + registerDomTooltipHandler, + registerWXEnv ]); ``` @@ -31,7 +44,7 @@ VChart.useRegisters([ 当你通过下面的方式引入 VChart，得到的是一个只有核心逻辑，**不包含任何图表、组件、插件、环境兼容**的对象。用户需要手动引入相关图表、组件，并进行注册。 -> `import { VChart } from '@visactor/vchart/esm/core'` +> `import { VChart } from '@visactor/vchart'` 可以的选择注册内容通常包括： @@ -49,51 +62,286 @@ VChart.useRegisters([ VChart 目前支持 20+ 种[图表类型](/vchart/guide/tutorial_docs/Chart_Types/chart_types)，可以通过如下方式引入： -> `import { registerBarChart } from '@visactor/vchart/esm/chart';` +> `import { registerBarChart } from '@visactor/vchart;` + +#### 如何引入组合图表 + +组合图是指图表配置中 `type: 'common'` 的图表，通常使用多个数据系列和多个视觉元素，如折线系列、柱状系列、面积系列、散点系列、饼系列等，以呈现各种类型的数据。最常用于绘制双轴图、柱线组合图，详细介绍可以参考[组合图教程](vchart/guide/tutorial_docs/Chart_Types/Combination)。 + +按需引入时，需要引入 Common 图表，同时按需注册将要用到的系列： + +```ts +import { registerCommonChart, registerBarSeries, registerLineSeries } from '@visactor/vchart'; + +VChart.useRegisters([registerCommonChart, registerBarSeries, registerLineSeries]); +``` + +系列注册方法列表，请参考文末附录一。 ### 如何引入组件 用户可以通过教程文档中的[图表概念](/vchart/guide/tutorial_docs/Chart_Concepts/Understanding_VChart)相关内容，了解在图表中，各个功能组件的名词和形式，从而更好地选择所需的组件。 -对于下列笛卡尔坐标系图表而言，**必须引入直角坐标系[坐标轴](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)**，用于数据到图形位置的映射计算。 +对于下列笛卡尔坐标系图表而言，**默认引入了直角坐标系[坐标轴](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)**，用于数据到图形位置的映射计算。 > 折线图、面积图、柱状图/条形图、直方图、散点图、热力图、箱型图、瀑布图、区间柱状图、区间面积图、条形进度图 -通常，引入连续轴（`registerCartesianLinearAxis`）和离散轴（`registerCartesianBandAxis`）足以满足大部分需求。如果你需要使用到对数轴（`registerCartesianLogAxis`）、时间轴（`registerCartesianTimeAxis`），则需要额外加载。 +通常，连续轴（`registerCartesianLinearAxis`）和离散轴（`registerCartesianBandAxis`）足以满足大部分需求。如果你需要使用到对数轴（`registerCartesianLogAxis`）、时间轴（`registerCartesianTimeAxis`），则需要手动注册。 -```ts -import { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerCartesianCrossHair, - registerCartesianTimeAxis, - registerCartesianLogAxis -} from '@visactor/vchart/esm/component'; +```js +import { registerCartesianTimeAxis, registerCartesianLogAxis } from '@visactor/vchart'; -VChart.useRegisters([ - registerCartesianLinearAxis, // 必选 - registerCartesianBandAxis, // 必选 - registerCartesianTimeAxis, // 非必选 - registerCartesianLogAxis // 非必选 -]); +VChart.useRegisters([registerCartesianTimeAxis, registerCartesianLogAxis]); ``` -对于下列极坐标系图表而言，**必须引入极坐标系[坐标轴](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)**。 +对于下列极坐标系图表而言，**默认引了入极坐标系[坐标轴](/vchart/guide/tutorial_docs/Chart_Concepts/Axes)**。 > 雷达图、玫瑰图、仪表盘图、环形进度图、嵌套圆图 -需要引入连续轴（`registerPolarLinearAxis`）和离散轴（`registerPolarBandAxis`）。 +其他组件及其注册方法可以文末附录二。 -```ts -import { registerPolarLinearAxis, registerPolarBandAxis } from '@visactor/vchart/esm/component'; +#### 补充说明：自定义图元组件 -VChart.useRegisters([ - registerPolarLinearAxis, // 必选 - registerPolarBandAxis // 必选 -]); +自定义图元组件，即图表配置项中的 `customMark` 和 `extensionMark` 项，通常用于绘制补充注解，用法可以参考[自定义图元示例](vchart/examples/custom/series-extension)。 + +VChart 提供了 10+ 种自定义图元，在按需加载的模式下，为了尽可能减少冗余打包，图元需要手动注册。例如： + +```js +import { registerTextMark, registerImageMark } from '@visactor/vchart'; + +VChart.useRegisters([registerTextMark, registerImageMark]); +``` + +当然，我们也提供了注册所有图元的方法，请酌情使用： + +```js +import { registerAllMarks } from '@visactor/vchart'; + +VChart.useRegisters([registerAllMarks]); +``` + +具体的图元及其注册方法列表请参考文末附录三。 + +### 如何引入插件 + +以[媒体查询器](/vchart/guide/tutorial_docs/Self-adaption/Media_Query)为例，可以通过如下方式引入： + +> `import { registerMediaQuery } from '@visactor/vchart';` + +## react-vchart 按需加载 + +React-VChart 本身代码都支持按需加载，当需要 VChart 按需加载的时候，需要使用 `` 标签。 + +``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart` 引用 `VChart` 构造类，根据本文描述，注册需要的图表和组件，并传入给 ``; + +```typescript +interface VChartSimpleProps extends EventsProps { + /** 图表定义 */ + spec: any; + /** 图表配置 */ + options?: ChartOptions; + /** 图表渲染完成事件 */ + onReady?: (instance: VChart, isInitial: boolean) => void; + /** throw error when chart run into an error */ + onError?: (err: Error) => void; + /** + * 切换到同步渲染 + * + * @since 1.8.3 + **/ + useSyncRender?: boolean; + /** + * props更新的时候，跳过所有函数的检查，即所有的函数都认为没有更新 + * + * @since 1.6.5 + **/ + skipFunctionDiff?: boolean; + /** + * VChart构造类 + * + * @since 1.8.3 + **/ + vchartConstrouctor: IVChartConstructor; +} ``` -其他组件可以参考下面的自查表： +## taro-vchart 按需加载 + +> 自 1.10.0 版本后支持 + +与 react-vchart 类似，当需要 VChart 按需加载的时候，也是需要使用 `` 标签。 + +``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart/esm/core` 引用 `VChart` 构造类，根据本文描述，注册需要的图表和组件，并传入给 ``; + +## 跨端 + +VChart 默认对浏览器和 node 环境提供了支持。如果你的项目需要运行在小程序环境下，按需加载时，请注意引入小程序环境代码。 +例如，在微信小程序中使用时，需要调用 `registerWXEnv`： + +```ts +import { registerWXEnv } from '@visactor/vchart'; +VChart.useRegisters([registerWXEnv]); +``` + +目前 VChart 支持的环境兼容注册器包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
环境组件注册方法
浏览器registerBrowserEnv
NoderegisterNodeEnv
微信小程序registerWXEnv
飞书小程序registerLarkEnv
LynxregisterLynxEnv
以上所有registerAllEnv
+ +## 附录一：系列注册方法列表 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
系列系列注册方法
柱系列registerBarSeries
面积系列registerAreaSeries
线系列registerLineSeries
散点系列registerScatterSeries
饼系列registerPieSeries
地图系列registerMapSeries
雷达图系列registerRadarSeries
条形进度图系列registerLinearProgressSeries
箱型图系列registerBoxplotSeries
热力图系列registerHeatmapSeries
区间面积图系列registerRangeAreaSeries
区间柱图系列registerRangeColumnSeries
瀑布图系列registerWaterfallSeries
时序图点系列registerDotSeries
时序图连线系列registerLinkSeries
漏斗图系列registerFunnelSeries
仪表盘系列registerGaugeSeries
玫瑰图系列registerRoseSeries
环形进度图系列registerCircularProgressSeries
仪表图指针系列registerGaugePointerSeries
桑基图系列registerSankeySeries
矩形树图系列registerTreemapSeries
词云系列registerWordCloudSeries
圆嵌套图系列registerCirclePackingSeries
3d 柱系列registerBar3dSeries
3d 漏斗系列registerFunnel3dSeries
3d 饼系列registerPie3dSeries
3d 区间柱系列registerRangeColumn3dSeries
3d 词云系列registerWordCloud3dSeries
+ +## 附录二：组件注册方法列表 @@ -179,7 +427,7 @@ VChart.useRegisters([ - + @@ -189,121 +437,87 @@ VChart.useRegisters([
自定义图元 registerCustomMark提供自定义绘图的扩展能力。
Custom Mark Illustration		提供自定义绘图的扩展能力。
在按需加载的使用方式下，需要手动注册用到的图元。例如，如果用到文本，则需要注册 text 图元：registerTextMark
下面的教程会详细列举出各图元类型。Custom Mark Illustration
播放器
-### 如何引入插件 - -以[媒体查询器](/vchart/guide/tutorial_docs/Self-adaption/Media_Query)为例，可以通过如下方式引入： - -> `import { registerMediaQuery } from '@visactor/vchart/esm/plugin';` - -## react-vchart 按需加载 - -React-VChart 本身代码都支持按需加载，当需要 VChart 按需加载的时候，需要使用 `` 标签。 - -``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart/esm/core` 引用 `VChart` 构造类，根据本文描述，注册需要的图表和组件，并传入给 ``; - -```typescript -interface VChartSimpleProps extends EventsProps { - /** 图表定义 */ - spec: any; - /** 图表配置 */ - options?: ChartOptions; - /** 图表渲染完成事件 */ - onReady?: (instance: VChart, isInitial: boolean) => void; - /** throw error when chart run into an error */ - onError?: (err: Error) => void; - /** - * 切换到同步渲染 - * - * @since 1.8.3 - **/ - useSyncRender?: boolean; - /** - * props更新的时候，跳过所有函数的检查，即所有的函数都认为没有更新 - * - * @since 1.6.5 - **/ - skipFunctionDiff?: boolean; - /** - * VChart构造类 - * - * @since 1.8.3 - **/ - vchartConstrouctor: IVChartConstructor; -} -``` - -## taro-vchart 按需加载 - -> 自 1.10.0 版本后支持 - -与 react-vchart 类似，当需要 VChart 按需加载的时候，也是需要使用 `` 标签。 - -``组件和``组件使用方法基本完全相同，唯一差异点为，需要用户从 `@viasctor/vchart/esm/core` 引用 `VChart` 构造类，根据本文描述，注册需要的图表和组件，并传入给 ``; - -## 跨端 - -VChart 默认对浏览器和 node 环境提供了支持。如果你的项目需要运行在小程序环境下，按需加载时，请注意引入小程序环境代码。 -例如，在微信小程序中使用时，需要调用 `registerWXEnv`： - -```ts -import { registerWXEnv } from '@visactor/vchart/esm/env'; -VChart.useRegisters([registerWXEnv]); -``` - -目前 VChart 支持的环境兼容注册器包括： +## 附录三：图元注册方法列表 - - + + + - - + + + - - + + + - - + + + - - + + + + + + + + - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
环境组件注册方法图元图元注册方法实际场景示意
浏览器registerBrowserEnv符号registerSymbolMark符号图元用于绘制特定图形，如圆、矩形等。支持:
1. 内置形状，请参考使用示例
Built-In Symbol Illustration
2. svg path
SVG Symbol Illustration
NoderegisterNodeEnv文本registerTextMark文本图元支持常规文本和富文本
1. 常规文本
text Illustration
2. 富文本，请参考使用示例
RichText Illustration
微信小程序registerWXEnv矩形registerRectMark矩形图元用于绘制矩形，可以用来创建柱状图等可视化效果，请参考使用示例
Rect Mark Illustration
飞书小程序registerLarkEnv图像registerImageMark图像图元用于在视化场景中插入图片，可以用来创建背景、图标等可视化效果，请参考使用示例
Image Mark Illustration
多边形registerPolygonMark多边形图元用于绘制（非闭合）多边形，可以用来创建漏斗图、凸包等可视化效果，请参考使用示例
Polygon Mark Illustration
LynxregisterLynxEnv弧形registerArcMark弧形图元用于绘制圆弧，可以用来创建饼图、环形图等可视化效果。请参考使用示例
Arc Mark Illustration
以上所有registerAllEnv分组registerGroupMark分组图元用于对多个图元进行收拢，以便对其进行统一操作，如缩放、平移等。需要注意的是，分组图元与其他基础图元不同，并不支持数据映射，请参考使用示例。
线registerLineMark线图元用于绘制折线，可以用来创建折线图等可视化效果。
连线registerRuleMark主要是用于展示直线，最简单的使用场景就是用于图表中的辅助线的展示。
面积registerAreaMark面积图元用于绘制封闭曲线与坐标轴之间的区域，可以用来创建面积图等可视化效果。
路径registerPathMark路径图元用于绘制任意形状的路径，可以用来创建自定义的图形和地理轨迹等可视化效果。
涟漪点registerRippleMark涟漪点图元是一种具有涟漪效果的点图元，通常用于强调某个特定的数据点或者表示某个位置上的数据变化。在地图可视化、时间序列分析等场景中，涟漪点图元可以表达数据的空间分布、数据变化的动态过程等。使用场景包括表示地震、疫情、新闻事件等的传播过程。
3D 矩形registerRect3dMark三维矩形图元用于绘制长方体，可以用来创建三维可视化中的柱状图等可视化效果。
3D 弧形registerRect3dMark三维弧形图元用于绘制柱体，可以用来创建三维可视化中的饼图、环形图等可视化效果。
3D 金字塔registerPyramid3dMark三维金字塔图元用于绘制金字塔形状的六面体，可以用来创建三维可视化中的漏斗图等可视化效果。
- -注意如果你的项目使用的是 cjs(commonJS) 的话，请从 `@visactor/vchart/cjs` 目录下引用，如下： - -```js -// 引入 VChart 核心模块 -const { VChart } = require('@visactor/vchart/cjs/core'); -// 引入柱状图 -const { registerBarChart } = require('@visactor/vchart/cjs/chart'); -// 引入坐标轴、Tooltip、CrossHair组件 -const { - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -} = require('@visactor/vchart/cjs/component'); - -// 注册 -VChart.useRegisters([ - registerBarChart, - registerCartesianLinearAxis, - registerCartesianBandAxis, - registerTooltip, - registerCartesianCrossHair -]); -``` diff --git a/packages/vchart/src/chart/index.ts b/packages/vchart/src/chart/index.ts index a740911bf7..03e11a990a 100644 --- a/packages/vchart/src/chart/index.ts +++ b/packages/vchart/src/chart/index.ts @@ -60,7 +60,13 @@ import { CorrelationChart, registerCorrelationChart } from './correlation'; import type { ILiquidChartSpec } from './liquid'; import { LiquidChart, registerLiquidChart } from './liquid'; import type { IWordCloudChartSpec, IWordCloud3dChartSpec } from './word-cloud'; -import { WordCloudChart, WordCloud3dChart, registerWordCloudChart, registerWordCloud3dChart } from './word-cloud'; +import { + WordCloudChart, + WordCloud3dChart, + registerWordCloudChart, + registerWordCloudShapeChart, + registerWordCloud3dChart +} from './word-cloud'; import { BaseChart } from './base/base-chart'; import type { ICartesianChartSpec } from './cartesian'; import type { IPolarChartSpec } from './polar'; @@ -134,7 +140,8 @@ export { registerWordCloud3dChart, registerWordCloudChart, registerCorrelationChart, - registerLiquidChart + registerLiquidChart, + registerWordCloudShapeChart }; export type { diff --git a/packages/vchart/src/chart/sequence/sequence.ts b/packages/vchart/src/chart/sequence/sequence.ts index 79e8c10abd..d636a0ae74 100644 --- a/packages/vchart/src/chart/sequence/sequence.ts +++ b/packages/vchart/src/chart/sequence/sequence.ts @@ -9,6 +9,7 @@ import { ChartTypeEnum } from '../interface/type'; import type { ISeriesConstructor, ISeriesOption } from '../../series/interface'; import type { IModelSpecInfo } from '../../model/interface'; import { SequenceChartSpecTransformer } from './sequence-transformer'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export class SequenceChart extends BaseChart { static readonly type: string = ChartTypeEnum.sequence; @@ -61,5 +62,7 @@ export class SequenceChart ex export const registerSequenceChart = () => { registerDotSeries(); registerLinkSeries(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerChart(SequenceChart.type, SequenceChart); }; diff --git a/packages/vchart/src/component/custom-mark/custom-mark.ts b/packages/vchart/src/component/custom-mark/custom-mark.ts index 30142c4516..3a3660920e 100644 --- a/packages/vchart/src/component/custom-mark/custom-mark.ts +++ b/packages/vchart/src/component/custom-mark/custom-mark.ts @@ -207,6 +207,5 @@ export class CustomMark extends BaseComponent { } export const registerCustomMark = () => { - registerImageMark(); Factory.registerComponent(CustomMark.type, CustomMark); }; diff --git a/packages/vchart/src/mark/index.ts b/packages/vchart/src/mark/index.ts index 2f8244f6b3..642523d22c 100644 --- a/packages/vchart/src/mark/index.ts +++ b/packages/vchart/src/mark/index.ts @@ -1,26 +1,27 @@ -/* eslint-disable no-duplicate-imports */ /** * @description export all mark modules */ -import { BoxPlotMark } from './box-plot'; -import { LineMark } from './line'; -import { SymbolMark } from './symbol'; -import { GroupMark } from './group'; -import { RuleMark } from './rule'; -import { TextMark } from './text'; -import { AreaMark } from './area'; -import { RectMark } from './rect'; -import { Rect3dMark } from './rect-3d'; -import { PathMark } from './path'; -import { ArcMark } from './arc'; -import { Arc3dMark } from './arc-3d'; -import { ComponentMark } from './component'; -import { LinkPathMark } from './link-path'; -import { RippleMark } from './ripple'; -import { CellMark } from './cell'; +import { LineMark, registerLineMark } from './line'; +import { SymbolMark, registerSymbolMark } from './symbol'; +import { GroupMark, registerGroupMark } from './group'; +import { RuleMark, registerRuleMark } from './rule'; +import { TextMark, registerTextMark } from './text'; +import { AreaMark, registerAreaMark } from './area'; +import { RectMark, registerRectMark } from './rect'; +import { Rect3dMark, registerRect3dMark } from './rect-3d'; +import { PathMark, registerPathMark } from './path'; +import { ArcMark, registerArcMark } from './arc'; +import { Arc3dMark, registerArc3dMark } from './arc-3d'; +import { ComponentMark, registerComponentMark } from './component'; +import { LinkPathMark, registerLinkPathMark } from './link-path'; +import { RippleMark, registerRippleMark } from './ripple'; +import { CellMark, registerCellMark } from './cell'; import { BaseMark } from './base'; -import { PolygonMark } from './polygon/polygon'; -import { Pyramid3dMark } from './polygon/pyramid-3d'; +import { PolygonMark, registerPolygonMark } from './polygon/polygon'; +import { Pyramid3dMark, registerPyramid3dMark } from './polygon/pyramid-3d'; +import { ImageMark, registerImageMark } from './image'; +import { LiquidMark, registerLiquidMark } from './liquid'; +import { BoxPlotMark, registerBoxPlotMark } from './box-plot'; export type { IBoxPlotMarkSpec, @@ -40,12 +41,12 @@ export type { IPyramid3dMarkSpec, ILinkPathMarkSpec, IRippleMarkSpec, - ConvertToMarkStyleSpec, - ICellMarkSpec + ICellMarkSpec, + ILiquidMarkSpec, + ConvertToMarkStyleSpec } from '../typings/visual'; export { - BoxPlotMark, LineMark, SymbolMark, GroupMark, @@ -60,8 +61,45 @@ export { ComponentMark, PolygonMark, Pyramid3dMark, - LinkPathMark, RippleMark, - CellMark, + ImageMark, BaseMark }; + +export { + registerLineMark, + registerSymbolMark, + registerGroupMark, + registerRuleMark, + registerTextMark, + registerAreaMark, + registerRectMark, + registerRect3dMark, + registerPathMark, + registerArcMark, + registerArc3dMark, + registerPolygonMark, + registerPyramid3dMark, + registerRippleMark, + registerImageMark, + registerComponentMark +}; + +export const registerAllMarks = () => { + registerGroupMark(); + registerLineMark(); + registerSymbolMark(); + registerRuleMark(); + registerTextMark(); + registerAreaMark(); + registerRectMark(); + registerPathMark(); + registerArcMark(); + registerPolygonMark(); + registerImageMark(); + registerRippleMark(); + registerComponentMark(); + registerArc3dMark(); + registerRect3dMark(); + registerPyramid3dMark(); +}; diff --git a/packages/vchart/src/series/area/area.ts b/packages/vchart/src/series/area/area.ts index ccdb50bf43..b8e43f5c18 100644 --- a/packages/vchart/src/series/area/area.ts +++ b/packages/vchart/src/series/area/area.ts @@ -1,5 +1,5 @@ import type { DataView } from '@visactor/vdataset'; -import { isValid, isArray } from '@visactor/vutils'; +import { isArray } from '@visactor/vutils'; /* eslint-disable no-duplicate-imports */ import { LineLikeSeriesMixin } from '../mixin/line-mixin'; import type { IAreaMark } from '../../mark/area'; @@ -26,6 +26,7 @@ import type { IMark } from '../../mark/interface'; import { registerSampleTransform, registerMarkOverlapTransform } from '@visactor/vgrammar-core'; import { AreaSeriesSpecTransformer } from './area-transformer'; import { getGroupAnimationParams } from '../util/utils'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export interface AreaSeries extends Pick< @@ -264,5 +265,7 @@ export const registerAreaSeries = () => { registerAreaMark(); registerSymbolMark(); registerAreaAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(AreaSeries.type, AreaSeries); }; diff --git a/packages/vchart/src/series/bar/bar-3d.ts b/packages/vchart/src/series/bar/bar-3d.ts index 52944547ba..fbfb5b93cc 100644 --- a/packages/vchart/src/series/bar/bar-3d.ts +++ b/packages/vchart/src/series/bar/bar-3d.ts @@ -9,6 +9,7 @@ import type { AdaptiveSpec } from '../../typings'; import { bar3dSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import { registerBar3dAnimation } from './animation'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export class Bar3dSeries extends BarSeries> { static readonly type: string = SeriesTypeEnum.bar3d; @@ -23,5 +24,7 @@ export class Bar3dSeries extends export const registerBar3dSeries = () => { registerBar3dAnimation(); registerRect3dMark(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(Bar3dSeries.type, Bar3dSeries); }; diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index b884bc776d..793ae0a694 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -43,6 +43,7 @@ import { BarSeriesSpecTransformer } from './bar-transformer'; import { ComponentTypeEnum } from '../../component/interface'; import { RECT_X, RECT_X1, RECT_Y, RECT_Y1 } from '../base/constant'; import { createRect } from '@visactor/vrender-core'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export const DefaultBandWidth = 6; // 默认的bandWidth，避免连续轴没有bandWidth @@ -854,5 +855,7 @@ export const registerBarSeries = () => { registerSampleTransform(); registerRectMark(); registerBarAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(BarSeries.type, BarSeries); }; diff --git a/packages/vchart/src/series/box-plot/box-plot.ts b/packages/vchart/src/series/box-plot/box-plot.ts index f3bbb6da7b..777c546ef4 100644 --- a/packages/vchart/src/series/box-plot/box-plot.ts +++ b/packages/vchart/src/series/box-plot/box-plot.ts @@ -22,13 +22,14 @@ import { addDataKey, initKeyMap } from '../../data/transforms/data-key'; import { animationConfig, userAnimationConfig } from '../../animation/utils'; import { registerScaleInOutAnimation } from '../../animation/config'; import type { IMarkAnimateSpec } from '../../animation/spec'; -import { BoxPlotMark, registerBoxPlotMark } from '../../mark/box-plot'; -import { SymbolMark, registerSymbolMark } from '../../mark/symbol'; +import { registerBoxPlotMark } from '../../mark/box-plot'; +import { registerSymbolMark } from '../../mark/symbol'; import { boxPlotSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import type { IMark } from '../../mark/interface'; import { merge, isNumber } from '@visactor/vutils'; import { getGroupAnimationParams } from '../util/utils'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; const DEFAULT_STROKE_WIDTH = 2; const DEFAULT_SHAFT_FILL_OPACITY = 0.5; @@ -402,5 +403,7 @@ export const registerBoxplotSeries = () => { registerBoxPlotMark(); registerSymbolMark(); registerScaleInOutAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(BoxPlotSeries.type, BoxPlotSeries); }; diff --git a/packages/vchart/src/series/gauge/gauge-pointer.ts b/packages/vchart/src/series/gauge/gauge-pointer.ts index 49c4a2c798..6235a1aa90 100644 --- a/packages/vchart/src/series/gauge/gauge-pointer.ts +++ b/packages/vchart/src/series/gauge/gauge-pointer.ts @@ -17,6 +17,7 @@ import { gaugePointerSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import { registerGaugePointerAnimation } from './animation'; import { GaugePointerSeriesSpecTransformer } from './gauge-pointer-transformer'; +import { registerPolarBandAxis, registerPolarLinearAxis } from '../../component/axis/polar'; export class GaugePointerSeries< T extends IGaugePointerSeriesSpec = IGaugePointerSeriesSpec @@ -216,8 +217,10 @@ export class GaugePointerSeries< } export const registerGaugePointerSeries = () => { + Factory.registerSeries(GaugePointerSeries.type, GaugePointerSeries); registerPathMark(); registerRectMark(); registerGaugePointerAnimation(); - Factory.registerSeries(GaugePointerSeries.type, GaugePointerSeries); + registerPolarBandAxis(); + registerPolarLinearAxis(); }; diff --git a/packages/vchart/src/series/gauge/gauge.ts b/packages/vchart/src/series/gauge/gauge.ts index b0cb34f34f..5effa1a1d8 100644 --- a/packages/vchart/src/series/gauge/gauge.ts +++ b/packages/vchart/src/series/gauge/gauge.ts @@ -15,6 +15,7 @@ import { registerProgressLikeAnimation } from '../polar/progress-like'; import type { IMark } from '../../mark/interface'; import { GaugeSeriesSpecTransformer } from './gauge-transformer'; import { registerArcMark, type IArcMark } from '../../mark/arc'; +import { registerPolarLinearAxis } from '../../component/axis/polar'; export class GaugeSeries extends ProgressLikeSeries { static readonly type: string = SeriesTypeEnum.gauge; @@ -177,7 +178,9 @@ export class GaugeSeries extends } export const registerGaugeSeries = () => { + Factory.registerSeries(GaugeSeries.type, GaugeSeries); registerArcMark(); registerProgressLikeAnimation(); - Factory.registerSeries(GaugeSeries.type, GaugeSeries); + // 仪表盘只使用了角度轴 + registerPolarLinearAxis(); }; diff --git a/packages/vchart/src/series/heatmap/heatmap.ts b/packages/vchart/src/series/heatmap/heatmap.ts index e66ba4e6f9..eba00da980 100644 --- a/packages/vchart/src/series/heatmap/heatmap.ts +++ b/packages/vchart/src/series/heatmap/heatmap.ts @@ -21,6 +21,7 @@ import { Factory } from '../../core/factory'; import type { IMark } from '../../mark/interface'; import { getGroupAnimationParams } from '../util/utils'; import { HeatmapSeriesSpecTransformer } from './heatmap-transformer'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export const DefaultBandWidth = 6; // 默认的bandWidth，避免连续轴没有bandWidth @@ -194,5 +195,7 @@ export const registerHeatmapSeries = () => { registerTextMark(); registerCellMark(); registerHeatmapAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(HeatmapSeries.type, HeatmapSeries); }; diff --git a/packages/vchart/src/series/line/line.ts b/packages/vchart/src/series/line/line.ts index 699fa31002..52d7708e63 100644 --- a/packages/vchart/src/series/line/line.ts +++ b/packages/vchart/src/series/line/line.ts @@ -18,6 +18,7 @@ import type { IMark } from '../../mark/interface'; import { registerSampleTransform, registerMarkOverlapTransform } from '@visactor/vgrammar-core'; import { LineLikeSeriesSpecTransformer } from '../mixin/line-mixin-transformer'; import { getGroupAnimationParams } from '../util/utils'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export interface LineSeries extends Pick< @@ -130,5 +131,7 @@ export const registerLineSeries = () => { registerSymbolMark(); registerLineAnimation(); registerScaleInOutAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(LineSeries.type, LineSeries); }; diff --git a/packages/vchart/src/series/link/link.ts b/packages/vchart/src/series/link/link.ts index 8f52f323b6..4430e93e59 100644 --- a/packages/vchart/src/series/link/link.ts +++ b/packages/vchart/src/series/link/link.ts @@ -11,14 +11,15 @@ import type { ISymbolMark } from '../../mark/symbol'; import type { IDotSeriesSpec } from '../dot/interface'; import type { IGroupMark } from '../../mark/group'; import { LinkSeriesTooltipHelper } from './tooltip-helper'; -import type { ILinkSeriesSpec, ILinkSeriesTheme } from './interface'; +import type { ILinkSeriesSpec } from './interface'; import type { SeriesMarkMap } from '../interface'; -import { RuleMark, registerRuleMark } from '../../mark/rule'; -import { SymbolMark, registerSymbolMark } from '../../mark/symbol'; +import { registerRuleMark } from '../../mark/rule'; +import { registerSymbolMark } from '../../mark/symbol'; import { linkSeriesMark } from './constant'; import { linkDotInfo } from '../../data/transforms/link-dot-info'; import { Factory } from '../../core/factory'; import { TransformLevel } from '../../data/initialize'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export class LinkSeries extends CartesianSeries { static readonly type: string = SeriesTypeEnum.link; @@ -369,5 +370,7 @@ export class LinkSeries extends Car export const registerLinkSeries = () => { registerRuleMark(); registerSymbolMark(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(LinkSeries.type, LinkSeries); }; diff --git a/packages/vchart/src/series/progress/circular/circular.ts b/packages/vchart/src/series/progress/circular/circular.ts index b2be5c7087..47344dcfdb 100644 --- a/packages/vchart/src/series/progress/circular/circular.ts +++ b/packages/vchart/src/series/progress/circular/circular.ts @@ -17,6 +17,7 @@ import { registerProgressLikeAnimation } from '../../polar/progress-like'; import { registerFadeInOutAnimation } from '../../../animation/config'; import type { IMark } from '../../../mark/interface'; import { CircularProgressSeriesSpecTransformer } from './circular-transformer'; +import { registerPolarLinearAxis, registerPolarBandAxis } from '../../../component/axis/polar'; export class CircularProgressSeries< T extends ICircularProgressSeriesSpec = ICircularProgressSeriesSpec @@ -206,8 +207,10 @@ export class CircularProgressSeries< } export const registerCircularProgressSeries = () => { + Factory.registerSeries(CircularProgressSeries.type, CircularProgressSeries); registerArcMark(); registerProgressLikeAnimation(); registerFadeInOutAnimation(); - Factory.registerSeries(CircularProgressSeries.type, CircularProgressSeries); + registerPolarBandAxis(); + registerPolarLinearAxis(); }; diff --git a/packages/vchart/src/series/radar/radar.ts b/packages/vchart/src/series/radar/radar.ts index 39f1b8136d..2ccb9ff2b5 100644 --- a/packages/vchart/src/series/radar/radar.ts +++ b/packages/vchart/src/series/radar/radar.ts @@ -22,6 +22,7 @@ import { radarSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import { registerMarkOverlapTransform } from '@visactor/vgrammar-core'; import { LineLikeSeriesSpecTransformer } from '../mixin/line-mixin-transformer'; +import { registerPolarBandAxis, registerPolarLinearAxis } from '../../component/axis/polar'; export interface RadarSeries extends Pick< @@ -225,10 +226,12 @@ export class RadarSeries extends mixin(RadarSeries, LineLikeSeriesMixin); export const registerRadarSeries = () => { + Factory.registerSeries(RadarSeries.type, RadarSeries); registerMarkOverlapTransform(); registerAreaMark(); registerLineMark(); registerSymbolMark(); registerRadarAnimation(); - Factory.registerSeries(RadarSeries.type, RadarSeries); + registerPolarBandAxis(); + registerPolarLinearAxis(); }; diff --git a/packages/vchart/src/series/range-area/range-area.ts b/packages/vchart/src/series/range-area/range-area.ts index 0435ef8328..19fd00f404 100644 --- a/packages/vchart/src/series/range-area/range-area.ts +++ b/packages/vchart/src/series/range-area/range-area.ts @@ -11,6 +11,7 @@ import type { IAreaSeriesSpec } from '../area/interface'; import { rangeAreaSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import { couldBeValidNumber } from '../../util'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export class RangeAreaSeries extends AreaSeries { static readonly type: string = SeriesTypeEnum.rangeArea; @@ -107,5 +108,7 @@ export class RangeAreaSeries extend export const registerRangeAreaSeries = () => { registerAreaMark(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(RangeAreaSeries.type, RangeAreaSeries); }; diff --git a/packages/vchart/src/series/range-column/3d/range-column-3d.ts b/packages/vchart/src/series/range-column/3d/range-column-3d.ts index f261830c9b..59f9419768 100644 --- a/packages/vchart/src/series/range-column/3d/range-column-3d.ts +++ b/packages/vchart/src/series/range-column/3d/range-column-3d.ts @@ -7,6 +7,7 @@ import type { AdaptiveSpec } from '../../../typings'; import type { IRangeColumn3dSeriesSpec } from '../interface'; import { rangeColumn3dSeriesMark } from '../constant'; import { Factory } from '../../../core/factory'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../../component/axis/cartesian'; export const DefaultBandWidth = 6; // 默认的bandWidth，避免连续轴没有bandWidth @@ -22,5 +23,7 @@ export class RangeColumn3dSeries< export const registerRangeColumn3dSeries = () => { registerRect3dMark(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(RangeColumn3dSeries.type, RangeColumn3dSeries); }; diff --git a/packages/vchart/src/series/range-column/range-column.ts b/packages/vchart/src/series/range-column/range-column.ts index 5ce9712f3d..b786edc22e 100644 --- a/packages/vchart/src/series/range-column/range-column.ts +++ b/packages/vchart/src/series/range-column/range-column.ts @@ -26,6 +26,7 @@ import { rangeColumnSeriesMark } from './constant'; import { Factory } from '../../core/factory'; import { getGroupAnimationParams } from '../util/utils'; import { RangeColumnSeriesSpecTransformer } from './range-column-transformer'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export const DefaultBandWidth = 6; // 默认的bandWidth，避免连续轴没有bandWidth @@ -248,5 +249,7 @@ export const registerRangeColumnSeries = () => { registerTextMark(); registerRangeColumnAnimation(); registerFadeInOutAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(RangeColumnSeries.type, RangeColumnSeries); }; diff --git a/packages/vchart/src/series/rose/rose.ts b/packages/vchart/src/series/rose/rose.ts index 62ff5cb8bc..cf216786b6 100644 --- a/packages/vchart/src/series/rose/rose.ts +++ b/packages/vchart/src/series/rose/rose.ts @@ -17,6 +17,7 @@ import { Factory } from '../../core/factory'; import type { IMark } from '../../mark/interface'; import type { ILabelMark } from '../../mark/label'; import { RoseSeriesSpecTransformer } from './rose-transformer'; +import { registerPolarBandAxis, registerPolarLinearAxis } from '../../component/axis/polar'; export const DefaultBandWidth = 0.5; @@ -163,4 +164,6 @@ export const registerRoseSeries = () => { Factory.registerSeries(RoseSeries.type, RoseSeries); registerArcMark(); registerRoseAnimation(); + registerPolarBandAxis(); + registerPolarLinearAxis(); }; diff --git a/packages/vchart/src/series/sankey/sankey.ts b/packages/vchart/src/series/sankey/sankey.ts index 2c23318993..b22039ea69 100644 --- a/packages/vchart/src/series/sankey/sankey.ts +++ b/packages/vchart/src/series/sankey/sankey.ts @@ -6,7 +6,7 @@ import type { IRectMark } from '../../mark/rect'; import type { ILinkPathMark } from '../../mark/link-path'; import type { ITextMark } from '../../mark/text'; import { registerSankeyTransforms } from '@visactor/vgrammar-sankey'; -import type { Datum, IRectMarkSpec, ILinkPathMarkSpec, ITextMarkSpec, IComposedTextMarkSpec } from '../../typings'; +import type { Datum, IRectMarkSpec, ILinkPathMarkSpec, IComposedTextMarkSpec } from '../../typings'; import { animationConfig, userAnimationConfig } from '../../animation/utils'; import { registerFadeInOutAnimation } from '../../animation/config'; import { registerDataSetInstanceTransform } from '../../data/register'; diff --git a/packages/vchart/src/series/scatter/scatter.ts b/packages/vchart/src/series/scatter/scatter.ts index 6f6047c77a..eac309a9f6 100644 --- a/packages/vchart/src/series/scatter/scatter.ts +++ b/packages/vchart/src/series/scatter/scatter.ts @@ -30,6 +30,7 @@ import { Factory } from '../../core/factory'; import type { IMark } from '../../mark/interface'; import { ScatterSeriesSpecTransformer } from './scatter-transformer'; import { getGroupAnimationParams } from '../util/utils'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export class ScatterSeries extends CartesianSeries { static readonly type: string = SeriesTypeEnum.scatter; @@ -414,5 +415,7 @@ export class ScatterSeries ex export const registerScatterSeries = () => { registerSymbolMark(); registerScatterAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(ScatterSeries.type, ScatterSeries); }; diff --git a/packages/vchart/src/series/waterfall/waterfall.ts b/packages/vchart/src/series/waterfall/waterfall.ts index c66b14f81f..2c18f40dbe 100644 --- a/packages/vchart/src/series/waterfall/waterfall.ts +++ b/packages/vchart/src/series/waterfall/waterfall.ts @@ -36,6 +36,7 @@ import { Factory } from '../../core/factory'; import { registerRectMark } from '../../mark/rect'; import { getGroupAnimationParams } from '../util/utils'; import { WaterfallSeriesSpecTransformer } from './waterfall-transformer'; +import { registerCartesianLinearAxis, registerCartesianBandAxis } from '../../component/axis/cartesian'; export const DefaultBandWidth = 6; // 默认的bandWidth，避免连续轴没有bandWidth @@ -309,5 +310,7 @@ export const registerWaterfallSeries = () => { registerRectMark(); registerWaterfallAnimation(); registerFadeInOutAnimation(); + registerCartesianBandAxis(); + registerCartesianLinearAxis(); Factory.registerSeries(WaterfallSeries.type, WaterfallSeries); }; diff --git a/packages/vchart/src/vchart-all.ts b/packages/vchart/src/vchart-all.ts index 5fd6c49a3b..e8fde0ec06 100644 --- a/packages/vchart/src/vchart-all.ts +++ b/packages/vchart/src/vchart-all.ts @@ -68,6 +68,7 @@ import { registerElementHighlightByGroup, registerElementHighlightByKey } from './interaction'; +import { registerAllMarks } from './mark'; VChart.useRegisters([ // charts @@ -146,6 +147,9 @@ VChart.useRegisters([ registerGridLayout, registerLayout3d, + // mark + registerAllMarks, + // plugin registerDomTooltipHandler, registerCanvasTooltipHandler,