如何用Vuex结合vue-chart.js从API填充图表并筛选指定字段？

问题描述 #

我用vue-chart.js结合Vue2开发图表功能，通过Vuex从API获取数据时遇到了问题。vue-chartjs.org上关于API数据处理的示例很少，Stack Overflow上的方案大多是在mounted()中使用renderChart()，不确定这是临时方案还是标准做法。我知道图表需要接收Object类型的数据而非Array，但直接将Vuex状态allSales绑定到图表的data属性（:data="allSales"）时出现以下错误：

无效的prop：prop"data"的类型检查失败。期望Object，得到Array
mounted钩子中的错误："TypeError: 无法读取未定义的属性'map'"

组件代码 #

<template>
  <v-container>
    <v-row>
      <v-col cols="6">
        <Bar v-if="loaded"
          id="my-chart-id"
          :options="chartOptions"
          :data="allSales"/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  components: {
    Bar
  },
  data() {
    return {
      chartOptions: {
        responsive: true
      },
      loaded: false
    }
  },
  computed: {
    ...mapState('custom', ['allSales'])
  },
  methods: {
    ...mapActions('custom', ['getAllSalesAction']),
  },
  mounted() {   
    this.loaded = false
    try {
      this.getAllSalesAction()
      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  },
}
</script>

Vuex Store代码 #

import axios from "axios";

const state = {
    allSales: [],
};

const mutations = {
    getAllSales: (state, all) => state.allSales = all, 
};

const actions = {
    async getAllSalesAction({commit})
    {       
        const response = await axios.get(`https://localhost:44327/api/Commission/allData`)
        commit('getAllSales', response.data)
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};

核心问题 #

1. 在使用Vuex的场景下，如何正确地从API获取数据并填充图表？
2. 如何从API返回的多字段数据（比如20个字段）中选择指定的3个字段用于图表展示？

问题1：Vuex场景下正确获取API数据填充图表 #

错误根源有两个：一是vue-chart.js的图表组件要求data属性是符合Chart.js规范的对象，你直接传入了API返回的数组；二是mounted中直接设置loaded=true，忽略了getAllSalesAction是异步函数，数据未返回就渲染图表导致报错。

正确实现步骤： #

1. 等待异步请求完成后再标记加载状态
   修改mounted钩子，用async/await等待数据请求完成：

   async mounted() {   
     this.loaded = false
     try {
       await this.getAllSalesAction() // 等待数据请求完成后再渲染
       this.loaded = true
     } catch (e) {
       console.error(e)
       this.loaded = false
     }
   },
   

2. 将数组数据转换为Chart.js要求的对象格式
   Chart.js的data格式必须包含labels（X轴标签）和datasets（数据集），结构示例：

   {
     labels: ['1月', '2月', '3月'],
     datasets: [{
       label: '销售额',
       data: [100, 200, 300],
       backgroundColor: '#f87979'
     }]
   }
   

   在组件中新增计算属性，把Vuex中的allSales数组转换为该格式：

   computed: {
     ...mapState('custom', ['allSales']),
     chartData() {
       // 空数据时返回默认结构避免报错
       if (!this.allSales.length) {
         return { labels: [], datasets: [] }
       }
       // 假设每条数据包含`month`（X轴标签）和`amount`（数值）字段
       return {
         labels: this.allSales.map(item => item.month),
         datasets: [{
           label: '销售额',
           data: this.allSales.map(item => item.amount),
           backgroundColor: '#41B883'
         }]
       }
     }
   }
   

   最后在模板中绑定这个计算属性：

   <Bar v-if="loaded"
     id="my-chart-id"
     :options="chartOptions"
     :data="chartData"/>
   

3. 关于renderChart()的说明
   在vue-chart.js旧版本中常用renderChart()手动渲染，但新版本（v3+）中通过props传递data和options是标准做法，你当前的写法方向正确，无需改用renderChart()。

问题2：从多字段数据中选择指定字段 #

假设API返回的每条数据有20个字段，你需要提取month、salesAmount、targetAmount三个字段用于图表，有两种处理方式：

方式1：在Vuex中统一处理数据（适合多组件复用场景） #

在Action中先过滤数据，再提交到Mutation：

async getAllSalesAction({commit})
{       
  const response = await axios.get(`https://localhost:44327/api/Commission/allData`)
  // 只保留需要的字段
  const filteredData = response.data.map(item => ({
    month: item.month,
    salesAmount: item.salesAmount,
    targetAmount: item.targetAmount
  }))
  commit('getAllSales', filteredData)
},

方式2：在组件计算属性中处理（仅当前组件需要时使用） #

直接在chartData计算属性中提取指定字段并转换格式：

chartData() {
  if (!this.allSales.length) {
    return { labels: [], datasets: [] }
  }
  // 提取指定字段
  const labels = this.allSales.map(item => item.month)
  const salesData = this.allSales.map(item => item.salesAmount)
  const targetData = this.allSales.map(item => item.targetAmount)
  // 组装Chart.js格式数据
  return {
    labels: labels,
    datasets: [
      {
        label: '实际销售额',
        data: salesData,
        backgroundColor: '#41B883'
      },
      {
        label: '目标销售额',
        data: targetData,
        backgroundColor: '#f87979'
      }
    ]
  }
}

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