建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

日常生产生活中，我们会经常读到或使用各种类型的图表。圆环（圆弧）便是一种较常见的类型，用于直观展现某一数据指标占整体的比例。本文以 HTML Canvas 的实现为主（当然，SVG 党可以在了解原理后自行实现），逐层介绍圆环图表开发的一些主要思路和原理。 图1 所示是一些我们平…

在 Vue 中，filters 与 methods、computed、watch 等有所不同，在 filters 中不能对原始的响应式数据进行更改，而只是改变其渲染的结果，并返回过滤后的文本。 所以，可以将一些常用的文本格式化工具函数封装成 filters。

下面代码中的 this 上挂载了 canvas.getContext('2d') 获取的 ctx。 下面代码中使用的 ctx.width 是在获取到 ctx 的时候手动挂载上去方便使用的。 下面代码中 source 为处理后的数据。 R1、R2 分别表示圆环的内径和外径。 下面…