地域のカスタムカラーのための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 の非主キー自己増分使用例の分析

推薦する

MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...

Dockerボリュームマウントの実装方法

最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...

ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...

Nginx http を https にアップグレードする手順を完了する

httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...

MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

HTML 挿入画像の例 (HTML 追加画像)

HTML に画像を挿入するには、画像を表示するための HTML タグが必要です。これは、img タ...

docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析

Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

Tomcat マルチレイヤーコンテナの設計に関する簡単な説明

目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...

Linuxホスト名変更コマンドの詳しい説明

Linux ホスト名変更コマンド1. ホスト名を一時的に変更するだけの場合は、hostname コマ...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...