質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異なる色で)強調表示したいと考えています。 伸ばすまず、このマップがどのように表示されるかを紹介します。
もちろん、彼の実装は非常にシンプルです まず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. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...
<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...
リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
まず、 (1)MySQL 5.7にはデフォルトのパスワードがあるデフォルトのパスワードを見つける g...
目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再びWebをデザインしたくてうずう...
forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...
1: スループット(1秒あたりのリクエスト数)サーバーの同時処理能力を定量的に表したもので、reqs...
多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...
1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...