Vuetify v-sparkline组件不渲染问题求助

我是Vue新手，正在组件中使用v-sparkline迷你折线图，希望寻求帮助。目前我仅想通过props传入数值数组，以默认配置显示图表，但页面打开后仅渲染组件的网格部分，无迷你折线图显示，且浏览器开发者控制台无任何报错。项目基于Vue搭建，已困扰多日，恳请提供解决建议。

排查与解决建议 #

• 设置v-sparkline的尺寸：v-sparkline默认未指定宽高，可能导致折线图无足够空间渲染。可以直接给组件添加宽高样式，或调整父容器（如v-card）的尺寸：

  <v-sparkline :value="values" width="100%" height="120px"></v-sparkline>
  

• 确认Vuetify组件注册与版本：若使用Vuetify 3，需确保sparkline组件已正确引入并注册。检查项目的Vuetify配置文件，确认components: { VSparkline }或全局注册了该组件。

• 验证props数据传递：在子组件中打印接收的数值数组，确认数据已正确传递：

  // 子组件script setup中添加
  console.log('接收的数值数组:', props.values);
  

  确保数组非空且所有元素都是有效数值类型。

• 区分折线与背景色：默认折线颜色可能和背景色接近导致不可见，手动指定线条颜色：

  <v-sparkline :value="values" line-color="#2196F3"></v-sparkline>
  

组件代码（子组件） #

<template>
    <v-container>
      <v-row>
        <v-col>
          <v-card>
            <v-sparkline :value="values"></v-sparkline>
          </v-card>
        </v-col>
        <v-col>
          <p>text</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <p>text</p>
        </v-col>
        <v-col>
          <p>text</p>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
 
  const props = defineProps({
    values: {
      type: Array,
    }
  });
  
  </script>

父组件代码 #

<template>
   <Heading title="Graphs" icon=mdi-chart-bar></Heading>
   <v-main class="pa-4">
        <Graph_grid :values="numbers"/> 
    </v-main>
</template>
  
  <script setup lang="ts">
    import Heading from "@/components/Heading.vue";
    import Graph_grid from "@/components/Graph_grid.vue";

    const numbers = [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0];

  </script>

内容的提问来源于stack exchange，提问作者Tim Prikryl