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

UIデザイン

デザイン効果

Echarts の例の効果

効果の例

序文

UI によって提供される設計図については、さまざまな気象 Web サイトで同様の効果が得られ、実装方法は次の 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: