Vue, Laravel - круговая диаграмма Apexchart - PullRequest
Новая
       28

Vue, Laravel - круговая диаграмма Apexchart

0 голосов
/ 12 февраля 2020

У меня проблемы с передачей данных 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?

enter image description here

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Теперь все работает, я поделюсь с каждым ответом.

Шаблон 

 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);
  }
0 голосов
/ 12 февраля 2020

Я предлагаю использовать pluck метод Eloquent

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;
})
...