Bagaimana untuk menyertai papan pemuka dalam uniapp

Memandangkan pasaran aplikasi mudah alih terus berkembang dan persaingan menjadi lebih sengit, sebagai pembangun, kami perlu terus meningkatkan pengalaman pengguna dan daya tarikan aplikasi kami untuk mengekalkan daya saing aplikasi kami di pasaran. Papan pemuka ialah ciri yang sangat berguna yang membantu pengguna menggunakan apl dengan lebih baik dengan memberi mereka gambaran keseluruhan apl sepintas lalu. Dalam artikel ini, kita akan membincangkan cara menambah papan pemuka dalam uniapp.

1. Apakah itu papan pemuka?

Papan pemuka ialah panel kawalan visual yang memaparkan data aplikasi, metrik dan analitis serta menyediakan pengguna antara muka yang ringkas dan mudah digunakan. Ia membolehkan pengguna memahami maklumat aplikasi dengan cepat, seperti bilangan pengguna aktif, lawatan, hasil, dsb. aplikasi. Melalui papan pemuka, pengguna boleh lebih memahami situasi keseluruhan aplikasi dan boleh membuat keputusan yang lebih baik.

2. Gunakan vue-chartjs perpustakaan pergantungan Vue.js untuk menambah papan pemuka

Dalam uniapp, kami boleh menggunakan vue-chartjs perpustakaan pergantungan Vue.js untuk menambah papan pemuka. vue-chartjs ialah pemalam untuk Vue.js 2.0 berdasarkan Chart.js, yang membolehkan kami membuat carta dan papan pemuka dengan mudah.

Pertama, kita perlu memasang pustaka pergantungan vue-chartjs, yang boleh dipasang melalui arahan npm.

npm install vue-chartjs --save

Kemudian kami perlu mengimport komponen yang diperlukan dalam fail vue kami. Di bawah ialah contoh papan pemuka yang mudah.

<template>
  <div>
    <bar-chart></bar-chart>
  </div>
</template>
 
<script>
import { Bar } from &#39;vue-chartjs&#39;
 
export default {
  extends: Bar,
  mounted () {
    this.renderChart({
      labels: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;],
      datasets: [
        {
          label: &#39;Data One&#39;,
          backgroundColor: &#39;#f87979&#39;,
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

Kami dapat melihat bahawa kami mula-mula mengimport komponen Bar dan kemudian mencipta papan pemuka kami dengan mewarisi Bar. Dalam kitaran hayat yang dipasang, kami menggunakan kaedah renderChart untuk memaparkan papan pemuka kami. Dalam kaedah renderChart, kami boleh menentukan data dan item konfigurasi kami. Dalam contoh ini, kami menetapkan histogram yang mengandungi tujuh bulan data. Kami juga menetapkan item konfigurasi untuk menangani isu ketanggapan dan mengekalkan nisbah aspek.

3. Gunakan perpustakaan pergantungan AntV G2 untuk menambah papan pemuka

Selain vue-chartjs, kami juga boleh menggunakan perpustakaan pergantungan AntV G2 untuk menambah papan pemuka. G2 ialah perpustakaan carta visualisasi profesional yang menyediakan pelbagai carta dan alatan visualisasi, termasuk papan pemuka.

Begitu juga, kita perlu memasang perpustakaan bergantung kepada G2. Ia boleh dipasang melalui arahan npm.

npm install @antv/g2 --save

Kemudian kami perlu mengimport komponen yang diperlukan dalam fail vue kami. Di bawah ialah contoh papan pemuka yang mudah.

<template>
  <div></div>
</template>
 
<script>
import G2 from &#39;@antv/g2&#39;
 
export default {
  mounted () {
    const data = [
      { year: &#39;2014&#39;, sales: 1000 },
      { year: &#39;2015&#39;, sales: 1170 },
      { year: &#39;2016&#39;, sales: 660 },
      { year: &#39;2017&#39;, sales: 1030 },
      { year: &#39;2018&#39;, sales: 1230 },
      { year: &#39;2019&#39;, sales: 1400 },
      { year: &#39;2020&#39;, sales: 1700 }
    ];
 
    const chart = new G2.Chart({
      container: this.$refs.chart,
      width: 500,
      height: 300
    });
 
    chart.source(data);
    chart.interval().position(&#39;year*sales&#39;);
    chart.render();
  }
}
</script>

Kami dapat melihat bahawa kami mula-mula mengimport pustaka G2, dan kemudian menggunakan G2.Carta dalam kitaran hayat yang dipasang untuk mencipta papan pemuka kami. Dalam pembina Carta, kami menentukan bekas, lebar dan ketinggian kawasan lukisan. Kami kemudiannya menentukan data sumber dan mencipta histogram menggunakan kaedah selang. Akhir sekali, kami menggunakan kaedah render untuk memaparkan papan pemuka kami.

4. Ringkasan

Dalam artikel ini, kami membincangkan cara menambah papan pemuka dalam uniapp dengan menggunakan vue-chartjs dan perpustakaan G2. Papan pemuka ialah ciri yang sangat berguna yang membantu pengguna menggunakan apl dengan lebih baik dengan memberi mereka gambaran keseluruhan apl sepintas lalu. Kami boleh memilih perpustakaan yang sesuai untuk mencipta papan pemuka kami mengikut keperluan kami untuk meningkatkan pengalaman pengguna dan daya tarikan aplikasi kami.

Atas ialah kandungan terperinci Bagaimana untuk menyertai papan pemuka dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!