Vue chartjs调用API获取数据后图表无法渲染问题咨询

问题原因 #

1. 异步请求时序错位：axios.get是异步网络请求，created钩子中发起的请求，其响应回调执行时机晚于mounted钩子的执行时机。你在mounted中调用renderChart时，lineChartData还是初始化的空数组，没有实际数据支撑图表渲染。
2. 数据格式不符合要求：Chart.js 要求datasets字段传入数组类型，你的代码中写的是datasets: { lineDataset }，相当于把数据集包了一层对象，格式不匹配，就算请求拿到数据也无法正常渲染。

修复方案 #

1. 调整执行逻辑 #

把图表渲染的调用逻辑移到axios的请求成功回调中，确保拿到接口返回的完整数据后再执行渲染。

2. 修正数据赋值格式 #

把datasets的赋值从对象格式改为直接传入处理好的lineDataset数组。

修正后完整代码 #

export default {
  extends: Line,
  data() {
    return {
      lineChartOptions: {
        maintainAspectRatio: false,
        responsive: true,
        scales: { 
          yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], 
          xAxes: [{ gridLines: { display: false } }] 
        },
        legend: {
          display: true,
        },
      },
      lineChartData: [],
    };
  },
  created() {
    axios
      .get("someurl")
      .then((response) => {
        let responseData = response.data;
        let lineDataset = [];

        for (let i = 0; i < responseData.pidList.length; i++) {
          lineDataset.push({
            label: responseData.pidList[i],
            backgroundColor: "#2554FF",
            // 如果要对应labels里的2020、2021两个年份，这里的data要改成数组格式，比如[2000, 3000]
            data: 2000,
          });
        }
        // 修正datasets赋值格式
        this.lineChartData = { labels: ["2020", "2021"], datasets: lineDataset };
        // 拿到数据后再渲染图表
        this.renderChart(this.lineChartData, this.lineChartOptions);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  mounted() {
    // 原渲染逻辑已移到请求回调中，如需添加加载态、骨架屏可以在这里处理
  },
};

可选优化 #

如果需要支持数据动态更新的场景，可以加判断逻辑，更新数据前先销毁旧的图表实例，避免重复渲染导致的异常和内存泄漏。

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