首页 前端知识 vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现

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

2024-06-03 12:06:16 前端知识 前端哥 804 627 我要收藏

半环形进度图效果:

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 点击顶部即可下载

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10627.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!