Rumah > hujung hadapan web > View.js > teks badan

Kemahiran visualisasi data dan paparan carta dalam pembangunan Vue

王林
Lepaskan: 2023-11-04 09:51:17
asal
1473 orang telah melayarinya

Kemahiran visualisasi data dan paparan carta dalam pembangunan Vue

Dengan kemunculan era data besar, visualisasi data dan paparan carta telah menjadi fungsi penting untuk lebih banyak aplikasi web. Sebagai rangka kerja JavaScript yang popular, Vue juga menyediakan pelbagai alatan dan teknik untuk membantu pembangun mencapai visualisasi data dan paparan carta. Dalam artikel ini, kami akan memperkenalkan beberapa teknik visualisasi data dan paparan carta yang biasa digunakan untuk membantu pembangun Vue membina aplikasi web yang lebih visual dan intuitif.

  1. Menggunakan Vue.js+Echarts

Echarts ialah perpustakaan visualisasi data berasaskan JavaScript yang menyokong berbilang jenis carta dan format data. Menggunakan Echarts bersama-sama dengan rangka kerja Vue.js membolehkan kami membina pelbagai carta data dengan lebih pantas. Apabila menggunakan Echarts, kami boleh merangkum komponen Echarts ke dalam komponen Vue dan menggunakannya semula, dengan itu menjimatkan kod dan masa.

Untuk menggunakan Echarts, kita perlu memasang dua perpustakaan echarts dan vue-echarts:

npm i -S echarts vue-echarts
Salin selepas log masuk

Setelah pemasangan selesai, lakukan konfigurasi berikut dalam Vue.js :

import Vue from 'vue'
import ECharts from 'vue-echarts'

// 引入ECharts各模块,并注册
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

Vue.component('v-chart', ECharts)
Salin selepas log masuk

Kemudian kita boleh merujuk dan menggunakannya dalam komponen Vue:

<template>
  <div>
    <v-chart :options="chartOption"></v-chart>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartOption: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'bar'
        }]
      }
    }
  }
}
</script>
Salin selepas log masuk
  1. Gunakan Vue.js+D3.js
  2. #🎜 ##🎜 🎜#D3.js ialah perpustakaan JavaScript yang digunakan untuk mengendalikan dokumen (Dokumen Ia boleh mencipta carta visual yang cekap dan dinamik melalui DOM (Model Objek Dokumen). Digunakan bersama Vue.js, ia boleh memberikan kami kaedah paparan data yang lebih fleksibel. D3.js biasanya digunakan untuk melaksanakan visualisasi data dan carta tersuai, yang memerlukan pembangun menguasai kemahiran SVG dan CSS tertentu.

Pasang D3.js:

npm i -S d3
Salin selepas log masuk

Perkenalkan D3.js ke dalam Vue.js:

import * as d3 from 'd3'
Salin selepas log masuk

Gunakan komponen Vue:js dalam 🎜#

<template>
  <div>
    <svg></svg>
  </div>
</template>

<script>
export default {
  mounted () {
    // 画布大小
    const width = 400
    const height = 400

    // 在 body 里添加一个 SVG 画布
    const svg = d3.select('svg')
      .attr('width', width)
      .attr('height', height)

    // 定义一个数组
    const dataset = [250, 210, 170, 130, 90]

    // 定义比例尺
    const linear = d3.scaleLinear()
      .domain([0, d3.max(dataset)])
      .range([0, 300])

    // 定义坐标轴
    const axis = d3.axisBottom()
      .scale(linear)

    // 绘制矩形
    svg.selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 70)
      .attr('y', d => height - linear(d))
      .attr('width', 65)
      .attr('height', d => linear(d))
      .attr('fill', 'steelblue')

    // 绘制坐标轴
    svg.append('g')
      .attr('transform', `translate(0, ${height})`)
      .call(axis)
  }
}
</script>
Salin selepas log masuk

Menggunakan Vue.js+Highcharts

  1. Highcharts ialah perpustakaan carta JavaScript yang popular yang menyediakan pelbagai jenis carta yang mudah digunakan dan disesuaikan . Digabungkan dengan Vue.js, kami boleh menggabungkan carta Highcharts dan menjana pelbagai carta dengan cepat.
Pasang Highcharts:

npm i -S highcharts highcharts-vue
Salin selepas log masuk

Konfigurasikan dan gunakan Highcharts dalam Vue.js:

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

Vue.use(HighchartsVue, {
  Highcharts
})
Salin selepas log masuk

Kemudian, rujuk dan gunakan komponen Vue: # dalam komponen Vue 🎜🎜#
<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartOptions: {
        chart: {
          type: 'line'
        },
        title: {
          text: 'Temperature Change'
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          title: {
            text: 'Temperature (°C)'
          }
        },
        series: [{
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
          color: '#ff9800'
        }]
      }
    }
  }
}
</script>
Salin selepas log masuk

Kesimpulan

Di atas ialah beberapa kaedah biasa menggunakan visualisasi data dan teknik paparan carta dalam pembangunan Vue.js. Sama ada anda menggunakan Echarts, D3.js atau Highcharts, anda boleh membina pelbagai carta visual yang cekap dan dinamik dengan cepat melalui banyak fungsi yang disediakan oleh rangka kerja Vue.js. Dalam pembangunan sebenar, hanya dengan memilih alat dan teknologi carta yang sesuai, kami boleh memberikan pengguna interaksi data dan pengalaman paparan yang lebih baik.

Atas ialah kandungan terperinci Kemahiran visualisasi data dan paparan carta dalam pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan