CSS3 - vue pure css to achieve the effect of a bar chart

background

Before we make the histogram are used echarts or other similar types of charts plug-in

This is a mobile end demand, and this chart takes animation

Use echarts will become too heavy, and animation to achieve the effect I want (mostly my own stupid way to think of good animation).

FIG first look at the effect of:

Several histogram when dissatisfaction scores:

FIG out several Column:

There are elements of a complete combination of animation:

ps: the effect of ring + progress made, see next.

The last one can be seen in FIG this demand, a histogram is implemented among swiper.

swiper page, column-by-growth, growth ring schedule.

Ado, look roadmap ~

Wave analysis design draft, get problem-solving ideas:

Looking at a chart, but it is not what we thought were the image of the chart to cure it?

Because if I rotate a picture you will get the following way:

Figure tool rotation and rotate artwork comes with a micro-channel, we'll see a progress bar is 4 ~

So, the core of my this effect, the idea is to use the progress bar to do. Then the horizontal structure of rotating over the progress bar is not on it.

The core of the progress bar is to change the width of the element (achieve horizontal progress bar, see the article: " CSS Case - Rating stars ✨ coat effect ")

We are now changed to the vertical direction, we need to change the height of the element can be .

With the idea, let's implement a histogram:

Look at the focus div.row structure , in the next three sub-sections:

On - Score div.data-txt

- the histogram div.progress

　　Actual value (ribbon bar) span.pg-data

Under - copy div.week

div.row style:

div.row normal box model style

div.data-txt normal font style

div.progress

Initialization height of zero, which is the height of the bar graph on zero.
transition monitor changes in height, achieve a high degree increments animation
后期数据变化，更改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分展示规则