Vue ??????? ?? ?? ???? ??? ???? ??

?? ? ???????? ?? ??? ?? ?? ?????. ?? ???? ????? ?????? Vue.js? ?? ?? ???? ???? ???? ? ??? ?? ?? ??? ??? ?? ??? ?????. ? ????? Vue ?????? ?? ????? ???? ??? ?? ?? ???? ???? ??? ?????.

?? Vue ???? ? ?? ?? ???? ??? ???? Vue.js ?? ??? ???? ???. ????? ?? ??? ?????.

npm install -g @vue/cli

??? ???? Vue CLI? ???? ? Vue ????? ???? ? ????. ????? ?? ??? ?????.

vue create statistics-chart

????? ?? ?? ??? ??? ? ???? ????? ?????.

cd statistics-chart

???? ?? ???? ????? ???? ???. ????? ?? ??? ?????.

npm install vue-chartjs chart.js

??? ???? ?? ??? ??? ? ????. ?? src/comComponents ????? Chart.vue?? ??? ????. ? ????? Vue Chart.js? ???? ??? ?? ????.

Chart.vue? ??? ??? ????.

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

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

export default {
  extends: Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

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

? ????? Vue?? ???? renderChart ???? ???? ??? ??????. ??? ?? ??? ???? ??? ?? ?? ??? ??? ??? ? ????.

???? src/views ????? Statistics.vue?? ??? ????. ? ????? ?? ?? ??? ???? ?? ??? ????.

Statistics.vue? ??? ??? ????.

<template>
  <div class="statistics">
    <chart :data="chartData" :options="chartOptions"></chart>
  </div>
</template>

<script>
import Chart from '@/components/Chart'

export default {
  components: {
    Chart
  },
  data () {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Sales',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
            label: 'Profit',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            data: [28, 48, 40, 19, 86, 27, 90]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

<style scoped>
.statistics {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

? ????? ??? ???? ???? ?? ChartData ??? ?????. ??? ???? X? ???? ???? ??? ??? ?? ??? ??? ?????. ?? ??? ?? ??? ???? ?? ChartOptions ??? ?????.

????? ?????? ?? ?? ??? ???? ? ??? src/router/index.js ???? ???? ?????. ??? ??? ????.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Statistics from '../views/Statistics.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Statistics',
    component: Statistics
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

???? ???? ??? ??? ??????. ?? ????? ???? ?????? ???? ???? ? ????.

????? ?? ??? ???? ????? ?????.

npm run serve

????? ?? http://localhost:8080? ???? ??? ?? ??? ? ? ????.

? ????? Vue ?????? ?? ????? ???? ??? ?? ?? ???? ??? ?????. ? ??? ?? Vue? ???? ??? ??? ??, ???? ???? ??, ??? ???? ??? ?? ? ????. ????, ? ?? ??? ??? ??? ??? ???? ? ??? ?? ???? ??? ???? ??? ??? ? ????. Vue ??????? ?? ?? ??? ??? ???? ????!

? ??? Vue ??????? ?? ?? ???? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!