Question

我在将数据11和33传递为饼图的[11, 33]到series的格式时遇到了麻烦。这是我当前的代码。

模板：

<div id="chart">
  <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
</div>

<script>
  export default {
    data: () => ({
      series: [],
        chartOptions: {
          chart: {
            width: 380,
            type: 'pie',
          },
          labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        }
    }),

    methods: {
      kpiProgress () {
        axios.get('/api/employee-kpi-progress', {
          params: { employee_id: this.$store.state.authUser.employee_id }
        })
        .then(response => {
          this.series = response.data.employee_objectivekpa
        })
        .catch(error => console.log(error))
      },
    }
  }
</script>

控制器：

  public function kpiProgress(Request $request) {
    $get = EmployeeObjective::with('employeeObjectivekpa:employee_objective_id,kpi_progress')
    ->where('employee_id', $request->employee_id)
    ->first();
    return response()->json($get);
  }

这是我目前在response.data中拥有的数据。如何将其转换为series的数组？

Answer 1

我建议使用Eloquent的pluck方法

https://laravel.com/docs/5.8/collections#method-pluck

public function kpiProgress(Request $request) {
   return EmployeeObjective::with('employeeObjectivekpa:employee_objective_id,kpi_progress')
    ->where('employee_id', $request->employee_id)
    ->first()->pluck('kpi_progress');

}

或使用JavaScript：

const myarray = response.data.map((item) -> {
      return item.kpi_progress;
})

Answer 2

现在可以了，我将与大家分享答案。

模板

 kpiProgress () {
        axios.get('/api/employee-kpi-progress', {
          params: { employee_id: this.$store.state.authUser.employee_id }
        })
        .then(response => {
          this.series = response.data
          console.log(response.data)
          })
        .catch(error => console.log(error))
      },

控制器

public function kpiProgress(Request $request) {
    $get = EmployeeObjective::with('employeeObjectivekpa:employee_objective_id,kpi_progress')
    ->where('employee_id', $request->employee_id)
    ->get()
    ->pluck('employeeObjectivekpa')
    ->flatten()
    ->pluck('kpi_progress')
    ->toArray();

    return response()->json($get);
  }

Vue，Laravel-Apexchart饼图

2 个答案: