通过axios使用来自API的数据填充chartJS (VueJS)

npm install axios

import axios from 'axios';

getDataFromAPI() {
  axios.get('API的URL')
    .then(response => {
      // 在这里处理API响应数据
      // 可以将数据保存到组件的data属性中，以便在图表中使用
    })
    .catch(error => {
      // 处理错误情况
    });
}

data() {
  return {
    chartData: null
  };
},
methods: {
  getDataFromAPI() {
    axios.get('API的URL')
      .then(response => {
        this.chartData = response.data;
      })
      .catch(error => {
        // 处理错误情况
      });
  }
}

mounted() {
  this.getDataFromAPI();
}

computed: {
  chartOptions() {
    if (this.chartData) {
      // 使用chartData生成图表配置
      // 可以根据需要设置图表的类型、标签、数据等
      return {
        type: 'bar',
        data: {
          labels: this.chartData.labels,
          datasets: [{
            label: '数据集1',
            data: this.chartData.data,
            backgroundColor: 'rgba(0, 123, 255, 0.5)'
          }]
        }
      };
    } else {
      return null;
    }
  }
}

<template>
  <div>
    <chart :options="chartOptions"></chart>
  </div>
</template>