From 77ec6f1a8799f4870fc1568f4ae4fdac08ff3997 Mon Sep 17 00:00:00 2001 From: onresize Date: Mon, 8 Jul 2024 16:38:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0echarts=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E6=96=B9=E5=BC=8Fsvg=E5=92=8Ccanvas=E5=8C=BA=E5=88=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/config/silder.js | 3 +- ...24\347\224\250\345\234\272\346\231\257.md" | 28 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 "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" 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