Echarts を使ったリアルタイム販売ダッシュボード

はじめに

このプロジェクトでは、Echartsライブラリを使ってリアルタイムの販売ダッシュボードを作成する方法を学びます。このダッシュボードは、視覚的に魅力的で理解しやすい形式で販売と数量データを表示します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• プロジェクトをセットアップし、必要なファイルを入手する方法
• index.jsファイルでの「yAxis」設定を完了する方法
• renderChart関数でのバックエンドデータからの値を適切なチャートオプションに正しく割り当てる方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

• Echartsライブラリを使ってデータをチャートにレンダリングする
• データ可視化プロジェクト用のコードを構造化して整理する
• 非同期データの取得を行い、リアルタイムでチャートを更新する

Skills Graph

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── echarts.js
├── index.css
├── index.html
└── index.js

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。

yAxis設定の完了

このステップでは、index.jsファイルでの「yAxis」設定をどのように完了させるか学びます。

1. index.jsファイルを開きます。

2. optionオブジェクト内の「yAxis」設定を見つけます。

3. 「yAxis」設定を更新して、以下の要件を満たすようにします。

   • 最初の項目は、nameを「sales」とし、チャートの左側にpositionを持つものとする。
   • 2番目の項目は、nameを「volume」とし、チャートの右側にpositionを持つものとする。

更新後の「yAxis」設定は以下のようになります。

yAxis: [
  {
    type: "value",
    name: "sales",
    position: "left"
  },
  {
    type: "value",
    name: "volum",
    position: "right"
  }
],

renderChart関数の完成

このステップでは、index.jsファイル内のrenderChart関数をどのように完成させるか学びます。

1. index.jsファイルを開きます。
2. renderChart関数を見つけます。
3. renderChart関数内のコードを完成させて、saleObjとcountObjからの値をX軸の時間、Y軸の販売と数量に正しく割り当てます。

更新後のrenderChart関数は以下のようになります。

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // Assign the values from `saleObj` and `countObj` to the appropriate options
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

これらの手順を完了した後、あなたの販売ダッシュボードプロジェクトは完全に機能し、リアルタイムの販売と数量データを正しく表示するはずです。最終的なページの表示は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabExでさらに多くの実験を行って練習してください。