SVG 动画参数提取

设计工具

svgator

版本：V5.3.2

背景

由于SVG Text标签并无background-*属性所以要实现文字背景，尤其是圆角矩形的背景相对比较困难，虽然有一定的方案但仍存在各种各样的局限性，最终表现效果并不理想。反观ECharts则实现的非常完美。通过本文我们简单探究下echarts是如何实现SVG圆角矩形背景的。

版本：V5.3.2

背景

由于SVG Text标签并无background-*属性所以要实现文字背景相对比较困难，ECharts实现Text的方案是基于Text的外层包围盒，来绘制矩形实现文字背景的。 通过本文我们简单探究下ECharts是如何实现获取Text的包围盒的。

版本：V5.3.2

背景

ECharts底层渲染引擎为zrender。zrender的默认渲染器为canvas。但同时支持svg渲染。本文通过一个简单的饼图示例来简单探究下echarts或zrender是如何实现同时支持canvas和svg渲染的。

版本：V5.1.1

背景

饼图、折线图、柱状图、矩形树图等图表都可能采用标签来展示详细数据。但在大数据量下针对不同的图表可能存在(包含但不仅限)如下情况:

1. 饼图要防止标签的位置已存在标签，需要对当前待绘制的标签移动位置以防止重叠。
2. 折线图数据间隔过短导致标签重叠，需要间隔显示。
3. 矩形树图数据块太小无法容纳标签需要隐藏。

面对上述情况应该如何应对？我们尝试从ECharts的源码中来一探究竟。

结论

饼图

饼图的label防重大致步骤如下：

1. 根据饼图的半径,指示线的长度初步计算标签的位置。
2. 分左右处理标签的重叠问题
3. 在垂直方向将标签在可用空间内无重叠分布
4. 如果无重叠分布后所需空间大于可用空间则均匀分布
5. 分上下分别计算所需空间与标签半径(饼图的半径加指示线的长度)的大小以较大的作为长轴，标签半径作为短轴构建椭圆。
6. 将标签均匀分布在椭圆方程上
7. 渲染时候如果标签仍会与已有标签重叠则隐藏该部分标签，如果标签文字的长度大于标签的空间大小则对标签文字进行截断

折线图与矩形树图

折线图与矩形树图则相对简单，只经过了对标签的简单布局以及LabelManager.ts中对仍重叠的标签的隐藏处理，即饼图防重中的步骤7。

作为已在成都定居的非知名蓉吹 ，初见此问题我的内心深处是拒绝的。我一定要为成都翻身！

然而…..

该问题下的统计结果
在成都面前，所有的城市都均沦为了长尾 。

静态图标主要用于传达信息、动效则赋予了它更多的功能。例如：引导用户进行下一步操作、将用户的目光聚焦到重要的信息上、使用户的操作得到更好的反馈、提升产品的品牌形象。

SVG元素Path标签的d属性同样可以使用transition来实现平滑过度、本文简单介绍如何使用transition来平滑过度path标签的路径，有那些限制，以及如何解决。

版本：V5.0.2

背景

ECharts在大规模数据渲染下采用了多层画布技术，对于背景元素、数据元素、交互提示类元素做分层处理对于样式稳定的元素单独绘制，不再重绘。用于性能优化。

ECharts如何去实现多层画布的？我们尝试从ECharts的源码中来一探究竟。

背景

ECharts在大规模数据渲染下性能表现优秀，基于现有的知识体系我们猜测可能应用了：

1. 数据抽取策略，在已确认的小画布大数据，数据无法完全展示的场景下对数据做采样仅展示关键帧数据。
2. 离屏渲染一种比较常见的针对复杂场景、重复元素的canvas性能优化解决方案。
3. 多层画布对于背景元素、数据元素、交互提示类元素做分层处理对于样式稳定的元素单独绘制，不再重绘。

ECharts应用了哪些性能优化方案？如何去实现的？我们根据宿爽 - 16毫秒的挑战_图表库渲染优化尝试从ECharts的源码中来一探究竟。