PHP和Vue.js全面实践：如何通过统计图表优化用户体验

<?php
$data = [
    'labels' => ['一月', '二月', '三月', '四月', '五月', '六月'],
    'datasets' => [
        [
            'label' => '销售额',
            'data' => [120, 230, 180, 270, 200, 300],
            'backgroundColor' => 'rgba(75, 192, 192, 0.2)',
            'borderColor' => 'rgba(75, 192, 192, 1)',
            'borderWidth' => 1,
        ]
    ]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

npm install chart.js vue-chartjs

<template>
  <div>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs';

export default {
  extends: Line,
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('path/to/php/backend.php')
        .then(response => response.json())
        .then(data => {
          this.renderChart(data, {
            responsive: true,
          });
        });
    },
  },
};
</script>

<template>
  <div class="chart-container">
    <canvas ref="chart"></canvas>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>

<script>
// ...
export default {
  // ...
  methods: {
    // ...
    fetchData() {
      // ...
      this.renderChart(data, {
        responsive: true,
        legend: {
          display: false,
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
      });
    },
  },
};
</script>