CSS3 - vue中純css實現柱狀圖表效果

背景

之前咱們製做柱狀圖都用echarts或者其餘同類型的圖表插件

此次是個移動端的需求，並且這個圖表須要動畫

使用echarts就會顯得太重，並且動畫達不到我想要的效果（主要是我本身愚蠢想不到好的動畫辦法）。

先來看下效果圖：

幾個柱狀圖分數不滿時：

 

幾個滿分柱圖：

還有完整的元素組合動畫效果：

ps：圓環+進度的效果製做，見下篇（圓環動畫效果-3）。

 

從最後一張圖中能夠看出這個需求，柱狀圖是在一個swiper當中實現的。

swiper翻頁，柱狀圖逐個增加，圓環進度增加。

廢話很少說，看處理思路~

 

分析一波設計稿，獲得解題思路：

 看着是個圖表，可是是否是咱們的思惟都被圖表的形象給固化了呢？

由於若是我旋轉圖片將獲得下面的樣子：

 

 

用微信看圖工具自帶的rotate功能旋轉原圖，咱們再看到的就是4個進度條~

因此，我這個效果的核心，就是用進度條的思路作的。再把進度條的水平方向結構旋轉過來不就能夠了。

進度條的核心是更改元素的寬度（橫向進度條的實現見這篇文章：《css案例 - 評分效果的星星✨外衣》）

咱們如今改變爲垂直方向，就須要更改元素的高度便可。

 

思路有了，咱們先來實現一個柱狀圖：

重點看div.row的結構，分上中下三段：

上 - 分數 div.data-txt

中 - 柱狀圖 div.progress

　　實際分值（綵帶條）span.pg-data

下 - 文案 div.week

div.row的樣式：

div.row 正常的盒模型樣式

div.data-txt 正常的字體樣式

div.progress

• 初始化高度爲零，也就是柱狀圖的高度就爲0。
• transition監聽高度的變化，實現高度遞增動畫效果
• 後期數據變化，更改progress標籤上的style:height便可

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的設置，是爲了實現四個柱圖底部的橫線效果。

 

vue邏輯源碼實現整個效果

 

其中：

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分展現規則