vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现

半环形进度图效果:

tupian1.jpg

概述

基于echarts仪表盘，改造半环形进度图 扇形饼状图,半环形图,vue3实现 封装组件为ts+setup语法糖+scss

详细

半环形进度图网上很少，需求设计是需要带有色块间隔开并且可以动态指定进度百分比，我通过echarts框架的仪表盘配置修改，效果非常nice

  • 应用步骤1: 通过npm/yarn 下载echarts或者html页面引入echartjs的cdn地址 可参照官方引入

  • 应用步骤2：根据需要显示的进度数动态计算环形的起止刻度，设置后可显示


    tupian3.png
tupian4.png

  • 最终效果


    tupian5.png

  • 封装为ProcessChart组件直接使用:


    1689672979196085568.png

项目地址:

vue3实现,封装组件ProcessChart.vue

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容