Skip to content

Commit 243cf3f

Browse files
skie1997purpose233
skie1997
authored and
purpose233
committed
chore(docs): path update
1 parent 911726a commit 243cf3f

File tree

115 files changed

+914
-307
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+914
-307
lines changed

‎docs/assets/tutorials/en/animation/advanced-animation.md

+87-2
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID });
102102
vchart.renderAsync();
103103
```
104104

105-
In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./Animation_Types)) to achieve simple animation effects.
105+
In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./defination-of-animtion)) to achieve simple animation effects.
106106

107107
The animation configuration for graphic elements supports multiple properties for detailed control of the animation behavior. Here are the supported attributes for the graphic animation configuration:
108108

@@ -594,4 +594,89 @@ VChart provides animation arrangement configuration based on JSON spec to meet a
594594

595595
A timeline represents the animation performance of a graphic element over a specific period of time. A timeline contains a set of serialized animation fragments (TimeSlice). The timeline describes the animation performance of a graphic element over a period of time. Animations in different timelines can be executed in parallel. The timeline can also be set with `loop: true` to loop the configured animation effects.
596596

597-
![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca
597+
![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca)
598+
599+
### Timeslice
600+
601+
In a timeline, each time slice is executed serially, and the constituent elements in a time slice include:
602+
- `effect`: The specific execution effect of the animation, which describes the specific interpolation calculation logic of the visual channel attributes of the primitive. Effects can be encapsulated specific animation effects, or animation configurations configured by developers to start and end states, and describe the calculation logic of animation attribute interpolation. Each timeSlice can be configured with multiple `effect`;
603+
- `duration`: the execution duration of animation slices;
604+
- `delay`: the waiting time before the execution of the animation slice;
605+
606+
### Animation Effect (Effect)
607+
The constituent elements in animation effects (Effect) include:
608+
- `channel`: the changed visual channel attribute, which describes the visual channel attribute when the interpolation calculation starts and ends;
609+
- `easing`: easing strategy for difference calculation;
610+
611+
The following example achieves an accordion effect by animating a looping timeline:
612+
```javascript livedemo
613+
const spec = {
614+
type: 'bar',
615+
data: [
616+
{
617+
id: 'id0',
618+
values: [
619+
{ x: '1', y: 22 },
620+
{ x: '2', y: 43 },
621+
{ x: '3', y: 33 },
622+
{ x: '4', y: 22 },
623+
{ x: '5', y: 10 },
624+
{ x: '6', y: 30 },
625+
{ x: '7', y: 46 },
626+
{ x: '8', y: 21 },
627+
{ x: '9', y: 33 },
628+
{ x: '10', y: 43 },
629+
{ x: '11', y: 42 },
630+
{ x: '12', y: 30 },
631+
{ x: '13', y: 9 },
632+
{ x: '14', y: 46 }
633+
]
634+
}
635+
],
636+
xField: ['x'],
637+
yField: 'y',
638+
axes: [
639+
{ orient: 'bottom', type: 'band' },
640+
{ orientation: 'left', type: 'linear' }
641+
],
642+
animationNormal: {
643+
bar: [
644+
{
645+
loop: true,
646+
startTime: 100,
647+
oneByOne: 100,
648+
timeSlices: [
649+
{
650+
delay: 1000,
651+
effects: {
652+
channel: {
653+
fillOpacity: { to: 0.5 }
654+
},
655+
easing: 'linear'
656+
},
657+
duration: 500
658+
},
659+
{
660+
effects: {
661+
channel: {
662+
fillOpacity: { to: 1 }
663+
},
664+
easing: 'linear'
665+
},
666+
duration: 500
667+
}
668+
]
669+
}
670+
]
671+
}
672+
};
673+
674+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
675+
vchart.renderAsync();
676+
```
677+
678+
## Custom animation
679+
In the animation effect (Effect), if the simple `channel` configuration cannot meet your needs, you can configure custom animation effects through `custom` and `customParameters`:
680+
- `custom`: custom animation;
681+
- `customParameters`: Custom animation parameters;
682+
For detailed usage, please refer to the [Custom Animation](../custom-extension/custom-animation) chapter.

‎docs/assets/tutorials/en/animation/how-to-config-animation.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ window['vchart'] = vchart;
6363

6464
### Animation Easing Effect
6565

66-
Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../../demo/combination/easing-visualization) for more information.
66+
Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../demo/combination/easing-visualization) for more information.
6767

6868
- linear
6969
- quadIn

‎docs/assets/tutorials/en/chart/3d-area.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ Point elements and line elements are the basic components of an area chart, and
2121

2222
Axes, tooltips, and other components that assist in chart display are optional configurations with default effects and functions:
2323

24-
- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../../option/areaChart#axes)
25-
- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../../option/areaChart#tooltip)
26-
- For more component configurations, see [VChart areaChart Configuration](../../../option/areaChart)
24+
- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../option/areaChart#axes)
25+
- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../option/areaChart#tooltip)
26+
- For more component configurations, see [VChart areaChart Configuration](../../option/areaChart)
2727

2828
As a 3d chart, the 3d area chart requires enabling the 3d view. Configure the 3d view in the vChart initialization parameters:
2929

‎docs/assets/tutorials/en/chart/3d-bar.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ The rectangular chart element is an essential building block for bar/column char
2424

2525
Axes, tooltips, and other components, which serve as auxiliary chart display components, are optional configurations with default effects and functionality:
2626

27-
- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../../option/barChart#axes)
28-
- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip)
29-
- For more component configurations, see [VChart barChart Configuration](../../../option/barChart)
27+
- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../option/barChart#axes)
28+
- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../option/barChart#tooltip)
29+
- For more component configurations, see [VChart barChart Configuration](../../option/barChart)
3030
As a 3D chart, 3D scatter plot needs to enable 3D view, which needs to be configured in the initialization parameters of vChart:
3131

3232
- `options3d.enable`: Enable 3D view

‎docs/assets/tutorials/en/chart/3d-funnel.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ Transformation layers, labels, and other auxiliary elements are only displayed i
2424

2525
Tooltip information and other components that assist in chart presentation are optional configurations that come with default effects and functions:
2626

27-
- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../../option/funnelChart#tooltip)
28-
- For more component configurations, see [VChart funnelChart Configuration](../../../option/funnelChart)
27+
- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../option/funnelChart#tooltip)
28+
- For more component configurations, see [VChart funnelChart Configuration](../../option/funnelChart)
2929

3030
As a 3D chart, a 3D scatter plot requires enabling the 3D view, which needs to be configured in the initialization parameters of vChart:
3131

@@ -100,4 +100,4 @@ const vchart = new VChart(spec, {
100100
vchart.renderAsync();
101101
```
102102

