質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異なる色で)強調表示したいと考えています。 伸ばすまず、このマップがどのように表示されるかを紹介します。
もちろん、彼の実装は非常にシンプルです まず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を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル
目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...
最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...
この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...
トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...
目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...
httpとhttpsの違いは一部のウェブサイトでは、http を開くと、安全ではないというメッセージ...
問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...
目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...
最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...
HTML に画像を挿入するには、画像を表示するための HTML タグが必要です。これは、img タ...
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...
目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...
Linux ホスト名変更コマンド1. ホスト名を一時的に変更するだけの場合は、hostname コマ...
問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...