Laravel+Vue项目中vue-chartjs数据传递成功但图表不渲染问题求助

1. 修复父组件模板拼写错误 #

你父组件的根标签拼写错误，<teplate> 应该改为 <template>，这会直接导致组件模板解析失败，属于低级但高频错误。

2. 补全LineChart组件的默认配置 #

你在LineChart组件中声明了options属性，但调用时没有传递，renderChart接收到undefined的配置参数可能导致渲染失败，可以给options设置默认值，修改LineChart.js代码：

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false
      })
    }
  },
  mounted () {
    // 新增判断：只有chartData存在时才渲染
    if (this.chartData) {
      this.renderChart(this.chartData, this.options)
    }
  }
}

3. 调整父组件初始数据与调用参数 #

• 初始datacollection不要设为null，改为空对象避免初始值异常
• 给line-chart组件设置固定宽高，避免容器尺寸为0导致图表渲染不可见
• 可以手动传options参数兜底

修改后的父组件对应部分：

<template>
    <div class="small">
      <line-chart :chart-data="datacollection" :options="chartOptions" style="height: 400px;"></line-chart>
      <button @click="fillData()">Randomize</button>
    </div>
</template>

<script>
// 原有引入不变
import Table from '../equipments/table.vue'
import LineChart from '../equipments/LineChart.js'
import DropDownList from '../equipments/dropdownlist.vue'
export default {
  data () {
    return {
      datacollection: {}, // 改为空对象
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  components: {
      LineChart,
      Table,
      DropDownList
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: ['weqw','wewq'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [this.getRandomInt(), this.getRandomInt()]
          }, 
          {
            label: 'Data Two',
            backgroundColor: '#79a8f8',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

4. 检查版本适配 #

vue-chartjs对底层chart.js和Vue版本有严格的适配要求，必须满足对应版本关系：

• Vue 2 对应 vue-chartjs v3.x，配套chart.js v2.9.x
• Vue 3 对应 vue-chartjs v4/v5.x，配套chart.js v3/v4.x
  如果版本不匹配直接会导致渲染失败，你可以执行npm list vue-chartjs chart.js查看当前版本，不匹配的话卸载重装对应版本即可。

5. 排除重复注册问题 #

如果项目中全局注册过chart.js相关组件，和本地导入的LineChart组件冲突也会导致异常，只保留一种导入注册方式即可。

内容的提问来源于stack exchange，提问作者Hanyi Koh