简介

Vue Playground支持选择不同的Vue版本，实时编码并实时预览。本文主要介绍其如何实现选择不同的Vue版本。

简介

Vue Playground支持选择不同的Vue版本，实时编码并实时预览。本文主要介绍其如何实现实时编码和预览。

局域网自定义域名

背景

由于家庭网络环境日渐复杂，服务器上跑的工程项目越来越多。人工强行基于IP+端口的方式来记忆各个服务着实有些费劲。本文简单介绍一下折腾自定义域名的过程。

拓扑

一个并不完整的家庭网路拓扑

正向代理与反向代理

背景

很自然的知道访问Google需要的代理是正向代理，通常情况下Nginx做的Web服务代理是反向代理。但到底什么是正向代理，什么是反向代理一直没有一个特别明确的感知。这里做个简单的整理。

图文解释

SVG后处理

背景

SVG规范中有关于style的定义，支持方式为HTML的Style。但在一些非浏览器环境下，对于Style的支持性并不好普遍常见于PPT,Sketch等场景。本文介绍了一种简单的方式来对SVG进行后处理以对PPT,Sketch等场景进行适配。同时介绍几种简单具体场景。

NPM Package

svg-visitor:基于访问者模式来遍历SVG元素。

原理

受 AST Visitor的启发这里设计了一个svg-visitor，来根据标签类型访问标签，并对标签元素进行处理。

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。