Cara cepat membina sistem carta statistik di bawah rangka kerja Vue

Cara membina sistem carta statistik dengan cepat di bawah rangka kerja Vue

Dalam aplikasi web moden, carta statistik merupakan komponen penting. Sebagai rangka kerja bahagian hadapan yang popular, Vue.js menyediakan banyak alatan dan komponen yang mudah yang boleh membantu kami membina sistem carta statistik dengan cepat. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan beberapa pemalam untuk membina sistem carta statistik ringkas.

Pertama, kita perlu menyediakan persekitaran pembangunan Vue.js, termasuk memasang perancah Vue dan beberapa pemalam yang berkaitan. Jalankan arahan berikut dalam baris arahan:

npm install -g @vue/cli

Selepas pemasangan selesai, kita boleh menggunakan Vue CLI untuk memulakan projek Vue baharu. Jalankan arahan berikut dalam baris arahan:

vue create statistics-chart

Pilih konfigurasi lalai mengikut gesaan, dan kemudian masukkan direktori projek:

cd statistics-chart

Seterusnya, kita perlu memasang pemalam untuk melukis carta. Jalankan arahan berikut dalam baris arahan:

npm install vue-chartjs chart.js

Selepas pemasangan selesai, kita boleh mula menulis kod. Mula-mula, buat fail bernama Chart.vue dalam direktori src/components. Dalam fail ini, kami akan menggunakan Vue Chart.js untuk melukis carta.

Kod Chart.vue adalah seperti berikut:

<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>

Dalam kod ini, kami menggunakan kaedah renderChart yang disediakan oleh Vue untuk memaparkan carta. Kami boleh menghantar data dan pilihan carta kepada prop komponen Carta untuk konfigurasi.

Seterusnya, buat fail bernama Statistics.vue dalam direktori src/views. Dalam fail ini, kami akan menggunakan komponen Carta untuk melukis carta statistik. Kod

Statistics.vue adalah seperti berikut:

<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>

Dalam kod ini, kami mentakrifkan objek chartData untuk menyimpan data carta, dengan label mewakili data paksi X dan set data mewakili berbilang set data. Kami juga mentakrifkan objek chartOptions untuk mengkonfigurasi beberapa pilihan untuk carta.

Akhir sekali, konfigurasikan penghalaan dalam fail src/router/index.js supaya komponen Statistik boleh diakses dalam penyemak imbas. Kodnya adalah seperti berikut:

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

Setakat ini, kami telah menyelesaikan pembinaan sistem carta statistik. Sekarang kita boleh menjalankan projek dan mengakses halaman dalam penyemak imbas.

Laksanakan arahan berikut dalam baris arahan untuk menjalankan projek:

npm run serve

Buka pelayar dan masukkan http://localhost:8080 untuk melihat carta statistik yang dilukis.

Dalam artikel ini, kami menggunakan rangka kerja Vue dan beberapa pemalam untuk membina sistem carta statistik ringkas dengan cepat. Melalui contoh ini, anda boleh belajar cara menggunakan Vue untuk melukis carta, menghantar data dan mengkonfigurasi pilihan. Seterusnya, anda boleh melanjutkan dan menyesuaikan sistem mengikut keperluan anda, seperti menambah lebih banyak jenis carta dan ciri interaktif. Saya doakan anda berjaya membangunkan sistem carta statistik di bawah rangka kerja Vue!

Atas ialah kandungan terperinci Cara cepat membina sistem carta statistik di bawah rangka kerja Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!