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 } } 注記: 最終結果これで、Echarts を使用して複数の X 軸を使用して 7 日間の天気予報を実現するサンプル コードに関するこの記事は終了です。Echarts の複数 X 軸天気予報の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...
目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...
長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...
Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...
作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...
目次序文: 1. ユーザー権利の概要2. 実際の権限管理序文:データベースのユーザー権限管理について...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
【1】中央の要素の幅と高さを知る絶対値 + 負のマージンコードの実装 .wrapBox5{ 幅: 3...
序文説明を簡略化するために以前に設定した要件は、他のグループから MQ メッセージを受信し、データベ...
序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...
目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...
目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...
序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...