老板不让用ECharts，还想让我画很多圆环！

主要观点总结

本文介绍了一个使用Vue 3和Canvas实现的多功能圆环图组件。该组件支持自定义圆环大小、宽度和颜色比例配置属性，并能根据外部传入的比例数据动态绘制多个环形区域。

关键观点总结

关键观点1: 需求简介和技术选型

文章首先介绍了项目需求，即要在页面上动态渲染多个表格，并在表格内实现若干圆环。考虑到性能和项目大小的因素，最终选择不使用ECharts，而是使用CSS和Canvas来实现需求。

关键观点2: 圆环组件简介

为了复用性，将绘制圆环的功能封装成了项目可直接复用的组件。组件支持自定义配置属性，包括圆环大小、宽度和颜色比例等。

关键观点3: 技术实现

使用Vue 3和TypeScript构建组件框架，通过Canvas实现动态绘制环形图。详细描述了初始化Canvas、绘制基本圆环以及绘制多个环形区域的过程。

关键观点4: 组件使用

最后，给出了组件的使用示例，包括如何引入组件、设置属性以及样式调整等。

免责声明