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