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 という名前のファイルを作成し、その中に次のコードを追加します。

このコードは、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 ファイルに追加します。

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

npm run serve

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

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