Vue+Axios场景下Chart数据可在console.log打印但无法在页面显示

• 异步请求时序错误：created 中触发的axios请求是异步操作，mounted 生命周期执行Chart初始化逻辑时，接口数据还未返回，此时传入的this.myData是空数组，后续直接给this.myData重新赋值不会自动同步到已经初始化完成的Chart实例。
• 冗余变量冲突：你在mounted内额外声明了局部变量let myData = []，这个变量和组件实例上的this.myData完全无关，属于无效代码。
• 缺少更新触发逻辑：Chart.js 不会自动监听绑定数据源的变化，数据变更后需要手动调用实例的更新方法才会重绘canvas画布。
• 配置项写法错误：代码中backgroundColor: [['blue']]多嵌套了一层数组，折线图背景色配置直接传['blue']即可，多余嵌套会导致样式失效。

二选一即可：

方案1：接口返回数据后再初始化图表 #

逻辑更简单，不会出现空数据初始化问题，适合不需要提前展示图表占位的场景：

export default {
  data() {
    return {
      myData: [],
      myChart: null // 存储Chart实例，方便后续更新、销毁
    }
  },
  mounted() {
    const ctx = document.getElementById('myChart');
    // 等数据请求完成后再初始化图表
    this.getData().then(() => {
      this.myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [], // 替换为你自己的标签数组
          datasets: [{
            data: this.myData,
            backgroundColor: ['blue']
          }]
        },
        options: {} // 替换为你自己的图表配置
      })
    })
  },
  methods: {
    getData() {
      // 把请求promise return出去，方便后续调用then
      return axios.get('http://localhost:3000/Chart/chartjs')
        .then(resp => {
          this.myData = resp.data
          console.log(resp.data);
        })
    }
  }
}

方案2：先初始化空图表，数据返回后手动更新 #

适合需要提前渲染图表占位的场景：

export default {
  data() {
    return {
      myData: [],
      myChart: null
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    const ctx = document.getElementById('myChart');
    // 先初始化空数据图表
    this.myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [], // 替换为你自己的标签数组
        datasets: [{
          data: this.myData,
          backgroundColor: ['blue']
        }]
      },
      options: {} // 替换为你自己的图表配置
    })
  },
  methods: {
    getData() {
      axios.get('http://localhost:3000/Chart/chartjs')
        .then(resp => {
          this.myData = resp.data
          // 关键：修改Chart实例上的绑定数据，调用update触发重绘
          this.myChart.data.datasets[0].data = this.myData
          this.myChart.update()
          console.log(resp.data);
        })
    }
  }
}

• 不要在生命周期、方法内部声明和组件data同名的局部变量，会造成作用域混淆，导致数据赋值不生效。
• Chart.js绑定的数据源是初始化时传入的引用，直接替换组件上的根数据属性不会被Chart实例感知，要么直接修改实例上的data属性后调用update()，要么等数据就绪后再初始化实例。
• 如果项目中用的是Vue3，核心逻辑完全一致，只需要按照组合式API的写法调整生命周期和变量声明即可。

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