Skip to content

Commit

Permalink
fix links
Browse files Browse the repository at this point in the history
  • Loading branch information
plainheart committed Feb 22, 2024
1 parent 80cf4ed commit 9a54a56
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
12 changes: 6 additions & 6 deletions contents/en/how-to/cross-platform/server.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ In these scenarios, ECharts offers both SVG and Canvas server-side rendering (SS

| Solution | Rendering Result | Pros |
| ----------------- | ----------------- | ----------------- |
| Serverside SVG Rendering | SVG string | Smaller than Canvas images;<br>Vector SVG images are not blurred;<br>Support for initial animation |
| Serverside Canvas Rendering | Image | The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG |
| Server-side SVG Rendering | SVG string | Smaller than Canvas images;<br>Vector SVG images are not blurred;<br>Support for initial animation |
| Server-side Canvas Rendering | Image | The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG |

In general, the server-side SVG rendering solution should be preferred, or if SVG is not applicable, the Canvas rendering solution can be considered.

Expand Down Expand Up @@ -100,7 +100,7 @@ Here's a simple example
var echarts = require('echarts');
const { createCanvas } = require('canvas');

// In versions ealier than 5.3.0, you had to register the canvas factory with setCanvasCreator.
// In versions earlier than 5.3.0, you had to register the canvas factory with setCanvasCreator.
// Not necessary since 5.3.0
echarts.setCanvasCreator(() => {
return createCanvas();
Expand Down Expand Up @@ -188,7 +188,7 @@ Starting from version v5.5.0, if the chart only needs the following effects and
```html
<div id="chart-container" style="width:800px;height:600px"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<script>
const ssrClient = window['echarts-ssr-client'];
Expand Down Expand Up @@ -238,7 +238,7 @@ The client-side lightweight runtime can be imported in the following ways:

```html
<!-- Method one: Using CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<!-- Method two: Using NPM -->
<script src="node_modules/echarts/ssr/client/dist/index.js"></script>
```
Expand Down Expand Up @@ -300,7 +300,7 @@ These four rendering methods can be used in combination. Let's summarize their r
| Rendering Solution | Loading Volume | Loss of Function and Interaction | Relative Development Workload | Recommended Scenario |
| --- | --- | --- | --- | --- |
| Client-side rendering | Largest | None | Minimum | The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction |
| Client-side rendering ([partial package importing](basics/import#shrinking-bundle-size) on demand) | Large | Large: the packages not included cannot use the corresponding functions | Small | The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources |
| Client-side rendering ([partial package importing](${lang}/basics/import#shrinking-bundle-size) on demand) | Large | Large: the packages not included cannot use the corresponding functions | Small | The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources |
| One-time server-side SVG rendering | Small | Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction |
| One-time server-side Canvas rendering | Large | Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG |
| Server-side SVG rendering plus client-side ECharts lazy loading | Small, then large | Medium: cannot interact before lazy loading is completed | Medium | The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading |
Expand Down
6 changes: 3 additions & 3 deletions contents/zh/how-to/cross-platform/server.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ echarts.setPlatformAPI({
```html
<div id="chart-container" style="width:800px;height:600px"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<script>
const ssrClient = window['echarts-ssr-client'];
Expand Down Expand Up @@ -238,7 +238,7 @@ $.get('...').then(svgStr => {

```html
<!-- 方法一:使用 CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<!-- 方法二:使用 NPM -->
<script src="node_modules/echarts/ssr/client/dist/index.js"></script>
```
Expand Down Expand Up @@ -300,7 +300,7 @@ on?: {
| 渲染方案 | 加载体积 | 功能及交互损失 | 相对开发工作量 | 推荐场景 |
| --- | --- | --- | --- | --- |
| 客户端渲染 | 最大 || 最小 | 首屏加载时间不敏感,对功能交互完整性要求高 |
| 客户端渲染([按需引用](basics/import#按需引入-echarts-图表和组件)部分包) || 大:没有引入的包就无法使用对应功能 || 首屏加载时间不敏感,对代码体积没有严格要求但是希望尽可能小,仅使用 ECharts 的一小部分功能,没有服务器资源 |
| 客户端渲染([按需引用](${lang}/basics/import#按需引入-echarts-图表和组件)部分包) || 大:没有引入的包就无法使用对应功能 || 首屏加载时间不敏感,对代码体积没有严格要求但是希望尽可能小,仅使用 ECharts 的一小部分功能,没有服务器资源 |
| 一次性服务端 SVG 渲染 || 大:无法动态改变数据、不支持图例切换系列是否显示、不支持提示框等实时性要求高的交互 || 首屏加载时间敏感,对功能交互完整性要求低 |
| 一次性服务端 Canvas 渲染 || 最大:同上且不支持初始动画、图片体积更大、放大会模糊 || 首屏加载时间敏感,对功能交互完整性要求低,平台限制无法使用 SVG |
| 服务端 SVG 渲染加客户端懒加载 ECharts | 小,然后大 | 中:懒加载完成前无法交互 || 首屏加载时间敏感,对功能交互完整性要求高,最好图表不会在加载后立刻需要交互 |
Expand Down

0 comments on commit 9a54a56

Please sign in to comment.