diff --git a/contents/en/basics/help.md b/contents/en/basics/help.md
new file mode 100644
index 0000000..18e5cab
--- /dev/null
+++ b/contents/en/basics/help.md
@@ -0,0 +1,38 @@
+# Get Help
+
+## Technical Problems
+
+### Make sure that existing documentation do not solve your problem
+
+ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.
+
+Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:
+
+- [API](${mainSitePath}/api.html)
+- [Option Manual](${mainSitePath}/option.html): you can try to use the search function
+- Articles in this handbook
+- [FAQ](${mainSitePath}/faq.html)
+- Searching in [GitHub issue](https://github.com/apache/echarts/issues)
+- Using the search engine
+
+### Create the Minimal Reproducible Demo
+
+Create an example on [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM), [Codesandbox](https://codesandbox.io/s/mystifying-bash-2uthz), which will make it easier for others to reproduce your problem.
+
+The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See [How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) for a more detailed description.
+
+### Determining if It's a Bug
+
+#### Report a Bug or Request a New Feature
+
+If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the [issue template](https://ecomfe.github.io/echarts-issue-helper/) to create a new issue and follow the prompts to describe it in detail.
+
+#### How-To Questions
+
+If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a>
+
+If you don't get an answer, you can also send an email to the email group [dev@echarts.apache.org](mailto:dev@echarts.apache.org). In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.
+
+## Non-technical questions
+
+Other questions can be sent in English to the mail group [dev@echarts.apache.org](mailto:dev@echarts.apache.org).
diff --git a/contents/en/basics/inspiration.md b/contents/en/basics/inspiration.md
new file mode 100644
index 0000000..6aac083
--- /dev/null
+++ b/contents/en/basics/inspiration.md
@@ -0,0 +1,6 @@
+# Get inspired
+
+The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".
+
+- [Apache ECharts Official Examples](${mainSitePath}/examples)
+- "Applications - Common Charts" in this handbook
diff --git a/contents/en/basics/release-note/v5-feature.md b/contents/en/basics/release-note/v5-feature.md
new file mode 100644
index 0000000..4db0548
--- /dev/null
+++ b/contents/en/basics/release-note/v5-feature.md
@@ -0,0 +1,192 @@
+# New features in ECharts 5
+
+Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.
+
+Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.
+
+<img src="images/feature-v5/echarts-5-en.png" width="800px" />
+
+"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.
+
+## Storytelling
+
+The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.
+
+#### Bar/Line Racing
+
+Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.
+
+<md-example src="bar-race-country" width="700" height="400"></md-example>
+<md-example src="line-race" width="700" height="400"></md-example>
+
+The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.
+
+#### Custom Series Animation
+
+In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.
+
+Imagine what amazing visualizations you can create with these dynamic effects!
+
+## Visual Design
+
+The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.
+
+#### Overall Design
+
+We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.
+
+<img src="images/feature-v5/theme-color.png" width="400px" />
+
+Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.
+
+<img src="images/feature-v5/new-theme-light.png" width="500px" />
+<img src="images/feature-v5/new-theme-dark.png" width="500px" />
+
+For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:
+
+<img src="images/feature-v5/dataZoom.png" width="500px" />
+
+<img src="images/feature-v5/timeline.png" width="500px" />
+
+#### Label
+
+Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.
+
+Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.
+
+These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.
+
+We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.
+
+The new label feature allows you to have very clear label presentation even in a confined space mobile:
+
+<img src="images/feature-v5/pie-label.png" width="400px" />
+
+#### Time Axis
+
+Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.
+
+First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The `formatter` of labels supports templates for time (e.g. `{yyyy}-{MM}-{dd}`), and different `formatter` can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.
+
+The display of the time scale at different dataZoom granularities.
+
+<img src="images/feature-v5/time-axis.png" width="600px" />
+
+<img src="images/feature-v5/time-axis-2.png" width="600px" />
+
+#### Tooltip
+
+Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.
+
+<img src="images/feature-v5/new-tooltip.png" width="400px" />
+<img src="images/feature-v5/new-tooltip-2.png" width="400px" />
+
+In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.
+
+#### Gauge
+
+We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.
+
+Different styles of gauge pointers.
+
+<img src="images/feature-v5/gauge-pointer.png" width="600px" />
+
+These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.
+
+<md-example src="gauge-clock" width="600" height="600"></md-example>
+
+#### Round Corner
+
+Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.
+
+<md-example src="sunburst-borderRadius" width="400" height="400"></md-example>
+
+## Interactivity
+
+The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.
+
+#### Multi-State
+
+In ECharts 4, there were two interactive states, `emphasis` and `normal`, graph will enter the `emphasis` state when the mouse hovered to distinguish the data.
+
+This time in Apache ECharts 5, we have added a new effect of **blur** other non-related elements to the original mouse hover highlighting, so that the target data can be focused.
+
+For example, in this [bar chart](https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack) example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in `emphasis` can now be set in `blur`.
+
+In addition, we've added **click to select** to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the `selectchanged` event to get all the selected shapes for further processing. As with `emphasis` and `blur`, the selection style can also be configured in `select`.
+
+#### Performance improvements
+
+##### Dirty Rectangle Rendering
+
+Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.
+
+A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.
+
+<img src="images/feature-v5/dirty-rect.gif" width="500px" />
+
+You can see the effect by enable dirty rectangle optimization on the new example page.
+
+##### Line Chart Performance Optimization for Real-Time Time-Series Data
+
+In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.
+
+Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.
+
+## Development Experience
+
+We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.
+
+#### Datasets
+
+ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.
+
+#### Internationalization
+
+The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.
+
+Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the `registerLocale` function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.
+
+```js
+// import the lang object and set when init
+echarts.registerLocale('DE', lang);
+echarts.init(DomElement, null, {
+  locale: 'DE'
+});
+```
+
+#### TypeScript Refactoring
+
+In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.
+
+For developers, we can also generate better and more code-compliant `DTS` type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to [DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts), which is a lot of work, so thanks for your contribution.
+
+In addition, if a developer's component is introduced on-demand, we provide a `ComposeOption` type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.
+
+## Accessibility
+
+Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.
+
+In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.
+
+#### Theme Colors
+
+We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.
+
+Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.
+
+#### Decal Patterns
+
+ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.
+
+<md-example src="doc-example/aria-decal-simple" width="600" height="350"></md-example>
+
+In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.
+
+<md-example src="doc-example/aria-decal-newspaper" width="600" height="350"></md-example>
+
+## Summary
+
+In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.
+
+Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!
diff --git a/contents/en/basics/release-note/v5-upgrade-guide.md b/contents/en/basics/release-note/v5-upgrade-guide.md
new file mode 100644
index 0000000..e1ab3b4
--- /dev/null
+++ b/contents/en/basics/release-note/v5-upgrade-guide.md
@@ -0,0 +1,271 @@
+# Apache ECharts 5 Upgrade Guide
+
+This guide is for those who want to upgrade from echarts 4.x (hereafter `v4`) to echarts 5.x (hereafter `v5`). You can find out what new features `v5` brings that are worth upgrading in [New Features in ECharts 5](${lang}/basics/release-note/v5-feature). In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, `v5` still brings some breaking changes that require special attention. In addition, in some cases, `v5` provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.
+
+## Breaking Changes
+
+#### Default theme
+
+First of all, the default theme has been changed. `v5` has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.
+
+```js
+chart.setOption({
+  color: [
+    '#c23531',
+    '#2f4554',
+    '#61a0a8',
+    '#d48265',
+    '#91c7ae',
+    '#749f83',
+    '#ca8622',
+    '#bda29a',
+    '#6e7074',
+    '#546570',
+    '#c4ccd3'
+  ]
+  // ...
+});
+```
+
+Or, to make a simple `v4` theme.
+
+```js
+var themeEC4 = {
+  color: [
+    '#c23531',
+    '#2f4554',
+    '#61a0a8',
+    '#d48265',
+    '#91c7ae',
+    '#749f83',
+    '#ca8622',
+    '#bda29a',
+    '#6e7074',
+    '#546570',
+    '#c4ccd3'
+  ]
+};
+var chart = echarts.init(dom, themeEC4);
+chart.setOption(/* ... */);
+```
+
+#### Importing ECharts
+
+##### Removing Support for Default Exports
+
+Since `v5`, echarts only provides `named exports`.
+
+So if you are importing `echarts` like this:
+
+```js
+import echarts from 'echarts';
+// Or import core module
+import echarts from 'echarts/lib/echarts';
+```
+
+It will throw error in `v5`. You need to change the code as follows to import the entire module.
+
+```js
+import * as echarts from 'echarts';
+// Or
+import * as echarts from 'echarts/lib/echarts';
+```
+
+##### tree-shaking API
+
+In 5.0.1, we introduced the new [tree-shaking API](${lang}/basics/import)
+
+```js
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+// Note that the Canvas renderer is no longer included by default and needs to be imported explictly, or import the SVGRenderer if you need to use the SVG rendering mode
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([BarChart, GridComponent, CanvasRenderer]);
+```
+
+To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the `Full Code` tab on the example page to see the modules you need to introduce and the related code.
+
+In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:
+
+```js
+const echarts = require('echarts/lib/echarts');
+require('echarts/lib/chart/bar');
+require('echarts/lib/component/grid');
+```
+
+Second, because our source code has been rewritten using TypeScript, `v5` will no longer support importing files from `echarts/src`. You need to change it to import from `echarts/lib`.
+
+##### Dependency Adjustment
+
+> Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.
+
+In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, `CanvasRenderer` is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.
+
+- The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before
+
+```js
+const echarts = require('echarts/lib/echarts');
+require('echarts/lib/chart/bar');
+require('echarts/lib/chart/line');
+```
+
+Need to introduce the `grid` component separately again
+
+```js
+require('echarts/lib/component/grid');
+```
+
+Reference issues: [#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764)
+
+- `aria` components are no longer imported by default. You need import it manually if necessary.
+
+```js
+import { AriaComponent } from 'echarts/components';
+echarts.use(AriaComponent);
+```
+
+Or
+
+```js
+require('echarts/lib/component/aria');
+```
+
+#### Removes Built-in GeoJSON
+
+`v5` removes the built-in geoJSON (previously in the `echarts/map` folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.
+
+#### Browser Compatibility
+
+IE8 is no longer supported by `v5`. We no longer maintain and upgrade the previous [VML renderer](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with `v5.0.1`.
+
+#### ECharts configuration item adjustment
+
+##### Visual style settings priority change
+
+The priority of the visuals between [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are reversed since `v5`.
+
+That is, previously in `v4`, the visuals (i.e., color, symbol, symbolSize, ...) that generated by [visualMap component](${optionPath}visualMap) has the highest priority, which will overwrite the same visuals settings in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle). That brought troubles when needing to specify specific style to some certain data items while using [visualMap component](${optionPath}visualMap). Since `v5`, the visuals specified in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) has the highest priority.
+
+In most cases, users will probably not notice this change when migrating from `v4` to `v5`. But users can still check that if [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are both specified.
+
+##### `padding` for Rich Text
+
+`v5` adjusts the [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding) to make it more compliant with CSS specifications. In `v4`, for example `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `33` and `padding-bottom` is `11`. The position of the top and bottom is adjusted in `v5`, `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `11` and `padding-bottom` is `33`.
+
+If the user is using [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding), this order needs to be adjusted.
+
+## ECharts Related Extensions
+
+These extensions need to be upgraded to new version to support echarts `v5`:
+
+- [echarts-gl](https://github.com/ecomfe/echarts-gl)
+- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)
+- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)
+
+## Deprecated API
+
+Some of the API and echarts options are deprecated since `v5`, but are still backward compatible. Users can **keep using these deprecated API**, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.
+
+The deprecated API and their corresponding new API are listed as follows:
+
+- Transform related props of a graphic element are changed:
+  - Changes:
+    - `position: [number, number]` are changed to `x: number`/`y: number`.
+    - `scale: [number, number]` are changed to `scaleX: number`/`scaleY: number`.
+    - `origin: [number, number]` are changed to `originX: number`/`originY: number`.
+  - The `position`, `scale` and `origin` are still supported but deprecated.
+  - It effects these places:
+    - In the `graphic` components: the declarations of each element.
+    - In `custom series`: the declarations of each element in the return of `renderItem`.
+    - Directly use zrender graphic elements.
+- Text related props on graphic elements are changed:
+  - Changes:
+    - The declaration of attached text (or say, rect text) are changed.
+      - Prop `style.text` are deprecated in elements except `Text`. Instead, Prop set `textContent` and `textConfig` are provided to support more powerful capabilities.
+      - These related props at the left part below are deprecated. Use the right part below instead.
+        - textPosition => textConfig.position
+        - textOffset => textConfig.offset
+        - textRotation => textConfig.rotation
+        - textDistance => textConfig.distance
+    - The props at the left part below are deprecated in `style` and `style.rich.?`. Use the props at the right part below instead.
+      - textFill => fill
+      - textStroke => stroke
+      - textFont => font
+      - textStrokeWidth => lineWidth
+      - textAlign => align
+      - textVerticalAlign => verticalAlign);
+      - textLineHeight =>
+      - textWidth => width
+      - textHeight => hight
+      - textBackgroundColor => backgroundColor
+      - textPadding => padding
+      - textBorderColor => borderColor
+      - textBorderWidth => borderWidth
+      - textBorderRadius => borderRadius
+      - textBoxShadowColor => shadowColor
+      - textBoxShadowBlur => shadowBlur
+      - textBoxShadowOffsetX => shadowOffsetX
+      - textBoxShadowOffsetY => shadowOffsetY
+    - Note: these props are not changed:
+      - textShadowColor
+      - textShadowBlur
+      - textShadowOffsetX
+      - textShadowOffsetY
+  - It effects these places:
+    - In the `graphic` components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]
+    - In `custom series`: the declarations of each element in the return of `renderItem`. [compat, but not accurately the same in some complicated cases].
+    - Directly use zrender API to create graphic elements. [No compat, breaking change].
+- API on chart instance:
+  - `chart.one(...)` is deprecated.
+- `label`:
+  - In props `color`, `textBorderColor`, `backgroundColor` and `borderColor`, the value `'auto'` is deprecated. Use the value `'inherit'` instead.
+- `hoverAnimation`:
+  - option `series.hoverAnimation` is deprecated. Use `series.emphasis.scale` instead.
+- `line series`:
+  - option `series.clipOverflow` is deprecated. Use `series.clip` instead.
+- `custom series`:
+  - In `renderItem`, the `api.style(...)` and `api.styleEmphasis(...)` are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by `api.visual(...)`.
+- `sunburst series`:
+  - Action type `highlight` is deprecated. Use `sunburstHighlight` instead.
+  - Action type `downplay` is deprecated. Use `sunburstUnhighlight` instead.
+  - option `series.downplay` is deprecated. Use `series.blur` instead.
+  - option `series.highlightPolicy` is deprecated. Use `series.emphasis.focus` instead.
+- `pie series`:
+  - The action type at the left part below are deprecated. Use the right part instead:
+    - `pieToggleSelect` => `toggleSelect`
+    - `pieSelect` => `select`
+    - `pieUnSelect` => `unselect`
+  - The event type at the left part below are deprecated. Use the right part instead:
+    - `pieselectchanged` => `selectchanged`
+    - `pieselected` => `selected`
+    - `pieunselected` => `unselected`
+  - option `series.label.margin` is deprecated. Use `series.label.edgeDistance` instead.
+  - option `series.clockWise` is deprecated. Use `series.clockwise` instead.
+  - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.
+- `map series`:
+  - The action type at the left part below are deprecated. Use the right part instead:
+    - `mapToggleSelect` => `toggleSelect`
+    - `mapSelect` => `select`
+    - `mapUnSelect` => `unselect`
+  - The event type at the left part below are deprecated. Use the right part instead:
+    - `mapselectchanged` => `selectchanged`
+    - `mapselected` => `selected`
+    - `mapunselected` => `unselected`
+  - option `series.mapType` is deprecated. Use `series.map` instead.
+  - option `series.mapLocation` is deprecated.
+- `graph series`:
+  - option `series.focusNodeAdjacency` is deprecated. Use `series.emphasis: { focus: 'adjacency'}` instead.
+- `gauge series`:
+  - option `series.clockWise` is deprecated. Use `series.clockwise` instead.
+  - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.
+- `dataZoom component`:
+  - option `dataZoom.handleIcon` need prefix `path://` if using SVGPath.
+- `radar`:
+  - option `radar.name` is deprecated. Use `radar.axisName` instead.
+  - option `radar.nameGap` is deprecated. Use `radar.axisNameGap` instead.
+- Parse and format:
+  - `echarts.format.formatTime` is deprecated. Use `echarts.time.format` instead.
+  - `echarts.number.parseDate` is deprecated. Use `echarts.time.parse` instead.
+  - `echarts.format.getTextRect` is deprecated.
diff --git a/contents/zh/basics/release-note/v5-upgrade-guide.md b/contents/zh/basics/release-note/v5-upgrade-guide.md
index a3d2411..6f25617 100644
--- a/contents/zh/basics/release-note/v5-upgrade-guide.md
+++ b/contents/zh/basics/release-note/v5-upgrade-guide.md
@@ -1,6 +1,6 @@
 # Apache ECharts 5 升级指南
 
-本指南面向那些希望将 echarts 4.x（以下简称 `v4`）升级到 echarts 5.x（以下简称 `v5`）的用户。大家可以在 [ECharts 5 新特性](tutorial.html#ECharts%205%20新特性) 中了解这次`v5`带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，`v5` 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，`v5` 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。
+本指南面向那些希望将 echarts 4.x（以下简称 `v4`）升级到 echarts 5.x（以下简称 `v5`）的用户。大家可以在 [ECharts 5 新特性](${lang}/basics/release-note/v5-feature) 中了解这次`v5`带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，`v5` 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，`v5` 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。
 
 ## 非兼容性改变