之前咱們製做柱狀圖都用echarts或者其餘同類型的圖表插件css
此次是個移動端的需求,並且這個圖表須要動畫html
使用echarts就會顯得太重,並且動畫達不到我想要的效果(主要是我本身愚蠢想不到好的動畫辦法)。vue
幾個柱狀圖分數不滿時:微信
幾個滿分柱圖:echarts
還有完整的元素組合動畫效果:工具
ps:圓環+進度的效果製做,見下篇(圓環動畫效果-3)。佈局
從最後一張圖中能夠看出這個需求,柱狀圖是在一個swiper當中實現的。字體
swiper翻頁,柱狀圖逐個增加,圓環進度增加。flex
廢話很少說,看處理思路~動畫
看着是個圖表,可是是否是咱們的思惟都被圖表的形象給固化了呢?
由於若是我旋轉圖片將獲得下面的樣子:
用微信看圖工具自帶的rotate功能旋轉原圖,咱們再看到的就是4個進度條~
因此,我這個效果的核心,就是用進度條的思路作的。再把進度條的水平方向結構旋轉過來不就能夠了。
進度條的核心是更改元素的寬度(橫向進度條的實現見這篇文章:《css案例 - 評分效果的星星✨外衣》)
咱們如今改變爲垂直方向,就須要更改元素的高度便可。
重點看div.row的結構,分上中下三段:
上 - 分數 div.data-txt
中 - 柱狀圖 div.progress
實際分值(綵帶條)span.pg-data
下 - 文案 div.week
div.row的樣式:
div.row 正常的盒模型樣式
div.data-txt 正常的字體樣式
div.progress
div.row.ani > div.progress
每個有ani樣式的div.row結構,其下邊的子元素div.progress的動畫延遲。
這裏用scss,快速建立了1-6條ani內部的progress的動畫延遲時間。這裏只是快捷寫法
編譯後的代碼:
span.pg-data
就是一個綵帶條,塊級化後高度隨父親div.progress的高度。父親的高度隨真實數據。
div.week 底部文案正常的文字樣式
這個是沒有得分時,0分的狀態。屬於項目特殊需求,無關緊要。
一個柱圖有了,就把第一個循環獲得四個。
可是他們須要水平方向平均分佈,因而我這裏用了flex。(ps:你也能夠用float或者其餘。就是佈局問題了)
都是一些讓四個div.row橫向兩端均勻排列
ps:可忽略中間對before的設置,是爲了實現四個柱圖底部的橫線效果。
其中:
Data爲1-4周的數據,進行循環獲得四個柱狀圖div.row
Points爲實際得分。須要根據具體分值展現不一樣效果:
aniShow是指是否觸發動畫,若是否就是什麼都不展現,高度就爲0。
若是是那就計算分值是否>=100:是的話就展現100,但這裏得把px轉換爲rem單位,因此用100*1.5/100;
若是分值==0,由於設計稿的緣由,還要漏出灰色一小段,因此強制改爲0.04,;
剩下的0<積分值<100,那就用(實際積分值*1.5)/100。將分值進行百分比處理
源碼以下:
1 .data01-charts 2 .row(v-for='item,index in Data' :key="index" :class='aniShow ? "ani":""') 3 .data-txt {{item.Points > 0 ? item.Points : '無數據'}} 4 .progress(:class='item.Points == 0 ? "nodata" : ""' 5 :style="'height: ' + (aniShow ? (item.Points >= 100 ? (100 * 1.5) / 100 : item.Points == 0 ? 0.04 : item.Points * 1.5 / 100) : 0) +'rem'") 6 span.pg-data 7 .week {{item.WeekName}}
公式:(100[實際分數] * 1.5[轉換爲px高度]) / 100[轉化爲rem高度],grade==0 : // 0分展現規則