小程序圓形進度條及面積圖實現(xiàn)的方法
前言
以下兩個圖可以用來展示完成進度或者進度詳情,圖1用的是css來繪制進度條,圖2用canvas來繪制面積圖。
效果預(yù)覽
圓形進度條
傳進去的有三個參數(shù)
字段 | 意思 |
---|---|
currentVal | 當前值 |
maxVal | 最大值 |
status | 1 上漲 | 2 下跌 |
<circle :maxVal="maxVal" :currentVal="currentVal" :status="2" />
重點就是左右各畫一半然后利用transform: rotate()
旋轉(zhuǎn)隱藏起來,接著利用傳進來的當前值計算進度并進行旋轉(zhuǎn)展示。
左右各一半如下圖:
setCircle() { const { currentVal, maxVal } = this; // NO1 if (currentVal > maxVal / 2) { this.leftRotate = this.formatDegree(maxVal / 2); this.rightRotate = this.formatDegree(currentVal - maxVal / 2); } else { // NO2 this.leftRotate = this.formatDegree(currentVal); } this.pointRotate = this.formatDegree(currentVal); }, // NO3 計算旋轉(zhuǎn) formatDegree(percent) { return -136 + (360 / this.maxVal * percent); }
說明:
NO1: 如果當前值大于最大值的50%則證明左右兩邊都需要計算展示進度
NO2: 走到這里則證明當前值小于最大值的一半只需要展示左邊進度
NO3: 一個圈360度 / 最大值 * 多少份
關(guān)于圓點跟隨我這里的做法是設(shè)置一個一模一樣大小的盒子定位上去,并設(shè)置成圓形這樣就會和進度條重合,然后根據(jù)當前值旋轉(zhuǎn)就能準確跟隨在進度條的末端。
面積圖
字段 | 意思 |
---|---|
currentVal | 當前值 |
maxVal | 最大值 |
sourceData | 數(shù)值分布情況 |
<combat :maxVal="maxVal" :currentVal="currentVal" :sourceData="sourceData" />
我這里的做法是先做個四邊形然后進行旋轉(zhuǎn)變成一個棱形在根據(jù)傳入的數(shù)據(jù)進行繪制。
// 設(shè)置圖表信息 async setUppixelRatio() { const pixelRatio = await this.getSystemInfo(); const { canvas: res, ctx } = this; let canvas = res.node; // 放大canvas 解決模糊問題 canvas.width = res.width * pixelRatio; canvas.height = res.height * pixelRatio; this.originX = canvas.width / 2; this.originY = canvas.height / 2; this.startAngle = Math.PI + Math.PI / this.sourceData.length; // 最大值分為若干等分 this.combatMaxVal = this.maxVal / this.sourceData.length; this.fitAngle(); // 縮小canvas ctx.scale(pixelRatio, pixelRatio); },
在手機上中canvas會變模糊,在這里我們先將canvas放大然后縮小就可以解決模糊的問題了。其他的都是一些畫線操作。
最后
源碼在這demo以上的兩個demo是用uni-app開發(fā)的,如果需要運啟動得用HBuilder運行。
到此這篇關(guān)于小程序圓形進度條及面積圖實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序圓形進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法,涉及JavaScript基于函數(shù)的判定及調(diào)用previousSibling與nextSibling的相關(guān)技巧,需要的朋友可以參考下2016-01-01Javascript 拖拽雛形中的一些問題(逐行分析代碼,讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽雛形中的一些問題(逐行分析代碼,讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01JavaScript庫urlcat?之URL構(gòu)建器庫
這篇文章主要介紹了JavaScript庫urlcat之URL構(gòu)建器庫,urlcat?是一個小型的JavaScript庫,使構(gòu)建URL非常方便并防止常見錯誤。下文來看對其詳細介紹吧,需要的小伙伴可以參考一下2022-02-02JavaScript高級程序設(shè)計 讀書筆記之十 本地對象Date日期
本地對象Date日期操作實現(xiàn)方法,需要的朋友可以參考下2012-02-02JavaScript學(xué)習(xí)筆記(三):JavaScript也有入口Main函數(shù)
大家都知道在c和java中,有main函數(shù)貨main方法作為一個程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運行的,我們?nèi)匀豢梢蕴摌?gòu)出一個main函數(shù)來作為程序的起點,這樣一來不僅可以跟其他語言統(tǒng)一了,而且說不定你會對JS有更深的理解。感興趣的小伙跟著小編一起學(xué)習(xí)吧2015-09-09