echartsマップカルーセルハイライトを解決するための記事

echartsマップカルーセルハイライトを解決するための記事

序文

最近は会社のスーパーデータスクリーンの作業で忙しく、なかなか記事を継続的に更新する時間が取れません。

しかし、私は長い間記事の更新を止めていなかったので、私が仕事でよく使用する echarts マップ カルーセルのハイライトを共有します。

使用されるテクノロジー スタックは vue2.x です。効果については皆さんもご存知だと思いますので、始めましょう。

やることリスト

  • 地図を用意するだけ
  • インスタンスをバックアップ用に保存する
  • タイマーを設定する
  • マウスインとマウスアウトのイベントを設定する

やるだけ

地図を準備する

まずは簡単な地図を用意します。私は広州にいるので、広東省の地図を使います。

echarts でマップを使用する方法については説明しません。ドキュメントを読んで、対応するマップ json をインポートするだけです。誰でもできると思います。ところで、マップの json ファイルはどこにあるかと聞かれました。DataV.GeoAtlas で目的の都市を検索し、json ファイルを選択してダウンロードすることができます。

インスタンスをバックアップ用に保存する

まず、マップ カルーセルを強調表示したい場合は、eharts に付属する dispatchActionAPI を使用する必要があり、この API は eharts インスタンスで使用されるため、vue では最初にマップ初期化のインスタンスを保存する必要があることを知っておく必要があります。

<テンプレート>
    <div ref="myChart" id="myChart" class="gzMap"></div>
</テンプレート>
...
    データ () {
        戻る {
                チャート: ''、
                オプション:{
                    ...
                }
        };
    },
...
    マウントされた(){
        this.$echarts.registerMap('Guangdong', gzData);//マップデータを取得 this.setMyEchart(); //ページがマウントされた後に実行},
    方法:{
        setMyEchart() {
            const myChart = this.$refs.myChart; // refif (myChart) を通じて DOM ノードを取得します {
                const thisChart = this.$echarts.init(myChart); // プロトタイプ Echarts を使用して初期化します this.charts = thisChart; // インスタンスを保存します thisChart.setOption(this.option); // 記述された構成項目を Echarts にマウントします }
        },
    }
...

最初に echarts を初期化するときに、後で使用するためにインスタンスを保存します。残りの構成は自分で構成できます。ソースコードは記事の下部に配置されます。ご興味があれば取​​得できます。

タイマーカルーセルの設定

カルーセルのハイライトを設定する必要があるので、簡単に言うと、点灯するまでの時間を固定し、その後プロンプト ボックスを表示することを意味します。現在、デフォルトでは、通常のマウス イン ハイライトとプロンプト ボックスがすべてのユーザーによって設定されています。

まずタイマーメソッドを設定し、その中で公式のハイライトメソッドとプロンプトボックスメソッドを呼び出し、指定された時間内にフラッシュします。

...
    データ () {
        戻る {
                時間: ''、
                チャート: ''、
                インデックス: -1,
                オプション:{
                    ...
                }
        };
    },
...
    方法:{
        マイチャートを設定する() {
            ...
            this.mapActive();
            ...
        },
        マップアクティブ() {
            定数データ長 = gzData.features.length;
            // タイマーを使用してハイライトを制御します this.mTime = setInterval(() => {
                // 前のハイライトをクリアする this.charts.dispatchAction({
                    タイプ: '軽視'、
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                this.index++;
                // 現在の下付き文字が強調表示されます this.charts.dispatchAction({
                    タイプ: 'ハイライト'、
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                this.charts.dispatchAction({
                    タイプ: 'showTip',
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                if (this.index > データ長) {
                    this.index = 0;
                }
            }, 2000);
        },
    }

まず、タイマーを受け取るためのコンテナと、どの都市が強調表示されているかを表すデータ内のインデックス添え字を設定します。

mapActive() では、まずこのマップ上のすべての都市の dataLength を取得します。これは、dispatchAction が下付き文字に応じてハイライトを切り替えるためです。インデックス番号が都市の数より大きい場合は表示されないため、inedx をすべての都市の数より小さくなるように制御する必要があります。

タイマーを設定して、先にハイライト表示された都市を最初にクリアします。クリアしないと、複数の都市が一度にハイライト表示され、期待どおりの効果が得られません。

次に、例を使用して eharts メソッドを呼び出し、ハイライトとプロンプト ボックスのポップアップを実現します。dispatchAction はいくつかのパラメータを受け取り、type はハイライトやプロンプト ボックスなど、表示するタイプを示します。詳細は公式 Web サイトで確認できます。

最後に、インデックスが都市データ長の数を超えているかどうかを確認します。超えている場合は、ゼロにリセットして最初からやり直します。これで、カルーセルのハイライトは完了です。

マウスイベントの追加

もちろん、これで終わるわけにはいきません。いくつかのイベント効果を追加する必要があります。たとえば、マウスをマップ内に移動すると、カルーセルが停止し、選択した都市のみがハイライト表示されます。

    方法:{
        マイチャートを設定する() {
            ...
            this.mapActive();
            ...
        },
        マウスイベント() {
            // マウスが入る this.charts.on('mouseover', () => {
                // タイマーを停止し、前のハイライトをクリアします。clearInterval(this.mTime);
                this.mTime = '';
                コンソールにログ出力します。
                this.charts.dispatchAction({
                        タイプ: '軽視'、
                        シリーズインデックス: 0,
                        データインデックス: this.index
                });
            });
            // マウスアウトでリタイマーが開始します this.charts.on('mouseout', () => {
                this.mapActive();
            });
        },
      }

マウス エントリのイベントを追加したことがわかります。マウスをマップに移動すると、以前の対応するインデックスを持つ都市がクリアされます。もちろん、マウス エントリを追加するだけでは十分ではありません。この方法では、マウスを 1 回スライドすると、回転とハイライトが継続されません。タイマーを再起動するには、別のマウス終了イベントも追加する必要があります。

この時点で、シンプルなハイライトカルーセルが完成しました。具体的なソースコードをここに載せておきます。

要約する

これで、echarts マップ カルーセルのハイライトに関するこの記事は終了です。より関連性の高い echarts マップ カルーセルのハイライトについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript によるデータ視覚化: ECharts マップの作成
  • Pythonはpyechartsを使って地図データを視覚化する
  • vue+echarts で中国地図のフロー効果を実現する (詳細な手順)
  • vue+echarts+datav 大画面データ表示と中国地図の省、市、郡のドリルダウン機能の実装
  • Vue の echarts に中国地図を導入するケーススタディ
  • Javascript Echarts 空気質マップ効果の詳細な説明

<<:  Linux 時間サブシステムの時間表現例の詳細な説明

>>:  MySQL 整合性制約の例の詳細な説明

推薦する

上部の固定divは半透明効果に設定できます

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...

レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はイン...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

SQL Server データベース エラー 5123 の解決方法

なぜなら、SQL Server 2005 に基づくデータベース チュートリアルがあり、そこで使用され...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル

この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...

Linux サーバーでの MySQL インストール情報の表示

mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

centos7.2 オフラインインストール mysql5.7.18.tar.gz

ネットワークが分離されているため、MySQL は yum を使用してインストールできません。ここでは...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

Windows Server 2016 リモート デスクトップ サービスを展開するためのクイック スタート ガイド

現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...

Linux のロード vmlinux デバッグ

gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...