实现锂电池形状的数据可视化css+js

懒洋洋懒羊羊

于 2023-07-20 11:31:02 发布

阅读量290

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_45827438/article/details/131825717

版权

1.效果图

2.需求根据后端返回数据改变里面的高度

HTML：

    <div class="dianchichi">
      <div class="limian" id="divElementId"></div>
    </div>

css:

    .dianchichi {
      width: 84px;
      height: 146px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 12px;
      background: url('./dianchi.png') no-repeat;
      .limian {
        width: 100%;
        // height: 107px;
        border-radius: 5px;
        background: linear-gradient(#3ceb7e, #4b77ed);
      }
    }

JS:

  onMounted(() => {
    apiRequestFn();

    //无接口时在此处实验
    let data = {
      value: 30,
      percent: '50%',
    };
    let divElement = document.getElementById('divElementId');
    console.log(divElement, 'divElement');
    if (divElement) {
      divElement.style.height = data.value * 1.07 + 'px';
    }
  });  
  // 有接口
  const apiRequestFn = () => {
    // 获取里面的div id
    let divElement = document.getElementById('divElementId');
    // 请求
    apiRequest().then(({res}) => {
      if (divElement) {
        divElement.style.height = data.value * 1.07 + 'px';
      }
    });
  };