PHP和Vue.js开发实践：如何将统计图表嵌入现有项目

npm install chart.js

{
  "labels": ["January", "February", "March", "April", "May", "June", "July"],
  "datasets": [{
    "label": "My First Dataset",
    "data": [65, 59, 80, 81, 56, 55, 40]
  }]
}

<?php

$data = file_get_contents('data.json');
echo $data;

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

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios.get('/api/data.php')
        .then(response => {
          this.renderChart(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    renderChart(data) {
      const chartData = JSON.parse(data);

      new Chart(this.$refs.chart, {
        type: 'bar',
        data: {
          labels: chartData.labels,
          datasets: chartData.datasets
        }
      });
    }
  }
}
</script>

<style>
canvas {
  max-width: 100%;
}
</style>

import ChartComponent from './components/ChartComponent.vue';

const routes = [
  { path: '/chart', component: ChartComponent }
];