Vue.js中Chart.js图表对接Laravel API及日期筛选更新问题

解决方案 #

你只需要将重复的请求逻辑抽为公共方法，请求成功后直接赋值给图表绑定的数据源即可，修改后完整代码如下：

1. 逻辑层代码修改

data() {
  return {
    startDate: '',
    endDate: '',
    // 原变量名data和Vue本身的data选项重名，建议改为chartData避免歧义
    chartData: {
      labels: [1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020],
      datasets: [{
        data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
        label: 'User Active',
        borderColor: '#3e95cd'
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Report user'
      }
    },
    // 模板中用到了plugins变量，补充默认空数组避免报错
    plugins: []
  }
},
created() {
  // 页面初始化时调用请求方法，不传入日期参数
  this.fetchChartData()
},
methods: {
  // 抽离公共请求方法，支持传入参数
  fetchChartData(params = {}) {
    axios.get("/project/api/user", { params })
      .then((res) => {
        // 接口返回结构和图表需要的结构完全匹配，直接赋值即可
        this.chartData = res.data
      })
      .catch(err => {
        console.error('数据请求失败：', err)
      })
  },
  changevalue() {
    // 可选校验：避免用户未选全日期就提交
    if (!this.startDate || !this.endDate) {
      alert('请选择完整的起止日期')
      return
    }
    // 调用请求方法传入日期参数
    this.fetchChartData({
      startDate: this.startDate,
      endDate: this.endDate
    })
  }
}

2. 图表模板代码修改

因为数据源变量名改为了chartData，需要同步修改绑定属性：

<chartjs-component-line-chart
      :data="chartData"
      :options="options"
      :plugins="plugins"
/>

3. 日期筛选及按钮代码无需修改，保持原有逻辑即可。

实现说明 #

• 你的接口返回的res.data本身就包含图表需要的labels和datasets字段，结构完全匹配，直接赋值就可以替换默认数据
• 抽离公共请求方法后，页面初始化和筛选提交都可以复用同一段逻辑，后续修改只需要调整一处代码
• Vue的响应式机制会在chartData更新后自动触发视图重绘，图表组件会自动加载新数据渲染

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