diff --git a/docs/.vuepress/config/silder.js b/docs/.vuepress/config/silder.js
index cf1912f..1627331 100644
--- a/docs/.vuepress/config/silder.js
+++ b/docs/.vuepress/config/silder.js
@@ -4,8 +4,9 @@ export default [
     link: '/技术总结/',
     collapsible: true,
     children: [
-      '/技术总结/踩坑总结/一个项目安装不同版本的依赖包',
       '/技术总结/踩坑总结/MIME类型',
+      '/技术总结/踩坑总结/一个项目安装不同版本的依赖包',
+      '/技术总结/踩坑总结/echarts两种渲染方式的应用场景',
       '/技术总结/踩坑总结/React.Fragment和空标签的区别',
       '/技术总结/踩坑总结/React常用的内置hooks',
       '/技术总结/踩坑总结/react的状态管理',
diff --git "a/docs/\346\212\200\346\234\257\346\200\273\347\273\223/\350\270\251\345\235\221\346\200\273\347\273\223/echarts\344\270\244\347\247\215\346\270\262\346\237\223\346\226\271\345\274\217\347\232\204\345\272\224\347\224\250\345\234\272\346\231\257.md" "b/docs/\346\212\200\346\234\257\346\200\273\347\273\223/\350\270\251\345\235\221\346\200\273\347\273\223/echarts\344\270\244\347\247\215\346\270\262\346\237\223\346\226\271\345\274\217\347\232\204\345\272\224\347\224\250\345\234\272\346\231\257.md"
new file mode 100644
index 0000000..2e6b844
--- /dev/null
+++ "b/docs/\346\212\200\346\234\257\346\200\273\347\273\223/\350\270\251\345\235\221\346\200\273\347\273\223/echarts\344\270\244\347\247\215\346\270\262\346\237\223\346\226\271\345\274\217\347\232\204\345\272\224\347\224\250\345\234\272\346\231\257.md"
@@ -0,0 +1,28 @@
+---
+title: echarts两种渲染方式的应用场景
+lang: zh-CN
+feed:
+  enable: true
+description: echarts两种渲染方式的应用场景
+---
+
+> 本文作者：[onresize](https://github.com/onresize)
+
+
+### echarts渲染方式svg和canvas区别
+- ECharts 支持使用 SVG 和 Canvas 两种方式来渲染图表。
+
+`SVG 方式渲染图表：`
+- 优点：SVG 图像可以被搜索引擎搜索、放大缩小而不影响质量、支持无限放大。
+- 缺点：在移动设备上的性能不如 Canvas。
+
+`Canvas 方式渲染图表：`
+- 优点：在移动设备上性能更好，支持复杂的动画和过渡效果。
+- 缺点：Canvas 生成的图像不能被搜索引擎搜索，放大或缩小可能会失真。
+
+你可以在初始化 ECharts 实例时通过设置 renderer 参数来指定使用哪种渲染方式：
+```js
+var myChart = echarts.init(domElement, null, { renderer: 'canvas' });
+// 或者
+var myChart = echarts.init(domElement, null, { renderer: 'svg' });
+```
\ No newline at end of file