Cara menggunakan Vue untuk melaksanakan carta statistik data kewangan

Cara menggunakan Vue untuk melaksanakan carta statistik data kewangan

Pengenalan:
Dalam industri kewangan, carta statistik ialah alat yang sangat penting yang boleh membantu orang ramai memahami dan menganalisis pelbagai data kewangan secara intuitif. Sebagai rangka kerja bahagian hadapan yang popular, Vue boleh mencapai pelbagai kesan interaktif dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan carta statistik data kewangan dan melampirkan contoh kod untuk rujukan pembelajaran pembaca.

1. Persediaan
Sebelum kita mula, kita perlukan beberapa persediaan yang perlu.

1. Pasang Vue: Kami perlu memasang Vue dalam persekitaran setempat. Ia boleh dipasang melalui npm atau benang.
2. Perkenalkan pemalam carta: Untuk melaksanakan carta statistik, kami perlu memperkenalkan pemalam carta yang sesuai. Dalam artikel ini, kami akan menggunakan Chart.js, pemalam carta yang popular.

2 Cipta projek Vue
Kita boleh menggunakan Vue CLI untuk mencipta projek Vue, arahannya adalah seperti berikut:

vue create stat-chart-vue

Apabila membuat projek, anda boleh memilih untuk mengkonfigurasi beberapa pilihan asas, yang boleh dipilih mengikut keperluan anda sendiri.

3. Konfigurasikan Chart.js

1. Pasang Chart.js: Kami perlu memasang Chart.js dan pemalam yang berkaitan dalam projek, yang boleh dipasang melalui arahan berikut:

npm install chart.js vue-chartjs

2. Buat komponen Carta: dalam projek Vue , kita perlu mencipta komponen Carta untuk mengurus paparan dan konfigurasi carta. Anda boleh menggunakan kod berikut untuk mencipta fail Chart.vue:

<template>
  <div>
    <bar-chart :data="chartData" :options="chartOptions"></bar-chart>
  </div>
</template>

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

export default {
  extends: Bar,
  props: ['chartData', 'chartOptions'],
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  },
}
</script>

4. Laksanakan carta statistik
Kini kami telah mencipta komponen Carta dan boleh menggunakannya dalam komponen Vue lain untuk memaparkan carta statistik. Seterusnya, kami akan melaksanakan carta bar untuk memaparkan pulangan bulanan saham tertentu. Format data kami adalah seperti berikut:

[
  { "month": "2020-01", "return": 0.05 },
  { "month": "2020-02", "return": -0.03 },
  { "month": "2020-03", "return": 0.08 },
  ...
]

1. Buat fail data: Cipta fail data.js dalam direktori src untuk menyimpan data kami.

export default [
  { month: '2020-01', return: 0.05 },
  { month: '2020-02', return: -0.03 },
  { month: '2020-03', return: 0.08 },
  ...
]

2. Ubah suai App.vue: Gunakan komponen Carta dalam fail App.vue untuk memaparkan carta statistik. Anda boleh menggunakan kod berikut untuk mengubah suai fail App.vue:

<template>
  <div id="app">
    <Chart :chart-data="chartData" :chart-options="chartOptions"></Chart>
  </div>
</template>

<script>
import Chart from './components/Chart'
import data from './data'

export default {
  components: {
    Chart,
  },
  data() {
    return {
      chartData: {
        labels: data.map(item => item.month),
        datasets: [
          {
            label: 'Return',
            data: data.map(item => item.return),
          },
        ],
      },
      chartOptions: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
      },
    }
  },
}
</script>

5. Jalankan projek
Kita boleh menggunakan arahan berikut untuk menjalankan projek dan melihat kesan paparan carta statistik dalam pelayar:

npm run serve

6. Ringkasan
Melalui artikel ini Dalam pengenalan, kami mempelajari cara menggunakan Vue untuk melaksanakan carta statistik data kewangan. Mula-mula, kami membuat beberapa persediaan, termasuk memasang Vue dan memperkenalkan pemalam Chart.js. Kemudian, kami mencipta komponen Carta dan menggunakannya dalam komponen Vue lain untuk memaparkan carta statistik. Akhirnya, kami melengkapkan contoh carta bar yang menunjukkan pulangan bulanan saham tertentu. Saya harap artikel ini dapat membantu pembaca memahami dan menggunakan rangka kerja Vue dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan carta statistik data kewangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!