Comment dessiner un tableau de trajectoire Uniapp

Dans le développement mobile, le diagramme de trajectoire est l'une des fonctions les plus couramment utilisées. Uniapp est un framework de développement d'applications multiplateforme basé sur le framework Vue.js. Il fournit des composants et des plug-ins pour faciliter le développement d'applications. Dans Uniapp, vous pouvez utiliser le plug-in u-charts pour dessiner des graphiques de trajectoire. Cet article explique comment utiliser le plug-in u-charts pour dessiner des graphiques de trajectoire dans Uniapp.

1. Installez le plug-in u-charts

Pour utiliser le plug-in u-charts, vous devez d'abord installer le plug-in.

(1) Créez le projet Uniapp dans HBuilderX.

(2) Dans le répertoire racine du projet, faites un clic droit et sélectionnez "Sélectionner l'espace de travail" pour ouvrir le terminal.

(3) Entrez npm install u-charts -S et appuyez sur Entrée pour installer.

2. Utilisez le plug-in u-charts dans le fichier vue

Ensuite, introduisez et utilisez le plug-in u-charts dans le fichier vue.

(1) Dans le fichier vue qui doit dessiner la carte de trajectoire, référencez le plug-in correspondant.

<template>
  <u-charts ref="uCharts" :canvas-id="'CanvasID'" :canvas-style="'width: 100%; height: 300px;'" :type="'line'" :extra="{line:{type:'curve'}}" :categories="categories" :series="series" :animation="true"></u-charts>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.vue'

export default {
  components: {
    uCharts
  },
  data () {
    return {
      categories: ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80, 92],
        color: '#4c9bfd',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18, 20],
        color: '#ff6347',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }]
    }
  }
}
</script>

(2) Transmettez les données correspondantes au plug-in.

Dans le code ci-dessus, nous avons transmis deux catégories et séries de données, où les catégories représentent l'axe X du graphique de trajectoire et les séries représentent l'axe Y, comprenant deux ensembles de données, à savoir "Volume des transactions 1" » et « Tome 2 ».

(3) Plug-in de rendu.

Utilisez la fonction de cycle de vie de Vue montée pour vous assurer que l'arborescence DOM a été montée avant le rendu des u-charts, comme indiqué ci-dessous :

mounted () {
  this.$nextTick(function () {
    // 在渲染时初始化uCharts，按照官方文档格式传参
    let uCharts = this.$refs.uCharts;
    uCharts.init((canvas, width, height) => { });
  })
}

3. Graphique de trajectoire avancé Le #🎜 🎜##🎜🎜Le plug-in #u-charts peut non seulement dessiner des graphiques de trajectoire, mais également d'autres formes de graphiques, tels que des graphiques à barres, des diagrammes circulaires, etc. Lorsque vous dessinez un graphique de trajectoire, vous pouvez également utiliser la méthode setOption fournie par le plug-in pour personnaliser le graphique de trajectoire plus précisément. Voici quelques opérations de personnalisation de carte de trajectoire couramment utilisées.

(1) Définissez le titre et le sous-titre.

Utilisez setOption pour définir le titre et le sous-titre, comme indiqué ci-dessous :

let options = {
  title: {
    text: '轨迹图样例', // 主标题
    subtext: 'uniapp中的轨迹图插件使用', // 副标题
  },
  ...
};
uCharts.setOption(options);

(2) L'étiquette inférieure de l'axe X du graphique de trajectoire est pivotée.

Lorsqu'il y a trop de texte dans l'étiquette inférieure de l'axe X du graphique de suivi, vous pouvez faire pivoter le texte de l'étiquette inférieure selon un certain angle pour améliorer l'effet d'affichage. Utilisez la méthode rotateLabel, comme indiqué ci-dessous :

uCharts.rotateLabel({
  category?: string;
  degree?: number;
})

(3) Suivez le rendu des couleurs de la carte.

Le rendu des couleurs de la carte de trajectoire peut être défini individuellement en fonction de l'ensemble de données donné. Utilisez la méthode setSeriesColors pour définir la couleur de chaque ensemble de données selon vos besoins, comme indiqué ci-dessous :

let colors = ['#4c9bfd', '#ff6347', '#398dcd', '#f99e1c', '#d5317c', '#3a71af', '#75b86c'];
uCharts.setSeriesColors(colors);

(4) Paramètres des points de suivi.

La taille et le style des points de suivi sont réglables. Utilisez la méthode setChartStyle pour définir la taille des points de suivi et la couleur de la ligne de suivi, comme indiqué ci-dessous :

uCharts.setChartStyle({
  good: {
    pointSize: 5,
    lineColor: '#4c9bfd'
  },
  bad: {
    pointSize: 5,
    lineColor: '#ff6347'
  }
})

L'introduction ci-dessus ne représente que quelques-unes des opérations de dessin de cartes de suivi également. fournit une variété de méthodes de dessin et de personnalisation de graphiques, veuillez vous référer à la documentation officielle d'u-charts pour plus de détails.

Pour résumer, le plug-in u-charts est un plug-in très pratique et pratique qui permet de dessiner facilement des graphiques de trajectoire et de les personnaliser finement dans le framework Uniapp.

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!