103-
For other configurations, refer to [Funnel Chart](../../../option/funnelChart)
103+
For other configurations, refer to [Funnel Chart](../../option/funnelChart)

‎docs/assets/tutorials/en/chart/3d-line.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020

2121
坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:
2222

23-
- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/line/axes/lineChart#axes)
24-
- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/line/axes/lineChart#tooltip)
25-
- 更多组件配置见[VChart lineChart 配置](../../../option/lineChart)
23+
- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/line/axes/lineChart#axes)
24+
- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/line/axes/lineChart#tooltip)
25+
- 更多组件配置见[VChart lineChart 配置](../../option/lineChart)
2626

2727
作为 3d 图表，3d 折线图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角:
2828

‎docs/assets/tutorials/en/chart/3d-scatter.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818

1919
坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:
2020

21-
- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/scatterChart#axes)
22-
- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/scatterChart#tooltip)
23-
- 更多组件配置见[VChart scatterChart 配置](../../../option/scatterChart)
21+
- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/scatterChart#axes)
22+
- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/scatterChart#tooltip)
23+
- 更多组件配置见[VChart scatterChart 配置](../../option/scatterChart)
2424

2525
作为 3d 图表，3d 散点图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角:
2626

‎docs/assets/tutorials/en/chart/area.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
# Area Chart
22

