はじめに
このプロジェクトでは、都市の一年間の気温データを表示する天気トレンドチャートを作成する方法を学びます。このチャートを使えば、ユーザーは当月のデータと次の7日間のデータを切り替えることができ、天気トレンドの包括的なビューを提供します。
👀 プレビュー
「当月」と「次の7日間」の切り替え効果を以下の図に示します。
月の切り替え効果は以下の通りです。
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
- Axiosを使ってJSONファイルから天気データを取得する方法
- 月のリストをレンダリングし、クリックイベントを処理して表示されるデータを変更する方法
- 当月のデータと次の7日間のデータを切り替えるためのタブを実装する方法
- 天気データを表示するためにEchartsチャートを初期化してカスタマイズする方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- Axiosを使ってJSONファイルからデータを取得する
- Vue.jsを使って応答性とインタラクティブなユーザーインターフェイスを作成する
- Echartsを使って高度な機能を備えたカスタマイズされたチャートを作成する
- ユーザーインタラクションを処理し、それに応じてチャートを更新する
- フロントエンド開発、データ可視化、ユーザーエクスペリエンスデザインの知識を適用する
