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分展现规则