项目中使用简单的立体3D柱状图，不用引入外部组件纯css也能实现

在一些项目需求中，可能会遇到下面这种场景，3d柱状图来展示百分比，但是又不想引入外部组件，下面就用纯css给大家封装了一个组件

先赞后看，养成习惯   

<template><view class="lui-column-bg" :style="{width:width+'rpx',height:height+'rpx'}" :class="color"><view class="lui-inner" :class="colorCLass" :style="{ height: num + '%' }"></view><view class="text-box"><view class="label">{{ label }}</view><view class="value">{{ num ? num + "%" : "暂无" }}</view></view></view>
</template>
<script>export default {name: "Cylinder",props: {label: {type: String,default: ""},num: {type: Number,default: 50}, // 这个就是圆柱中的数据占比 +width: {type: Number,default: 110},height: {type: Number,default: 60}},data() {return {};},computed: {colorCLass() {if (this.num >= 51) {return "success-class";}if (this.num > 30 && this.num <= 50) {return "warning-class";}if (this.num > 0 && this.num <= 30) {return "danger-class";}if (this.num == 0) {return "null-class"}},color() {if (this.num >= 51) {return "success";}if (this.num > 30 && this.num <= 50) {return "warning";}if (this.num > 0 && this.num <= 30) {return "danger";}if (this.num == 0) {return "null"}},},mounted() {},methods: {}};
</script>
<style lang="less" scoped>.lui-column-bg {position: relative;width: 120rpx;height: 60rpx;margin: 0 10rpx;border-left: 2rpx solid red;border-right: 2rpx solid red;// margin: 100px;}.lui-column-bg:before {position: absolute;content: "";display: block;height: 40rpx;width: 100%;border-radius: 50%;top: -21rpx;z-index: 63;border: 2rpx solid red;}.lui-column-bg:after {position: absolute;content: "";display: block;height: 60rpx;width: 100%;border-radius: 50%;bottom: -30rpx;background-color: #e8e8e8;}.lui-inner {position: absolute;bottom: 0;width: 100%;height: 50%;text-align: center;}.lui-inner::before {position: absolute;content: "";display: block;height: 40rpx;width: 100%;// background-color: #eec967;border-radius: 50%;top: -21rpx;z-index: 11;}.lui-inner:after {position: absolute;z-index: 10;content: "";display: block;height: 60rpx;width: 100%;border-radius: 50%;background-color: #ff6868;bottom: -28rpx;}.text-box {position: absolute;z-index: 20;font-size: 14px;top: 50%;text-align: center;width: 100%;.label {margin-bottom: 10px;}.value {color: #fff;}}.danger-class {background-color: #f294a0;&::before {background-color: #e1677a;}&::after {background-color: #f294a0;}}.success-class {background-color: rgb(0, 156, 222);&::before {background-color: rgb(1, 111, 160, 1);}&::after {background-color: rgb(0, 156, 222);}}.warning-class {background-color: rgb(255, 165, 0, 1);&::before {background-color: rgb(177, 112, 0);}&::after {background-color: rgb(255, 165, 0, 1);}}.danger {color: #e1677a !important;border-color: #e1677a !important;&::before {border-color: #e1677a !important;}}.success {color: rgb(0, 156, 222) !important;border-color: rgb(0, 156, 222) !important;&::before {border-color: rgb(0, 156, 222) !important;}}.warning {.value {color: #fff;}color: rgb(255, 165, 0, 1);border-color: rgb(255, 165, 0, 1) !important;&::before {border-color: rgb(255, 165, 0, 1) !important;}}.null {.value {color: #000;}}
</style>

 在需要使用的地方直接引入使用就好了，只传百分比，宽高有需要再传