数据图表之圆柱图
需求是这样的,需要一个圆柱实现展示内存的占用变化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .column{ position: relative; width: 300px; height: 100px; border-left: 1px gray solid; border-right: 1px gray solid; margin: 100px auto; background-color: #00AFE9; } .column:before{ position: absolute; content: ''; display: block; height: 20px; width: 100%; border: 1px solid; border-radius: 50%; top: -10.5px; z-index: 1; } .column:after{ position: absolute; content: ''; display: block; height: 20px; width: 100%; border-bottom: 1px solid; border-radius: 50%; bottom:-10px; background-color: #00AFE9; } .inner1{ position: relative; width: 100%; height: 50px; background-color: white; text-align: center; } .inner1:after{ position: absolute; content: ''; display: block; height: 20px; width: 100%; border-radius: 50%; background-color: white; bottom: -10px; } .inner1 h5{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; } </style> </head> <body> <div id="app"> <div class="column"> <div class="inner1" :style="getHeight()"> <h5>{{msg}}G/1T</h5> </div> </div> <button @click="add">增加</button> </div> <script type="text/javascript" src="https://unpkg.com/vue"></script> <script> let vm=new Vue( { el:'#app', data(){ return{ msg:0 } }, methods:{ getHeight(){ let num=null; num=this.msg/1025; num=100-(num*100); return{height: num+'px'} }, add(){ this.msg+=100 } } } ) </script> </body> </html>
按钮的作用是更加方便观看效果。这里引入了vue.js
原生也是可以轻松实现的 要是想要稍微一点的效果 还可以加上
transition 设置动画