Vue、Laravel - Apexcharts 饼图答案

【问题标题】：Vue, Laravel - Apexchart piechartVue、Laravel - Apexcharts 饼图
【发布时间】：2020-02-12 09:46:40
【问题描述】：

我无法将数据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 的数组？

【问题讨论】：

标签： laravel vue.js apexcharts

【解决方案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;
})

【讨论】：

在employee_objectivekpa里面所以first()->之后真的不能用pluck
JavaScript 解决方案怎么样？

【解决方案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);
  }

【讨论】：