8000 docs: perfect document for react-lynx-vchart by neuqzxy · Pull Request #2670 · VisActor/VChart · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

docs: perfect document for react-lynx-vchart #2670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 15, 2024
Merged

docs: perfect document for react-lynx-vchart #2670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file 8000
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@visactor/vchart/docs-lynx-vchart_2024-05-13-10-22.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "docs: perfect document for react-lynx-vchart",
"type": "none"
}
],
"packageName": "@visactor/vchart"
}
94 changes: 90 additions & 4 deletions ...ssets/guide/en/tutorial_docs/Cross-terminal_and_Developer_Ecology/react-lynx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,40 @@ onReady is a built-in callback event that is triggered when the chart is rendere

For example, developers can register the callback events that need to be triggered on the chart instance during the first rendering to achieve chart interaction functions.

## `<VChartSimple />` tag with lazy loading

The usage of this tag is similar to `<VChart />`. This tag supports the lazy loading feature of VChart. When using it, you need to configure an additional `vchartConstrouctor` field to pass in the VChart.

```ts
import { VChartSimple } from '@dp/lynx-vchart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';

export default function Demo() {
return (
<view>
<VChartSimple
// vchart核心包
vchartConstrouctor={VChartCore}
width="700rpx"
height="900rpx"
spec={spec}
/>
</view>
);
}
```

Since this tag is a lazy loading tag, you need to register the charts you will use in advance, like:

```ts
import { registerAreaChart } from '@visactor/vchart/esm/chart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';

VChartCore.useRegisters([registerAreaChart]);
```

You can refer to the lazy loading tutorial for specific lazy loading strategies: https://visactor.io/vchart/guide/tutorial_docs/Load_on_Demand

## Theme style

If you use a custom theme in VChart, you can achieve it in two ways, one is to define the theme in spec, and the other is to register the theme through ThemeManager. Because in Lynx-VChart, there is no need to reference the VChart npm package. Therefore, Lynx-VChart exposes the VChart base class, named VChartCore, which is convenient for developers to register custom themes on the VChart base class through static methods.
Expand All @@ -115,10 +149,62 @@ Refer to VChart Theme for VChart theme configuration.

Note that for the case of using VChart on demand, it is recommended to directly call the VChart API to use the theme.

## Event Interaction

The top-level chart component, whether it is the unified chart label (VChart) or the syntax chart label (BarChart, etc.), supports the scene tree event `EventsProps` thrown by the underlying rendering layer on its Props.

The definition of `EventsProps` is as follows:

```ts
interface EventsProps {
onPointerDown?: (e: any) => void | boolean;
onPointerUp?: (e: any) => void | boolean;
onPointerUpOutside?: (e: any) => void | boolean;
onPointerTap?: (e: any) => void | boolean;
onPointerOver?: (e: any) => void | boolean;
onPointerMove?: (e: any) => void | boolean;
onPointerEnter?: (e: any) => void | boolean;
onPointerLeave?: (e: any) => void | boolean;
onPointerOut?: (e: any) => void | boolean;
onMouseDown?: (e: any) => void | boolean;
onMouseUp?: (e: any) => void | boolean;
onMouseUpOutside?: (e: any) => void | boolean;
onMouseMove?: (e: any) => void | boolean;
onMouseOver?: (e: any) => void | boolean;
onMouseOut?: (e: any) => void | boolean;
onMouseEnter?: (e: any) => void | boolean;
onMouseLeave?: (e: any) => void | boolean;
onPinch?: (e: any) => void | boolean;
onPinchStart?: (e: any) => void | boolean;
onPinchEnd?: (e: any) => void | boolean;
onPan?: (e: any) => void | boolean;
onPanStart?: (e: any) => void | boolean;
onPanEnd?: (e: any) => void | boolean;
onDrag?: (e: any) => void | boolean;
onDragStart?: (e: any) => void | boolean;
onDragEnter?: (e: any) => void | boolean;
onDragLeave?: (e: any) => void | boolean;
onDragOver?: (e: any) => void | boolean;
onDragEnd?: (e: any) => void | boolean;
onRightDown?: (e: any) => void | boolean;
onRightUp?: (e: any) => void | boolean;
onRightUpOutside?: (e: any) => void | boolean;
onTouchStart?: (e: any) => void | boolean;
onTouchEnd?: (e: any) => void | boolean;
onTouchEndOutside?: (e: any) => void | boolean;
onTouchMove?: (e: any) => void | boolean;
onTouchCancel?: (e: any) => void | boolean;
onPress?: (e: any) => void | boolean;
onPressUp?: (e: any) => void | boolean;
onPressEnd?: (e: any) => void | boolean;
onSwipe?: (e: any) => void | boolean;
onDrop?: (e: any) => void | boolean;
onWeel?: (e: any) => void | boolean;
onClick?: (e: any) => void | boolean;
onDblClick?: (e: any) => void | boolean;
}
```

## Summary

Through this tutorial, you should have learned how to use VChart to create a simple bar chart in the LynxVChart project. At the same time,

```

```
90 changes: 90 additions & 0 deletions ...ssets/guide/zh/tutorial_docs/Cross-terminal_and_Developer_Ecology/react-lynx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,40 @@ interface VChartProps extends EventsProps {

举例来说，开发者可以在初次渲染时，将需要触发的回调事件注册在图表实例上以实现图表交互功能。

## 按需加载标签 `<VChartSimple />`

该标签的主要使用方法和`<VChart />`类似，该标签支持 VChart 的按需加载功能，使用的时候需要额外配置一个`vchartConstrouctor`字段，将 VChart 传入

```ts
import { VChartSimple } from '@dp/lynx-vchart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';

export default function Demo() {
return (
<view>
<VChartSimple
// vchart核心包
vchartConstrouctor={VChartCore}
width="700rpx"
height="900rpx"
spec={spec}
/>
</view>
);
}
```

同时由于该标签是按需加载标签，所以您需要提前注册将要使用的图表，类似于：

```ts
import { registerAreaChart } from '@visactor/vchart/esm/chart';
import { VChart as VChartCore } from '@visactor/vchart/esm/core';

VChartCore.useRegisters([registerAreaChart]);
```

具体按需加载策略可以参考按需加载教程：https://visactor.io/vchart/guide/tutorial_docs/Load_on_Demand

## 主题样式

如果在 VChart 中使用自定义主题，可以通过两种方式实现，分别是在 spec 中定义 theme，以及通过`ThemeManager`注册主题。因为在 Lynx-VChart 中，并不需要引用 VChart 的 npm 包。因此 Lynx-VChart 中透出了 VChart 基类，命名为`VChartCore`，方便开发者在 VChart 的基类上通过静态方法注册自定义主题。
Expand All @@ -117,6 +151,62 @@ VChart 的主题配置请参考[VChart 主题](https://visactor.io/vchart/guide/

注意，对于按需使用 VChart 的情况，建议直接调用 VChart API 使用主题

## 事件交互

统一图表标签（VChart）或是语法化图表标签（BarChart 等）最外层图表组件，其 Props 上都支持底层渲染层抛出的场景树事件 `EventsProps`。

`EventsProps` 的定义如下：

```ts
interface EventsProps {
onPointerDown?: (e: any) => void | boolean;
onPointerUp?: (e: any) => void | boolean;
onPointerUpOutside?: (e: any) => void | boolean;
onPointerTap?: (e: any) => void | boolean;
onPointerOver?: (e: any) => void | boolean;
onPointerMove?: (e: any) => void | boolean;
onPointerEnter?: (e: any) => void | boolean;
onPointerLeave?: (e: any) => void | boolean;
onPointerOut?: (e: any) => void | boolean;
onMouseDown?: (e: any) => void | boolean;
onMouseUp?: (e: any) => void | boolean;
onMouseUpOutside?: (e: any) => void | boolean;
onMouseMove?: (e: any) => void | boolean;
onMouseOver?: (e: any) => void | boolean;
onMouseOut?: (e: any) => void | boolean;
onMouseEnter?: (e: any) => void | boolean;
onMouseLeave?: (e: any) => void | boolean;
onPinch?: 83FF (e: any) => void | boolean;
onPinchStart?: (e: any) => void | boolean;
onPinchEnd?: (e: any) => void | boolean;
onPan?: (e: any) => void | boolean;
onPanStart?: (e: any) => void | boolean;
onPanEnd?: (e: any) => void | boolean;
onDrag?: (e: any) => void | boolean;
onDragStart?: (e: any) => void | boolean;
onDragEnter?: (e: any) => void | boolean;
onDragLeave?: (e: any) => void | boolean;
onDragOver?: (e: any) => void | boolean;
onDragEnd?: (e: any) => void | boolean;
onRightDown?: (e: any) => void | boolean;
onRightUp?: (e: any) => void | boolean;
onRightUpOutside?: (e: any) => void | boolean;
onTouchStart?: (e: any) => void | boolean;
onTouchEnd?: (e: any) => void | boolean;
onTouchEndOutside?: (e: any) => void | boolean;
onTouchMove?: (e: any) => void | boolean;
onTouchCancel?: (e: any) => void | boolean;
onPress?: (e: any) => void | boolean;
onPressUp?: (e: any) => void | boolean;
onPressEnd?: (e: any) => void | boolean;
onSwipe?: (e: any) => void | boolean;
onDrop?: (e: any) => void | boolean;
onWeel?: (e: any) => void | boolean;
onClick?: (e: any) => void | boolean;
onDblClick?: (e: any) => void | boolean;
}
```

## 总结

通过本教程，你应该已经学会了如何在 LynxVChart 项目中使用 VChart 图表创建一个简单的柱状图。同时，你还了解了如何根据需求配置图表，以满足项目中不同的场景。VChart 提供了丰富的配置选项和组件，相信你在实际项目中会更好地掌握它们的使用，并发挥出更大的作用。希望你能在项目中愉快地使用 VChart 表库！
0