DataV的水位图不正确显示？

<div class="drive_content">
          <ul>
            <li>
              <dv-water-level-pond :config="config" style="width:80px;height:80px" />
              <span>总数</span>
            </li>
          </ul>
        </div>
<script setup lang='ts'>
const data = ref({
  parkingSpacesFreeNum: 117,
  parkingSpacesNANum: 0,
  parkingSpacesTotals: 0,
  parkingSpacesUsedNum: 0,
});
const config = reactive({
  data,
  shape: 'round',
  waveNum: 3,
  waveHeight: 10,
});
function getParkingDetails() {
  const id = window.localStorage.getItem('RowID');
  api.parkingDetails(id).then((dataList) => {
    const { data: res } = dataList;
    if (res.code === '00000') {
      console.log('停车场详细信息', res);
      localStorage.setItem('locationCoordinates', JSON.stringify(res.data.locationCoordinates));
      // 传递停车场详细信息的经纬度给父组件(home)
      emit('passValue', res.data.locationCoordinates);
      // 更新 config.data 的值
      config.data.parkingSpacesFreeNum = res.data.parkingSpacesFreeNum;
      config.data.parkingSpacesNANum = res.data.parkingSpacesNANum;
      config.data.parkingSpacesTotals = res.data.parkingSpacesTotals;
      config.data.parkingSpacesUsedNum = res.data.parkingSpacesUsedNum;
      ParingTableData.value = res.data;
    }
  });
}
</script>

请问大佬们，为什么我以上写的代码，为什么DataV中的水位图不能正常显示出来呢？求指点，谢谢