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