CSS3 - vue中纯css实现柱状图表效果

背景

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

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

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

先来看下效果图:

几个柱状图分数不满时:

几个满分柱图:

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

ps:圆环+进度的效果制作,见下篇。

从最后一张图中可以看出这个需求,柱状图是在一个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分展示规则 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识分享

Android自定义View绘制前的准备:DecorView创建 & 显示

回忆前文:Android自定义View基础:ViewRoot、DecorView & Window的简介,可看出最后1步 = 绘制

14620
来自专栏业余草

常见算法的时间复杂度 Ο(1)<Ο(log2n)<Ο(n)<Ο(nlog2n)<Ο(n2)<Ο(n3)<…

说实话,我是真的不懂算法。但是,我知道一个算法的好坏,通常时间复杂度是一个评价的指标之一。

27220
来自专栏机器学习与python集中营

python代码调试神器PySnooper

| 导语 最近在github上冒出了一个python的debug神器PySnooper,号称在debug时可以消灭print。那么该工具有哪些优点呢,如何使用该...

24320
来自专栏Spark学习技巧

Spark Core读取ES的分区问题分析

ES也是比较火热,在日志数据分析,规则分析等确实很方便,说实话用es stack 浪尖觉得可以解决很多公司的数据分析需求。极客时间下周一要上线新的ES课程,有需...

20740
来自专栏挖数

Python人脸合成,秒变胡歌王俊凯

如今,随着技术的不断进步,“变脸”技术不再是四川喜剧的“独门武功”。运用机器学习的方法,我们同样可以实现人脸“融合”。当然这里说的人脸融合指的是将两个人的人脸照...

26210
来自专栏IT技术精选文摘

面试题: 了解OO的SOLID原则吗

一个类只应承担一种责任。换句话说,让一个类只做一件事。如果需要承担更多的工作,那么分解这个类。

13520
来自专栏Bingo的深度学习杂货店

Leetcode 【216、769】

这道题一看要求输出所有满足题意的组合,很明显 DFS 回溯法进行求解,属于模板题。不过这倒题需要注意几个剪枝情况:

7710
来自专栏Java研发军团

数据结构+算法(第13篇):精通二叉树的“独门忍术”——线索二叉树(上)

如果要写出非递归的遍历算法,无论用哪种遍历方法,根据《再不会“降维打击”你就Out了!》《神力加身!动态编程》《史上最猛之递归屠龙奥义》三篇文章中讲到的知识和技...

36320
来自专栏Jerry的SAP技术分享

VM stack in Chrome

http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from...

12810
来自专栏Spark学习技巧

Java并发锁(一):悲观锁与乐观锁

今天我们来聊下线程中的悲观锁和乐观锁,首先提到"悲观锁","乐观锁"提到这两个名词,大家可能会先想到数据库。注意啦,我们这里讲的是多线程中的锁,而不是数据库中的...

30820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励