Bagaimana untuk melukis carta trajektori uniapp

Dalam pembangunan mudah alih, graf trajektori ialah salah satu fungsi yang paling biasa digunakan. Uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js Ia menyediakan beberapa komponen dan pemalam untuk memudahkan pembangunan aplikasi. Dalam Uniapp, anda boleh menggunakan pemalam carta u untuk melukis carta trajektori Artikel ini akan memperkenalkan cara menggunakan pemalam carta u untuk melukis carta trajektori dalam Uniapp.

1. Pasang pemalam u-charts

Untuk menggunakan pemalam u-charts, anda perlu memasang pemalam terlebih dahulu.

(1) Cipta projek Uniapp dalam HBuilderX.

(2) Dalam direktori akar projek, klik kanan dan pilih "Pilih Ruang Kerja" untuk membuka terminal.

(3) Masukkan npm install u-charts -S dan tekan Enter untuk memasang.

2. Gunakan pemalam u-charts dalam fail vue

Seterusnya, perkenalkan dan gunakan pemalam u-charts dalam fail vue.

(1) Dalam fail vue yang perlu melukis peta trajektori, rujuk pemalam yang sepadan.

<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) Hantar data yang sepadan kepada pemalam.

Dalam kod di atas, kami melepasi dua kategori dan siri data, di mana kategori mewakili paksi X carta trajektori, dan siri mewakili paksi Y, termasuk dua set data, iaitu "Jumlah Dagangan 1" dan "Jilid 2".

(3) Memaparkan pemalam.

Gunakan fungsi kitaran hayat Vue yang dipasang untuk memastikan bahawa pokok DOM telah dipasang sebelum memaparkan carta-u, seperti yang ditunjukkan di bawah:

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

3. Aplikasi lanjutan carta trajektori

Pemalam carta u bukan sahaja boleh melukis carta trajektori, tetapi juga bentuk carta lain, seperti carta bar, carta pai, dsb. Apabila melukis graf trajektori, anda juga boleh menggunakan kaedah setOption yang disediakan oleh pemalam untuk menyesuaikan graf trajektori dengan lebih tepat. Berikut ialah beberapa operasi penyesuaian peta trajektori yang biasa digunakan.

(1) Tetapkan tajuk dan sari kata.

Gunakan setOption untuk menetapkan tajuk dan sari kata, seperti yang ditunjukkan di bawah:

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

(2) Label bawah paksi X carta trajektori diputar.

Apabila terdapat terlalu banyak teks label bawah pada paksi X carta trajektori, anda boleh memutarkan teks label bawah pada sudut tertentu untuk menjadikan kesan paparan lebih baik. Gunakan kaedah rotateLabel, seperti yang ditunjukkan di bawah:

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

(3) Jejaki pemaparan warna peta.

Penyampaian warna peta trajektori boleh ditetapkan secara individu mengikut set data yang diberikan. Gunakan kaedah setSeriesColors untuk menetapkan warna setiap set data seperti yang diperlukan, seperti yang ditunjukkan di bawah:

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

(4) Penetapan titik trek.

Saiz dan gaya mata trek boleh laras. Gunakan kaedah setChartStyle untuk menetapkan saiz titik trek dan warna garisan trek, seperti ditunjukkan di bawah:

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

Pengenalan di atas hanyalah beberapa operasi dalam lukisan carta trek juga menyediakan pelbagai lukisan carta dan kaedah penyesuaian, sila rujuk dokumentasi rasmi carta-u untuk butiran.

Ringkasnya, pemalam carta u ialah pemalam yang sangat mudah dan praktikal yang boleh melukis carta trajektori dengan mudah dan menyesuaikannya dengan halus dalam rangka kerja Uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melukis carta trajektori uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!