vue实现一个动效柱状图

接手了一个需求的时候，其中有个 UI图是这样的：

按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。

不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张图画出来也要不了多长时间，不会耽误项目进度的，于是开搞。

首先，先把图拆解成几份可以用代码画出来的图形，如下：

1. 柱状图形，就是圆角长方形，竖直红色柱与竖直红色柱之间的空白，也是一个竖直的圆角长方形，只不过是透明的，作用是底部构建圆角
2. 底部的基座，是一个水平长方形，只不过这个长方形除了看到的那一部分红色外，还有z-index大于红色竖直长方形、小于透明柱状上半部分，用于遮掩红色柱底部与圆角透明柱底部出现的空白