So zeichnen Sie ein Uniapp-Flugbahndiagramm

In der mobilen Entwicklung ist das Flugbahndiagramm eine der am häufigsten verwendeten Funktionen. Uniapp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf dem Vue.js-Framework basiert. Es bietet einige Komponenten und Plug-Ins, um die Anwendungsentwicklung zu erleichtern. In Uniapp können Sie das U-Charts-Plug-In zum Zeichnen von Flugbahndiagrammen verwenden. In diesem Artikel wird erläutert, wie Sie das U-Charts-Plug-In zum Zeichnen von Flugbahndiagrammen verwenden.

1. Installieren Sie das u-Charts-Plugin

Um das u-Charts-Plugin verwenden zu können, müssen Sie zuerst das Plug-in installieren.

(1) Erstellen Sie das Uniapp-Projekt in HBuilderX.

(2) Klicken Sie im Stammverzeichnis des Projekts mit der rechten Maustaste und wählen Sie „Arbeitsbereich auswählen“, um das Terminal zu öffnen.

(3) Geben Sie npm install u-charts -S ein und drücken Sie die Eingabetaste, um die Installation durchzuführen.

2. Verwenden Sie das U-Charts-Plug-In in der Vue-Datei.

Als nächstes stellen Sie das U-Charts-Plug-In in der Vue-Datei vor und verwenden es.

(1) Verweisen Sie in der Vue-Datei, die die Trajektorienkarte zeichnen muss, auf das entsprechende Plug-In.

<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) Übergeben Sie die entsprechenden Daten an das Plug-in.

Im obigen Code haben wir zwei Datenkategorien und -reihen übergeben, wobei Kategorien die X-Achse des Trajektoriendiagramms und Reihen die Y-Achse darstellen, einschließlich zweier Datensätze, nämlich „Handelsvolumen“. 1“ und „Band 2“.

(3) Rendering-Plug-in.

Verwenden Sie die Mount-Lebenszyklusfunktion von Vue, um sicherzustellen, dass der DOM-Baum vor dem Rendern von U-Charts gemountet wurde, wie unten gezeigt:

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

3. Erweitertes Trajektoriendiagramm Anwenden der # 🎜🎜#

u-charts Plug-in kann nicht nur Flugbahndiagramme zeichnen, sondern auch andere Diagrammformen wie Balkendiagramme, Kreisdiagramme usw. Beim Zeichnen eines Trajektoriendiagramms können Sie auch die vom Plug-In bereitgestellte setOption-Methode verwenden, um das Trajektoriendiagramm genauer anzupassen. Im Folgenden sind einige häufig verwendete Vorgänge zur Anpassung der Flugbahnkarte aufgeführt.

(1) Legen Sie den Titel und den Untertitel fest.

Verwenden Sie setOption, um den Titel und den Untertitel festzulegen, wie unten gezeigt:

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

(2) Die untere Beschriftung der X-Achse des Flugbahndiagramms wird gedreht.

Wenn die untere Beschriftung der X-Achse des Gleisdiagramms zu viel Text enthält, können Sie den unteren Beschriftungstext in einem bestimmten Winkel drehen, um den Anzeigeeffekt zu verbessern. Verwenden Sie die Methode „rotateLabel“, wie unten gezeigt:

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

(3) Verfolgen Sie die Farbwiedergabe der Karte.

Die Farbwiedergabe der Flugbahnkarte kann je nach gegebenem Datensatz individuell eingestellt werden. Verwenden Sie die setSeriesColors-Methode, um die Farbe jedes Datensatzes nach Bedarf festzulegen, wie unten gezeigt:

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

(4) Einstellungen der Trackpunkte.

Größe und Stil der Trackpunkte sind anpassbar. Verwenden Sie die setChartStyle-Methode, um die Track-Punktgröße und die Track-Linienfarbe festzulegen, wie unten gezeigt:

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

Die obige Einführung ist nur ein Teil der Vorgänge beim Zeichnen von Track-Charts bietet eine Vielzahl von Methoden zum Zeichnen und Anpassen von Diagrammen. Einzelheiten finden Sie in der offiziellen Dokumentation von u-charts.

Zusammenfassend lässt sich sagen, dass das U-Charts-Plug-In ein sehr praktisches und praktisches Plug-In ist, mit dem sich Trajektoriendiagramme einfach zeichnen und im Uniapp-Framework fein anpassen lassen.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie ein Uniapp-Flugbahndiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!