圆柱注水统计图实现

项目需要，前段时间简单研究了下怎么实现把数据用圆柱中注水的方式表现出来，设计图如下：

具体需求：数据范围[0, 40]，不要求动态显示（该图会导出为pdf），根据数据的多少控制注水的高度；

【如果需要动态的过渡效果，可以用CSS transition属性，把样式加在对应的div上

{
    position: absolute
    transition: height xxxpx;
    bottom: xxxpx;  /* 固定底部，改变过渡效果的方向为从下往上*/
}

注意：transition属性默认是从上往下、从左往右过渡，要改变方向需要用position+bottom/right控制

】

水柱顶部和周边颜色不一样

技术细节：圆柱是用CSS画的，没有用背景图；图方便用了jQuery（原生js一样，只是语法不一样）

对外参数：[0, 40]之间的某个数值

实现效果：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .statistics{
      width: 500px;
      height: 500px;
    }
    /*圆柱容器*/
    .cylinder {
      position: relative;
      height: 400px;
      width: 252px;
      margin: 50px 0;
      z-index: 999;
      border: 3px solid #000;
      border-top: none;
      border-bottom: none;
      display: inline-block;
    }
    .cylinder:before {
      position: absolute;
      top: -52px;
      left: -3px;
      content: "";
      width: 252px;
      height: 100px;
      border-radius: 50%;
      z-index: 99;
      border: 3px solid #000;
    }
    .cylinder:after {
      position: absolute;
      bottom: -50px;
      left: -3px;
      content: "";
      width: 252px;
      height: 100px;
      border-radius: 50%;
      z-index: 9;
      border: 3px solid #000;
      border-top: 1px dashed #000;
      background-color: #77BEE6;
    }
    /* 为控制数据为0时，圆柱底部颜色，另加类名 */
    .zero:after{
      background-color: #fff;
    }
    /*圆柱填充区*/
    .level{
      position: absolute;
      max-height: 400px;
      width: 252px;
      background-color: #77BEE6;
      bottom: 0;
      z-index: 999;
      opacity: .8;  /* 透明度 */
    }
    .level:before {
      position: absolute;
      top: -50px;
      content: "";
      width: 252px;
      height: 100px;
      border-radius: 50%;
      z-index: 99;
      border: 1px solid #000;
      background-color: #97D1EB;
    }
    /* 数据标识 */
    .line{
      border: 2px dashed #000;
      width: 136px;
      height: 0;
      display: inline-block;
      position: relative;
      bottom: 46px;
      left: -3px;
    }
    .num{
      float: right;
      position: relative;
      right: -32px;
      top: -19px;
      font-size: 24px;
    }
  </style>
</head>
<body>
<div class="statistics">
  <div class="cylinder" id="cylinder">
    <div class="level" id="level"></div>
  </div>
  <div class="line" id="line">
    <span class="num" id="num">10</span>
  </div>
</div>
</body>
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
  //获取数据
  var num = $("#num").text();
  //边界值判断及异常处理
  if(num <= 0){
    $("#level").addClass("level-zero");
    $(".level-zero").css("display",'none');
    $("#cylinder").addClass("zero");
    if(num < 0){
      alert("数据异常！最小值为0");
      $("#num").text("0");
    }
  } else if(num > 40){
    $("#num").text("40");
    alert("数据异常！最大值为40");
    $("#level").css("height", "400px");
    $("#line").css("bottom", "446px");
  } else{
    $("#level").css("height", num * 10);
    $("#line").css("bottom", num * 10 + 46);
  }
</script>
</html>

附查资料时看到的一篇用canvas做立体图形的文章：https://blog.csdn.net/weixin_42595284/article/details/82466256

圆柱注水统计图实现

猜你喜欢