fix: remove codesanbox examples
diff --git a/contents/en/basics/release-note/5-3-0.md b/contents/en/basics/release-note/5-3-0.md
index 4eff9e6..6b43ae2 100644
--- a/contents/en/basics/release-note/5-3-0.md
+++ b/contents/en/basics/release-note/5-3-0.md
@@ -278,14 +278,7 @@
### Loading Lottie animations
-In order to fully exploit the power of new keyframe animations, Yi Shen from the ECharts team wrote a [Lottie animation parsing library](https://github.com/pissang/lottie-parser) that can parse Lottie animation files into the ECharts graphics format for rendering. Combined with Lottie's expressive power we can introduce more amazing animations to our projects:
-
-<iframe src="https://codesandbox.io/embed/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark&codemirror=1"
- style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
- title="eager-ives-yiqn7"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
+In order to fully exploit the power of new keyframe animations, Yi Shen from the ECharts team wrote a [Lottie animation parsing library](https://github.com/pissang/lottie-parser) that can parse Lottie animation files into the ECharts graphics format for rendering. Combined with Lottie's expressive power we can introduce more amazing animations to our projects.
## Graphical component transition animations
@@ -375,15 +368,6 @@
const svgStr = chart.renderToSVGString();
```
-We build the simplest NodeJS server in CodeSandbox and then use the ECharts server to render the effect as follows
-
-<iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme= dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
## Customizing Map Projections
Maps have always been a very widely used component in ECharts. Typically a map component uses GeoJSON formatted data with latitude and longitude stored. ECharts then calculates the appropriate display area and maps the latitude and longitude linearly to that area. This is the simplest way to project a map. However, the simple linear projection does not work for complex map scenarios, such as using [Albers](https://en.wikipedia.org/wiki/Albers_projection) projection to solve the distortion problem in linear projection, or having the Pacific in the middle of the world map, etc.
diff --git a/contents/en/how-to/cross-platform/server.md b/contents/en/how-to/cross-platform/server.md
index cdf3910..d14a198 100644
--- a/contents/en/how-to/cross-platform/server.md
+++ b/contents/en/how-to/cross-platform/server.md
@@ -76,15 +76,6 @@
fs.writeFile('bar.svg', svgStr, 'utf-8');
```
-Here is a complete server-side SVG rendering example in CodeSandbox.
-
-<iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme= dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
#### Animations in Server-side Rendering
As you can see in the example above, even using server-side rendering, ECharts can still provide animation effects, which are achieved by embedding CSS animations in the output SVG string. There is no need for additional JavaScript to play the animation.
@@ -138,15 +129,6 @@
res.end();
```
-Here is a complete example in CodeSandbox
-
-<iframe src="https://codesandbox.io/embed/apache-echarts-canvas-ssr-demo-e340rt?autoresize=1&codemirror=1&fontsize=12& hidenavigation=1&&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr- spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
#### Loading of images
[node-canvas](https://github.com/Automattic/node-canvas) provides an `Image` implementation for image loading. If you use to images in your code, we can adapt them using the `setPlatformAPI` interface that was introduced in `5.3.0`.
@@ -188,17 +170,6 @@
If you have such requirements, you can consider using server-side rendering to quickly output the first screen chart, then wait for `echarts.js` to finish loading and re-render the same chart on the client side, so that you can achieve normal interaction effects and dynamically change the data. Note that when rendering on the client side, you should turn on interactive components like `tooltip: { show: true }` and turn off the initial animation with `animation: 0` (the initial animation should be done by the SVG animation of the rendered result on the server side).
-Here is an example of building a CodeSandbox with SVG for server-side rendering and Canvas for client-side rendering. It is recommended to click "Open Sandbox" to learn the code implementation.
-
-> If you want to use Canvas for server-side rendering or SVG for client-side rendering, it's similar, so I won't go over it again.
-
-<iframe src="https://codesandbox.io/embed/apache-echarts-5-3-ssr-csr-0jvsdu?fontsize=14&hidenavigation=1&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="Apache ECharts 5.3 SSR + CSR"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
As we can see, from the user experience point of view, there is almost no secondary rendering process, and the whole switching effect is very seamless. You can also use a library like [pace-js](https://www.npmjs.com/package/pace-js) to display the loading progress bar during the loading of `echarts.js` as in the above example to solve the problem of no interactive feedback before the ECharts are fully loaded.
Using server-side rendering with client-side rendering along with a lazy-loading `echarts.js` on the client side is a good solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported. However, it takes some time to load the `echarts.js` and before it is fully loaded, there is no interactive feedback, in which case, a "Loading" text might be displayed to the user. This is a commonly recommended solution for scenarios where the first screen needs to be rendered quickly and then the interaction needs to be supported.
diff --git a/contents/zh/basics/release-note/5-3-0.md b/contents/zh/basics/release-note/5-3-0.md
index 50fcd65..88e43ff 100644
--- a/contents/zh/basics/release-note/5-3-0.md
+++ b/contents/zh/basics/release-note/5-3-0.md
@@ -280,14 +280,7 @@
### 加载 Lottie 动画
-为了充分发掘出新的关键帧动画的能力，ECharts 团队的沈毅写了一个 [Lottie 动画的解析库](https://github.com/pissang/lottie-parser)，可以将 Lottie 动画文件解析成 ECharts 的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中绘制出细腻的动画:
-
-<iframe src="https://codesandbox.io/embed/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark&codemirror=1"
- style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
- title="eager-ives-yiqn7"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
+为了充分发掘出新的关键帧动画的能力，ECharts 团队的沈毅写了一个 [Lottie 动画的解析库](https://github.com/pissang/lottie-parser)，可以将 Lottie 动画文件解析成 ECharts 的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中绘制出细腻的动画。
## 图形组件过渡动画
@@ -377,15 +370,6 @@
const svgStr = chart.renderToSVGString();
```
-我们在 CodeSandbox 中搭建一个最简单的 NodeJS 服务器然后使用 ECharts 服务端渲染的效果：
-
-<iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
在此基础上，我们优化了输出的 SVG 字符串，使其在诸如 PowerPoint 等更多的平台上有更好的显示效果。
## 自定义地图投影
diff --git a/contents/zh/how-to/cross-platform/server.md b/contents/zh/how-to/cross-platform/server.md
index a4cf4db..c354741 100644
--- a/contents/zh/how-to/cross-platform/server.md
+++ b/contents/zh/how-to/cross-platform/server.md
@@ -76,15 +76,6 @@
fs.writeFile('bar.svg', svgStr, 'utf-8');
```
-下面是一个完整的在 CodeSandbox 中搭建一个最简单的 Node.js 服务器然后使用 ECharts 服务端 SVG 渲染的效果：
-
-<iframe src="https://codesandbox.io/embed/heuristic-leftpad-oq23t?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
#### 服务端渲染中的动画效果
上面的例子中可以看到，就算是服务端渲染 ECharts 也可以提供动画效果，这个动画效果是通过在输出的 SVG 字符串中嵌入 CSS 动画实现的。并不需要额外的 JavaScript 再去控制动画。
@@ -138,15 +129,6 @@
res.end();
```
-下面是一个完整的在 CodeSandbox 中搭建一个最简单的 Node.js 服务器然后使用 ECharts 服务端 Canvas 渲染的效果：
-
-<iframe src="https://codesandbox.io/embed/apache-echarts-canvas-ssr-demo-e340rt?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="heuristic-leftpad-oq23t"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
#### 图片的加载
[node-canvas](https://github.com/Automattic/node-canvas) 提供了图片加载的`Image`实现，如果你在图表中使用了到了图片，我们可以使用`5.3.0`新增的`setPlatformAPI`接口来适配。
@@ -188,18 +170,7 @@
如果有相关需求，可以考虑先使用服务端渲染快速输出首屏图表，然后等待 `echarts.js` 加载完后，重新在客户端渲染同样的图表（称为 Hydration），这样就可以实现正常的交互效果和动态改变数据了。需要注意的是，在客户端渲染的时候，应开启 `tooltip: { show: true }` 之类的交互组件，并且用 `animation: 0` 关闭初始动画（初始动画应由服务端渲染结果的 SVG 动画完成）。
-下面是一个在 CodeSandbox 中搭建一个例子，先用 SVG 做服务端渲染，再用 Canvas 做客户端渲染的效果。建议点击“Open Sandbox”学习具体实现的代码。
-
-> 如果希望使用 Canvas 做服务端渲染，或使用 SVG 做客户端也是类似的，不再赘述。
-
-<iframe src="https://codesandbox.io/embed/apache-echarts-5-3-ssr-csr-0jvsdu?fontsize=14&hidenavigation=1&theme=dark"
- style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
- title="Apache ECharts 5.3 SSR + CSR"
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
-
-我们可以看到，从用户体验的角度，几乎感受不到二次渲染的过程，整个切换效果是非常无缝衔接的。你也可以像上面的例子中一样，在加载 `echarts.js` 的过程中使用 [pace-js](https://www.npmjs.com/package/pace-js) 之类的库实现显示加载进度条的效果，来解决 ECharts 尚未完全加载完之前没有交互反馈的问题。
+从用户体验的角度，几乎感受不到二次渲染的过程，整个切换效果是非常无缝衔接的。你也可以像上面的例子中一样，在加载 `echarts.js` 的过程中使用 [pace-js](https://www.npmjs.com/package/pace-js) 之类的库实现显示加载进度条的效果，来解决 ECharts 尚未完全加载完之前没有交互反馈的问题。
使用服务端渲染 SVG 加上客户端 ECharts 懒加载的方式，其优点是，能够在首屏快速展示图表，而懒加载完成后可以实现所有 ECharts 的功能和交互；而缺点是，懒加载完整的 ECharts 需要一定时间，在加载完成前无法实现除高亮之外的用户交互（在这种情况下，开发者可以通过显示“加载中”来解决无交互反馈带来的困惑）。这个方案也是目前比较推荐的对首屏加载时间敏感，对功能交互完整性要求高的方案。
