前端vue显示柱状图_CSS3 - vue中纯css实现柱状图表效果

背景

以前我们制作柱状图都用echarts或者其他同类型的图表插件

这次是个移动端的需求，而且这个图表需要动画

使用echarts就会显得过重，而且动画达不到我想要的效果(主要是我自己愚蠢想不到好的动画办法)。

先来看下效果图：

几个柱状图分数不满时：

几个满分柱图：

还有完整的元素组合动画效果：

ps：圆环+进度的效果制作，见下篇(圆环动画效果-3)。

从最后一张图中可以看出这个需求，柱状图是在一个swiper当中实现的。

swiper翻页，柱状图逐个增长，圆环进度增长。

废话不多说，看处理思路~

分析一波设计稿，得到解题思路：

看着是个图表，但是是不是我们的思维都被图表的形象给固化了呢？

因为如果我旋转图片将得到下面的样子：

用微信看图工具自带的rotate功能旋转原图，我们再看到的就是4个进度条~

所以，我这个效果的核心，就是用进度条的思路做的。再把进度条的水平方向结构旋转过来不就可以