地域のカスタムカラーのためのechars 3Dマップソリューション

地域のカスタムカラーのためのechars 3Dマップソリューション

質問

プロジェクトの要件に従って、以下の州地図で個々の都市を(異なる色で)強調表示したいと考えています。

伸ばす

まず、このマップがどのように表示されるかを紹介します。

  • Vueフレームワークはechartsを使用する
  • マップはgeo3Dとscatter3Dを使用しています

もちろん、彼の実装は非常にシンプルです

まずechartsを初期化する必要があります

echartsMap を this.$echarts.init(this.$refs.echartsMap) とします。

登録マップ

this.$echarts.registerMap('河南', dataGeoLocation);
//後ろの dataGeoLocation は、ダウンロードして現在のコンポーネントに導入したマップの json ファイルであり、前の Henan は登録したいマップです。

オプションオブジェクトを設定する

ここでの構成は、独自のプロジェクト要件に基づいています。詳細な紹介については、ドキュメントをお読みください。

 this.echartsDataMap = {
              ビジュアルマップ:
                最小: 0,
                最大: 500、
                表示: 偽、
                範囲内: {
                  色: ['#eac736', '#6EAFE3'].reverse()
                },

              },
              地球半径: 100,
              地球外半径: 100,
              ジオ3D:
                マップ: マップ名、
                ビューコントロール: {
                  中心: [0, 0, 0],
                  alpha: 100, // 上下回転角度beta: 10, // 左右回転角度animation: true, // アニメーションを表示するかどうかDurationUpdate: 1000, // アニメーション時間distance: 130, // ビューから被写体までの距離minBeta: -9999, // 最小 (左) 回転角度maxBeta: 9999, // 最大 (右) 回転角度autoRotate: false,
                  自動回転方向: 'cw',
                  自動回転速度: 10,

                },
                分割エリア:{
                  エリアスタイル:{
                    色: '赤',
                  }
                },
                ライト:
                  主要: {
                    強度: 1.2、
                    // 色: '透明',
                    色: '#0D3867',
                    影品質: 'ultra'、
                    影: 真、
                    アルファ: 150,
                    ベータ: 200
                  },
                  周囲:
                    強度: 1, // 周囲の光の強度},
                  アンビエントキューブマップ:
                    拡散強度: 1、
                    テクスチャ: ''
                  }
                },
                グラウンドプレーン:
                  表示:偽
                },
                ポストエフェクト: {
                  有効: false
                },
                アイテムスタイル: {
                  色: '#175096',
                  境界線の色: 'rgb(62,215,213)',
                  不透明度: 0.8、//透明度 borderWidth: 1
                },
                ラベル: {
                  表示:偽
                },
                強調:
                  ラベル: {
                    表示:偽
                  },
                  アイテムスタイル: {
                  }
                },
                silent: false, // マウスイベントに応答しない、またはトリガーしない},
              シリーズ: [
                {
                  タイプ: 'scatter3D'、
                  座標系: 'geo3D',
                  データ: this.areaName
                  シンボル: '円'、
                  シンボルサイズ: 0,
                  silent: false, // マウスイベントに反応しない、またはトリガーしない itemStyle: {
                    境界線の色: '#fff',
                    境界線の幅: 1
                  },
                  ラベル: {
                    距離: 30,
                    表示: true、
                    フォーマッタ: '{b}',
                    位置: '下'、
                    下: '100'、
                    テキストスタイル: {
                      色: '#fff',
                      マージン上: 40,
                      フォントサイズ: 16,
                      // フォントの太さ:'太字',
                      背景色: '透明'、
                    }
                  }
                },
                {

                  タイプ: 'scatter3D'、
                  座標系: 'geo3D',
                  データ: pinArr、
                  色: '#6EAFE3',
                  シンボル: 'ピン'、
                  シンボルサイズ: 56,
                  シンボルオフセット: ['100%','50%','0'],
                  silent: false, // マウスイベントに反応しない、またはトリガーしない itemStyle: {
                    テキスト配置: 'center'、
                    境界線の色: '#6EAFE3',
                    背景色: '#6EAFE3',
                    境界線の幅: 0
                  },
                  zレベル: -10,
                  ラベル: {
                    表示: true、
                    距離: -45,
                    // 左: -10,
                    位置: '下'、
                    フォーマッタ: (データ) => {
                      data.value[3] + ' 'を返します。
                    },
                    テキストスタイル: {
                      色: '#333',
                      背景色: '透明'
                    }
                  }
                },

              ]
            };

オプションインスタンスをeチャートに配置する

echartsMap.setOption(this.echartsDataMap);

問題を解決する

記事の冒頭の問題を振り返ってみましょう。Baiduでいろいろな方法を見つけましたが、試してみたところ、効果がないようです。実際、インターネットで提供されている方法に従って改善したら解決できました。


これは、多くの方法の中で私が見つけた、より信頼性の高い方法です。ここで、geo に領域を追加するように言われています。実際、このようになっていますが、追加した後、機能しなくなりました。理由は、私のは geo3D で、彼のは geo だからですが、大きな問題ではありません。3 回試した後、最終的に、書き込み方法が異なるだけであることがわかりました。

地域:      
                {
                  名前: '鄭州市', /
                  アイテムスタイル: {
                      色: '緑'
                  }
                },{
                  名前:「南陽市」 
                  アイテムスタイル: {
                      色: '緑'
                  }
                },{
                  名前:「商丘市」
                  アイテムスタイル: {
                      色: '緑'
                  }
                }]

色の設定を修正して、geo3D に追加するだけです。

要約する

これで、echars 3Dマップのエリアのカスタムカラーに関するこの記事は終了です。echars 3Dマップのカスタムカラーに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • echarts で凡例の色とマップの背景色を設定する例
  • echarts3 の使い方のまとめ(各種チャートや地図の描画)
  • echarts を使用して地図 (ヒート マップ) (世界地図、州および市町村の地図、地区および郡の地図) を描画する Python の詳細な説明
  • Echarts マップにガイドライン効果 (labelLine) が追加されました
  • Vue の echarts に中国地図を導入するケーススタディ

<<:  VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

>>:  MySQL の非主キー自己増分使用例の分析

推薦する

Linux コマンドラインでメールを送信する 5 つの方法 (推奨)

シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...

Webデザインチュートリアル(7):Webデザインの効率化

<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...

MySQL における悲観的ロックと楽観的ロック

リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

mysql5.7.20 での最初のログイン失敗に対する簡単な解決策

まず、 (1)MySQL 5.7にはデフォルトのパスワードがあるデフォルトのパスワードを見つける g...

JavaScript 遅延読み込みの詳細な説明

目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

iframe ページで js 関数を呼び出すには js を使用します

最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再びWebをデザインしたくてうずう...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...

Apache Bench ストレステストツールの実装原理と使用状況分析

1: スループット(1秒あたりのリクエスト数)サーバーの同時処理能力を定量的に表したもので、reqs...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

Mysql 8.0.17 winx64バージョンのインストール中に発生した問題を解決する

1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...

Linux オペレーティング システムに Apache サービスをインストールする方法

ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...