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

1.效果图

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

 HTML：

 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';
      }
    });
  };