3-
[\[Configuration Manual\]](../../../option/areaChart)
3+
[\[Configuration Manual\]](../../option/areaChart)
44

55
## Introduction
66

77
Area charts visually display quantitative data. It is based on line charts. Areas between the axis and the line are often emphasized with colors, textures, and shading lines. Typically, an area chart compares two or more quantities. Area charts are suitable for illustrating the trend changes of one or more groups of data under continuous independent variables, as well as comparing them with each other, while also being able to observe the changing trend of the total data.
88

9-
In VChart, you can use the [area chart configuration](../../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics:
9+
In VChart, you can use the [area chart configuration](../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics:
1010

1111
![](https://temp.domain/obj/bit-cloud/350c0511133d336e622523219.png)
1212

13-
In the [area chart example](../../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations:
13+
In the [area chart example](../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations:
1414

1515
- `seriesField` attribute is used to declare the field participating in color mapping
1616
- `stack` attribute is declared as true for configuring stacking, which will be stacked according to the field declared in the `seriesField` attribute
@@ -29,9 +29,9 @@ Point elements and line elements are essential for area charts, and relevant dra
2929

3030
Axes, tooltips, and other auxiliary chart display components are optional configurations with default effects and functionalities:
3131

32-
- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../../option/areaChart#axes)
33-
- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../../option/areaChart#tooltip)
34-
- For more component configurations see [VChart areaChart configuration](../../../option/areaChart)
32+
- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../option/areaChart#axes)
33+
- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../option/areaChart#tooltip)
34+
- For more component configurations see [VChart areaChart configuration](../../option/areaChart)
3535

3636
## Quick Start
3737

‎docs/assets/tutorials/en/chart/bar.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# Bar Chart / Bar Graph
22

3-
[\[Configuration Manual\]](../../../option/barChart)
3+
[\[Configuration Manual\]](../../option/barChart)
44

55
## Introduction
66

77
A bar chart is a statistical chart with a variable based on the length of a rectangle. Bar charts are used to compare two or more values (different times or different conditions), with only one variable, and are often used for smaller data set analysis.
88

9-
In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../../option/barChart). As shown in the following figure:
9+
In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../option/barChart). As shown in the following figure:
1010
![](https://temp.domain/obj/bit-cloud/45df54929d214e7453e228f27.png)
11-
In the [example](../../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations:
11+
In the [example](../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations:
1212

1313
- Set the mapping field for the x-axis and the **grouping field** on the `xField` property.
1414
- `seriesField` property declares the color mapping field.
@@ -19,7 +19,7 @@ A bar graph is a bar chart with a transpose of the x and y axes. The configurati
1919

2020
![](https://temp.domain/obj/bit-cloud/350c0511133d336e62252321d.png)
2121

22-
To achieve a [Population Pyramid Chart](../../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations:
22+
To achieve a [Population Pyramid Chart](../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations:
2323

2424
- Grid layout, configured through the `layout` property, used for bar chart layout.
2525
- Use the `type: common` type, i.e., the combination chart.
@@ -39,9 +39,9 @@ Rectangle elements are the basic elements of bar charts/bar graphs, and the corr
3939

4040
Coordinate axis, prompt information, and other components are optional configurations for assisting in chart presentation and come with default effects and functions:
4141

42-
- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../../option/barChart#axes)
43-
- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip)
44-
- More component configurations see [VChart barChart configuration](../../../option/barChart)
42+
- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../option/barChart#axes)
43+
- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../option/barChart#tooltip)
44+
- More component configurations see [VChart barChart configuration](../../option/barChart)
4545

4646
## Quick Start
4747

0 commit comments

Comments
 (0)