半环形进度图效果:
概述
基于echarts仪表盘,改造半环形进度图 扇形饼状图,半环形图,vue3实现 封装组件为ts+setup语法糖+scss
详细
半环形进度图网上很少,需求设计是需要带有色块间隔开并且可以动态指定进度百分比,我通过echarts框架的仪表盘配置修改,效果非常nice
- 应用步骤1: 通过npm/yarn 下载echarts或者html页面引入echartjs的cdn地址 可参照官方引入
- 应用步骤2:根据需要显示的进度数动态计算环形的起止刻度,设置后可显示
-
最终效果
-
封装为ProcessChart组件直接使用:
项目地址:
vue3实现,封装组件ProcessChart.vue
点击顶部即可下载