Comment utiliser Vue pour mettre en œuvre des graphiques statistiques de données financières

Comment utiliser Vue pour mettre en œuvre des graphiques statistiques de données financières

Introduction :
Dans le secteur financier, les graphiques statistiques sont des outils très importants qui peuvent aider les gens à comprendre et à analyser intuitivement diverses données financières. En tant que framework frontal populaire, Vue peut facilement réaliser divers effets interactifs. Cet article expliquera comment utiliser Vue pour implémenter des graphiques statistiques de données financières et joindra des exemples de code pour la référence d'apprentissage des lecteurs.

1. Préparation
Avant de commencer, nous avons besoin de quelques préparations nécessaires.

1. Installer Vue : Nous devons installer Vue dans l'environnement local. Il peut être installé via npm ou fil.
2. Introduire le plug-in de graphique : afin de mettre en œuvre des graphiques statistiques, nous devons introduire un plug-in de graphique approprié. Dans cet article, nous utiliserons Chart.js, un plugin de cartographie populaire.

2. Créer un projet Vue
Nous pouvons utiliser Vue CLI pour créer un projet Vue, la commande est la suivante :

vue create stat-chart-vue

Lors de la création d'un projet, vous pouvez choisir de configurer certaines options de base, qui peuvent être sélectionnées en fonction vos propres besoins.

3. Configurer Chart.js

1. Installer Chart.js : Nous devons installer Chart.js et les plug-ins associés dans le projet, qui peuvent être installés via la commande suivante :

npm install chart.js vue-chartjs

2. Créer un composant Chart : dans le projet Vue, nous devons créer un composant Chart pour gérer l'affichage et la configuration des graphiques. Vous pouvez utiliser le code suivant pour créer le fichier 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. Implémenter des graphiques statistiques
Nous avons maintenant créé le composant Chart et pouvons l'utiliser dans d'autres composants Vue pour afficher des graphiques statistiques. Ensuite, nous mettrons en œuvre un graphique à barres pour afficher le rendement mensuel d’un certain titre. Notre format de données est le suivant :

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

1. Créer un fichier de données : Créez un fichier data.js dans le répertoire src pour stocker nos données.

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

2. Modifier App.vue : utilisez le composant Graphique dans le fichier App.vue pour afficher des graphiques statistiques. Vous pouvez utiliser le code suivant pour modifier le fichier 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. Exécutez le projet
Nous pouvons utiliser la commande suivante pour exécuter le projet et visualiser l'effet d'affichage du graphique statistique dans le navigateur :

npm run serve

6. Résumé
À travers cet article En introduction, nous avons appris à utiliser Vue pour mettre en œuvre des graphiques statistiques de données financières. Tout d'abord, nous avons effectué quelques préparatifs, notamment l'installation de Vue et l'introduction du plug-in Chart.js. Ensuite, nous avons créé un composant Chart et l'avons utilisé dans d'autres composants Vue pour afficher des graphiques statistiques. Enfin, nous avons complété un exemple de graphique à barres montrant le rendement mensuel d'un certain titre. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer le framework Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!