複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

UIデザイン

デザイン効果

Echarts の例の効果

効果の例

序文

UI によって提供される設計図については、さまざまな気象 Web サイトで同様の効果が得られ、実装方法は次の 2 つのカテゴリに分けられます。

  1. 温度曲線を描くためのグリッドレイアウト + チャートフレームワーク。
  2. グリッドレイアウト + キャンバスに自分で描いた温度曲線。

これら 2 つの実装方法の共通点は、曲線と上の説明文が分離されていることです。これの難しさは、日付アイコン部分と温度曲線部分の適応的な配置を実現することです。私の CSS の経験は比較的浅く、Echarts チャート フレームワークを比較的多く使用しているため、上記の効果を実現するために Echarts (バージョン: 4.6.0 ) を使用してみることにしました。ドキュメントを確認したところ、Echarts は複数の X 軸とリッチ テキスト表示をサポートしていることがわかりました。X 軸のオフセットを調整することで、表示位置を制御できます。同時に、リッチ テキストは背景アイコンの設定をサポートしており、天気アイコンを表示するために使用できます。いくつかテストした後、次のサンプルコードが得られました。

サンプルコード

次のコードを Echarts にインポートして直接実行できます。

var オプション = {
        グリッド: {
          表示: true、
          背景色: '透明'、
          不透明度: 0.3、
          境界線の幅: '0',
          上: '180'、
          下: '0'
        },
        ツールチップ: {
          トリガー: '軸'
        },
        伝説: {
          表示:偽
        },
        x軸: [
          // 日付{
            タイプ: 'カテゴリ',
            境界ギャップ: false、
            位置: 'トップ'、
            オフセット: 130,
            zレベル: 100,
            軸線: {
              表示:偽
            },
            軸目盛り: {
              表示:偽
            },
            軸ラベル: {
              間隔: 0,
              フォーマッタ: [
                '{a|{値}}'
              ].join('\n'),
              リッチ:
                a: {
                  // 色: '白',
                  フォントサイズ: 18
                }
              }
            },
            名前テキストスタイル: {

            },
            データ: ["25日","26日","27日","28日","29日","30日","31日"]
          },
          // 週{
            タイプ: 'カテゴリ',
            境界ギャップ: false、
            位置: 'トップ'、
            オフセット: 110,
            zレベル: 100,
            軸線: {
              表示:偽
            },
            軸目盛り: {
              表示:偽
            },
            軸ラベル: {
              間隔: 0,
              フォーマッタ: [
                '{a|{値}}'
              ].join('\n'),
              リッチ:
                a: {
                  // 色: '白',
                  フォントサイズ: 14
                }
              }
            },
            名前テキストスタイル: {
              フォントの太さ: '太字'、
              フォントサイズ: 19
            },
            データ: ["月曜日","火曜日","水曜日","木曜日","金曜日","土曜日","日曜日"]
          },
          // 天気アイコン {
            タイプ: 'カテゴリ',
            境界ギャップ: false、
            位置: 'トップ'、
            オフセット: 20,
            zレベル: 100,
            軸線: {
              表示:偽
            },
            軸目盛り: {
              表示:偽
            },
            軸ラベル: {
              間隔: 0,
              フォーマッタ: 関数(値, インデックス) {
                '{' + インデックス + '| }\n{b|' + 値 + '}' を返します
              },
              リッチ:
                0: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                1: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                2: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/阴.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                3: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                4: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/多云.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                5: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                6: {
                  背景色:
                    // 画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    画像: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  高さ: 40,
                  幅: 40
                },
                b: {
                  // 色: '白',
                  フォントサイズ: 12,
                  行の高さ: 30,
                  高さ: 20
                }
              }
            },
            名前テキストスタイル: {
              フォントの太さ: '太字'、
              フォントサイズ: 19
            },
            // データ: this.weatherdata.weather
            データ: ["小雨","小雨","曇り","小雨","曇り","小雨","小雨"]
          }
        ]、
        y軸: {
          タイプ: '値',
          表示: 偽、
          軸ラベル: {
            フォーマッタ: '{値} °C',
            色: 「白」
          }
        },
        シリーズ: [
          {
            名前: 「最高気温」
            タイプ: 'line'、
            データ: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
            シンボル: 'emptyCircle',
            シンボルサイズ: 10,
            表示シンボル: true、
            スムーズ: 真、
            アイテムスタイル: {
              普通: {
                色: '#C95843'
              }
            },
            ラベル: {
              表示: true、
              位置: 'トップ'、
              // 色: '白',
              フォーマッタ: '{c} °C'
            },
            線のスタイル:
              幅: 1,
              // 色: '白'
            },
            エリアスタイル: {
              不透明度: 1,
              色: '透明'
            }
          },
          {
            名前: 「最低気温」
            タイプ: 'line'、
            データ: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
            シンボル: 'emptyCircle',
            シンボルサイズ: 10,
            表示シンボル: true、
            スムーズ: 真、
            アイテムスタイル: {
              普通: {
                色: '青'
              }
            },
            ラベル: {
              表示: true、
              位置: '下'、
              // 色: '白',
              フォーマッタ: '{c} °C'
            },
            線のスタイル:
              幅: 1,
              // 色: '白'
            },
            エリアスタイル: {
              不透明度: 1,
              色: '透明'
            }
          }
        ]
      }

上記コードで最も難しいのは天気アイコンの設定です。axisLabelのフォーマッタメソッド内の値はリッチテキストでは使用できないため、フォーマッタメソッド内で値の添え字をリッチテキスト内のCSS名に設定し、その添え字を使用して天気アイコン設定時に表示するアイコン名を取得します。

//axisLabel のフォーマッタ メソッドformatter: function(value, index) {
 '{' + インデックス + '| }\n{b|' + 値 + '}' を返します
}

// axisLabel の rich メソッド rich: {
	索引: {
	     背景色:
	       画像: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[index]] + '.png')
	     },
	     高さ: 40,
	     幅: 40
	   }
   }

注記
1. this.weatherIconDic は、ローカルで定義した天気アイコンのデータ辞書です。 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
2. this.weatherdata.weather は、バックエンドから返される天気の種類です。 (例: ["小雨"、"小雨"、"曇り"、"小雨"、"曇り"、"小雨"、"小雨"、"小雨"])

最終結果

ここに画像の説明を挿入

これで、Echarts を使用して複数の X 軸を使用して 7 日間の天気予報を実現するサンプル コードに関するこの記事は終了です。Echarts の複数 X 軸天気予報の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • echartsは、データズームの開始値(x軸とy軸を含む)の取得を実装します。
  • echarts統計のX軸間隔の数値例コードの詳細な説明

<<:  DockerにTomcat8をインストールする方法

>>:  MySQLでカーソルトリガーを使用する方法

推薦する

CentOS7 での mysql 5.7.23 のバイナリ インストール

インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

MySQL でデータを削除してもテーブル ファイルのサイズが変更されないのはなぜですか?

長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

MySQLユーザー権限管理の詳細な説明

目次序文: 1. ユーザー権利の概要2. 実際の権限管理序文:データベースのユーザー権限管理について...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

CSS で要素を垂直方向に中央揃えする 7 つの方法

【1】中央の要素の幅と高さを知る絶対値 + 負のマージンコードの実装 .wrapBox5{ 幅: 3...

MySQL におけるユニーク制約と NULL の詳細な説明

序文説明を簡略化するために以前に設定した要件は、他のグループから MQ メッセージを受信し、データベ...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

Hyper-v仮想マシンを使用してCentos7をインストールする

目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...

JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...