Cara mencipta carta pemantauan data masa nyata yang cantik menggunakan Vue dan ECharts4Taro3

Cara membuat carta pemantauan data masa nyata yang indah menggunakan Vue dan ECharts4Taro3

Pengenalan:
Dengan peningkatan permintaan untuk analisis data dan pemantauan masa nyata, kami memerlukan kaedah yang mudah dan berkuasa untuk memaparkan trend yang berubah-ubah dan hasil analisis sebenar -data masa. Vue dan ECharts4Taro3 boleh memenuhi keperluan ini dengan baik. Artikel ini akan memperkenalkan cara menggunakan Vue dan ECharts4Taro3 untuk mencipta carta pemantauan data masa nyata yang cantik dan menyediakan contoh kod yang berkaitan.

1. Persediaan persekitaran
Sebelum kita mula, kita perlu memasang beberapa kebergantungan yang diperlukan. Mula-mula, pastikan anda memasang Node.js dan npm. Kemudian, laksanakan arahan berikut pada baris arahan untuk memasang Vue dan ECharts4Taro3:

npm install -g @vue/cli
vue create my-project
cd my-project
vue add @tarojs/vue
npm install echarts4taro3 @tarojs/taro@3.3.10 @tarojs/cli@3.3.10

2. Buat komponen pemantauan data masa nyata
Dalam projek yang dibuat, kita boleh mula menulis kod untuk komponen pemantauan data masa nyata. Mula-mula, buat fail bernama RealTimeChart.vue di bawah folder src/components, dan kemudian tambahkan kod berikut di dalamnya:

<template>
  <view class="real-time-chart"></view>
</template>

<script>
import { ecOptions } from './chartOptions'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useEChart } from 'echarts4taro3'

export default {
  setup() {
    const chartInstance = ref(null)

    useEChart(
      chartInstance,
      echarts.init,
      ecOptions
    )

    onMounted(() => {
      chartInstance.value.init()
    })

    return {}
  }
}
</script>

<style>
.real-time-chart {
  width: 100%;
  height: 100%;
}
</style>

Kod ini mencipta komponen bernama RealTimeChart, yang menggunakan API Komposisi Vue 3 untuk Mengurus keadaan komponen dan kitaran hayat. Dalam fungsi persediaan, kami menggunakan useEChart untuk memulakan carta ECharts dan mengikat konfigurasi carta pada contoh carta.

3. Carta konfigurasi
Dalam langkah sebelumnya, kami memperkenalkan objek konfigurasi bernama chartOptions. Kami perlu mencipta fail chartOptions.js dalam direktori yang sama dan menambah kod berikut di dalamnya:

export const ecOptions = {
  title: {
    text: '实时数据监控图表'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['数据1', '数据2', '数据3']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数据1',
      type: 'line',
      data: []
    },
    {
      name: '数据2',
      type: 'line',
      data: []
    },
    {
      name: '数据3',
      type: 'line',
      data: []
    }
  ]
}

Dalam objek konfigurasi ini, kami mentakrifkan tajuk, maklumat segera, paksi koordinat, dsb. carta. Pada masa yang sama, kami juga mentakrifkan data siri carta Di sini kami mengambil data 1, data 2 dan data 3 sebagai contoh.

4. Kemas kini carta menggunakan data masa nyata
Dalam kod sebelumnya, kami menghantar objek konfigurasi bernama ecOptions dalam kedudukan parameter ketiga echarts.init, tetapi atribut data objek ialah tatasusunan kosong. Seterusnya, kami akan mengemas kini carta dengan data langsung. Tambahkan kod berikut dalam fungsi persediaan komponen RealTimeChart:

const { addData } = chartInstance.value

// 模拟1秒钟更新一次数据
setInterval(() => {
  const now = new Date()
  const data1 = Math.random() * 100
  const data2 = Math.random() * 100
  const data3 = Math.random() * 100

  addData([
    [0, data1],
    [1, data2],
    [2, data3],
  ])

  chartInstance.value.setOption({
    xAxis: {
      data: [now.getHours(), now.getMinutes(), now.getSeconds()]
    }
  })
}, 1000)

Kod ini menetapkan pemasa untuk mengemas kini data setiap saat. Kami menambah mata data baharu pada carta melalui kaedah addData dan mengemas kini data abscissa melalui kaedah setOption.

5. Gunakan data masa nyata untuk memantau carta
Kini, kita boleh menggunakan komponen RealTimeChart dalam komponen lain untuk memaparkan data masa nyata. Tambahkan kod berikut dalam fail App.vue:

<template>
  <view class="container">
    <real-time-chart></real-time-chart>
  </view>
</template>

<script>
import RealTimeChart from './components/RealTimeChart'

export default {
  components: {
    RealTimeChart
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Jalankan kod:
Laksanakan arahan berikut dalam baris arahan untuk menjalankan kod:

npm run serve

Kesimpulan:
Melalui langkah di atas, kami berjaya menggunakan Vue dan ECharts4Taro3 untuk buat carta pemantauan data masa nyata yang cantik. Dengan sentiasa mengemas kini data dan melaraskan konfigurasi carta, kami boleh mencapai carta pemantauan data yang lebih kaya dan lebih pelbagai. Saya harap artikel ini membantu anda, dan saya harap anda boleh meneroka lebih lanjut fungsi berkuasa Vue dan ECharts4Taro3 dan mencipta lebih banyak carta data masa nyata yang menakjubkan.

Atas ialah kandungan terperinci Cara mencipta carta pemantauan data masa nyata yang cantik menggunakan Vue dan ECharts4Taro3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!