Rumah > hujung hadapan web > View.js > teks badan

Cara cepat membina sistem carta statistik di bawah rangka kerja Vue

WBOY
Lepaskan: 2023-08-21 17:48:24
asal
1370 orang telah melayarinya

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
Salin selepas log masuk

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

vue create statistics-chart
Salin selepas log masuk

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

cd statistics-chart
Salin selepas log masuk

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

npm install vue-chartjs chart.js
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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
Salin selepas log masuk

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
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan