Vue と ECharts4Taro3 を使用して美しいリアルタイム データ監視グラフを作成する方法

Vue と ECharts4Taro3 を使用して美しいリアルタイム データ監視グラフを作成する方法

はじめに:
データ分析とリアルタイム監視の需要が高まる中、シンプルで強力な表示方法が必要です。リアルタイムのデータ変化傾向と分析結果。 Vue と ECharts4Taro3 は、このニーズに非常によく応えます。この記事では、Vue と ECharts4Taro3 を使用して美しいリアルタイム データ監視グラフを作成する方法を紹介し、関連するコード例を示します。

1. 環境の準備
始める前に、必要な依存関係をいくつかインストールする必要があります。まず、Node.js と npm がインストールされていることを確認します。次に、コマンド ラインで次のコマンドを実行して、Vue と 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. リアルタイム データ監視コンポーネントを作成します。
作成したプロジェクトで、実際のコードの記述を開始できます。 -時間データ監視コンポーネント。まず、src/components フォルダーの下に RealTimeChart.vue という名前のファイルを作成し、その中に次のコードを追加します。

<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>

このコードは、Vue 3 コンポジション API を使用してコンポーネントの状態を管理する RealTimeChart という名前のコンポーネントを作成します。そしてライフサイクル。 setup 関数では、useEChart を使用して ECharts チャートを初期化し、チャート構成をチャート インスタンスにバインドします。

3. 構成チャート
前のステップでは、chartOptions という名前の構成オブジェクトを導入しました。同じディレクトリに chartOptions.js ファイルを作成し、次のコードを追加する必要があります。

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: []
    }
  ]
}

この構成オブジェクトでは、グラフのタイトル、プロンプト情報、座標軸などを定義します。同時にチャートの系列データも定義します（ここでは例としてデータ 1、データ 2、データ 3 を取り上げます）。

4. リアルタイム データを使用してチャートを更新する
前のコードでは、echarts.init の 3 番目のパラメーターの位置に ecOptions という名前の構成オブジェクトを渡しましたが、オブジェクトのデータ属性は空の配列。次に、ライブ データを使用してグラフを更新します。 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)

このコードはタイマーを設定し、データを毎秒更新します。 addData メソッドを使用して新しいデータ ポイントをチャートに追加し、setOption メソッドを使用して横座標データを更新します。

5. リアルタイム データを使用してチャートを監視する
これで、他のコンポーネントで RealTimeChart コンポーネントを使用して、リアルタイム データを表示できるようになります。次のコードを 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>

コードを実行します。
コマンド ラインで次のコマンドを実行して、コードを実行します。

npm run serve

結論:
上記の手順を完了すると、Vue と ECharts4Taro3 を使用して美しいリアルタイム データ モニタリング チャートを作成することに成功しました。継続的にデータを更新し、チャート構成を調整することで、より豊富で多様なデータ監視チャートを実現できます。この記事があなたのお役に立てば幸いです。また、Vue と ECharts4Taro3 の強力な機能をさらに探索して、より魅力的なリアルタイム データ チャートを作成できることを願っています。

以上がVue と ECharts4Taro3 を使用して美しいリアルタイム データ監視グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。