Vue と Echarts を使った天気トレンドチャート

はじめに

このプロジェクトでは、都市の一年間の気温データを表示する天気トレンドチャートを作成する方法を学びます。このチャートを使えば、ユーザーは当月のデータと次の7日間のデータを切り替えることができ、天気トレンドの包括的なビューを提供します。

👀 プレビュー

「当月」と「次の7日間」の切り替え効果を以下の図に示します。

月の切り替え効果は以下の通りです。

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• Axiosを使ってJSONファイルから天気データを取得する方法
• 月のリストをレンダリングし、クリックイベントを処理して表示されるデータを変更する方法
• 当月のデータと次の7日間のデータを切り替えるためのタブを実装する方法
• 天気データを表示するためにEchartsチャートを初期化してカスタマイズする方法

🏆 成果

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

• Axiosを使ってJSONファイルからデータを取得する
• Vue.jsを使って応答性とインタラクティブなユーザーインターフェイスを作成する
• Echartsを使って高度な機能を備えたカスタマイズされたチャートを作成する
• ユーザーインタラクションを処理し、それに応じてチャートを更新する
• フロントエンド開発、データ可視化、ユーザーエクスペリエンスデザインの知識を適用する

Skills Graph

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

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

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

├── css
│   └── style.css
├── js
│   ├── axios.js
│   ├── echarts.min.js
│   ├── vue.min.js
│   └── weather.json
└── index.html

ここで：

• css/style.css はスタイルファイルです。
• js/axios.js はaxiosファイルです。
• js/vue.min.js はvue2.xファイルです。
• js/echarts.min.js はechartsファイルです。
• js/weather.json は要求に必要な天気データです。
• index.html はメインページです。

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

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

天気データを取得する

このステップでは、提供されたJSONファイルから天気データを取得する方法を学びます。

1. index.html ファイルで、ファイルの下部にある <script> タグを探します。
2. <script> タグの中で、new Vue() を使って新しいVueインスタンスを作成します。
3. Vueインスタンスの data オプションの中で、以下の属性を追加して初期値を割り当てます。

data: {
  //...
  data: [],
  yData: [],
  xData: [],
},

4. Vueインスタンスの methods フックの中で、initChart 関数の中の this.chartOptions を探して、xAxisとseriesの data をそれぞれ対応する変数に変更します。以下のようになります。

this.chartOptions = {
  //...
  xAxis: [
    {
      //...
      data: this.xData
    }
  ],
  //...
  series: [
    {
      //...
      data: this.yData
    }
  ]
};

5. Vueインスタンスの mounted フックの中で、axios.get() メソッドを使って ./js/weather.json ファイルから天気データを取得します。修正後のコードは以下の通りです。

mounted: async function () {
  const res = await axios.get("./js/weather.json");
  this.data = res.data;
  this.yData = res.data[0]["January"];
  this.xData = [...this.yData.map((e, i) => i + 1)];
  this.$nextTick(() => {
    this.initChart();
  });
},

このコードはJSONファイルから天気データを取得し、data プロパティに保存し、その後チャート用の初期の yData と xData プロパティを設定します。最後に、チャートを描画するために initChart() メソッドを呼び出します。

月のリストをレンダリングする

このステップでは、月のリストをレンダリングし、クリックイベントを処理して表示されるデータを変更する方法を学びます。

1. index.html ファイルで、Vueインスタンスの data オプションの中で、以下の属性を追加して初期値を割り当てます。

data: {
  //...
  monthName: "January",
  monthNumber: 0,
},

2. class="month" の <ul> 要素の中で、v-for ディレクティブを使って月のリストをレンダリングします。<li> 要素にクリックイベントハンドラを追加して、月がクリックされたときに changeMonth() メソッドを呼び出します。

<ul>
  <li
    v-for="(item,key,index) in monthList"
    :class="[monthName===key?'active':'']"
    @click="changeMonth(key,index)"
  >
    {{item}}
  </li>
</ul>

3. Vueインスタンスの methods セクションの中で、changeMonth() メソッドを追加します。このメソッドは選択された月に基づいて monthName、monthNumber、yData、および xData プロパティを更新し、その後チャートを再レンダリングするために initChart() メソッドを呼び出します。

changeMonth(month, index) {
  this.monthName = month;
  this.monthNumber = index;

  this.yData = this.data[index][month];
  this.xData = [...this.yData.map((e, i) => i + 1)];

  if (index === this.nowMonth) {
    this.type = 1;
  }
  this.initChart();
},

当月と次の7日間のタブを実装する

このステップでは、ユーザーが当月のデータと次の7日間のデータを切り替えることができるタブを実装する方法を学びます。

1. index.html ファイルで、Vueインスタンスの data セクションに、以下のプロパティを追加します。

data: {
  type: 1, // 次の7日間と当月のデータの状態
  nowMonth: new Date().getMonth(),
},

2. id="currentMonth" の <div> に、monthNumber と nowMonth プロパティに基づいた条件付きレンダリングを追加します。これにより、当月のタブのみが表示されます。

<div id="currentMonth" v-if="monthNumber===nowMonth">
  <div class="title">
    <h3>{{typeTitle}}</h3>
    <div class="type" @click="clickType($event)">
      <span id="seven" :class="{'active':!type}">The next 7 days</span>
      <span id="current" :class="{'active':type}">The current month</span>
    </div>
  </div>
</div>

3. Vueインスタンスの methods セクションに、clickType() メソッドを追加します。このメソッドは、クリックされたタブに基づいて type、typeTitle、yData、および xData プロパティを更新し、その後チャートを再レンダリングするために initChart() メソッドを呼び出します。

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "The next 7 days";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "The current month";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

4. getSevenData() メソッドを追加します。このメソッドは、次の7日間のx軸のラベルとy軸のデータを計算します。

getSevenData() {
  let newXdata = [],
    newYdata = [];
  for (let i = 0; i < 7; i++) {
    let now = new Date();
    let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
    now.setTime(time);
    newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`);

    if (this.monthNumber === now.getMonth()) {
      newYdata.push(this.yData[now.getDate() - 1]);
    } else {
      let nextMonth = this.data[now.getMonth()];
      for (const key in nextMonth) {
        newYdata.push(nextMonth[key][now.getDate() - 1]);
      }
    }
  }
  return [newXdata, newYdata];
},

このメソッドは、月の切り替えを考慮して、次の7日間のx軸のラベルとy軸のデータを計算します。

5. ファイルを保存し、ページを再読み込みして更新されたチャートを確認します。以下の図は、「当月」と「次の7日間」を切り替えた際の効果を示しています（時間関数を通じて取得したもので、ここでは4月を想定）。

月の切り替え効果は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabExでさらに多くの実験を行ってみましょう。