半環(huán)形進(jìn)度圖效果:
tupian1.jpg
概述
基于echarts儀表盤(pán)抄课，改造半環(huán)形進(jìn)度圖 扇形餅狀圖,半環(huán)形圖,vue3實(shí)現(xiàn) 封裝組件為ts+setup語(yǔ)法糖+scss
詳細(xì)
半環(huán)形進(jìn)度圖網(wǎng)上很少，需求設(shè)計(jì)是需要帶有色塊間隔開(kāi)并且可以動(dòng)態(tài)指定進(jìn)度百分比雳旅，我通過(guò)echarts框架的儀表盤(pán)配置修改跟磨，效果非常nice
- 應(yīng)用步驟1: 通過(guò)npm/yarn 下載echarts或者h(yuǎn)tml頁(yè)面引入echartjs的cdn地址 可參照官方引入
-
應(yīng)用步驟2：根據(jù)需要顯示的進(jìn)度數(shù)動(dòng)態(tài)計(jì)算環(huán)形的起止刻度，設(shè)置后可顯示
tupian3.png
tupian4.png
-
最終效果
tupian5.png -
封裝為ProcessChart組件直接使用:
1689672979196085568.png
項(xiàng)目地址:
vue3實(shí)現(xiàn),封裝組件ProcessChart.vue
