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 整合性制約の例の詳細な説明

推薦する

Linuxプロセス監視と自動再起動の簡単な実装方法

目的: Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...

CentOS 7 での mysql 5.7 のインストール チュートリアル

1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...

Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...

Docker コマンドラインの完全ガイド (知っておくべき 18 のこと)

序文Docker イメージは Dockerfile といくつかの必要な依存関係で構成され、Docke...

Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト

最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...

CSS の vertical-align プロパティとベースラインの問題に関する深い理解

vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

MySql ファジークエリ JSON キーワード取得ソリューションの例

目次序文オプション1:オプション2:オプション3:オプション4(最終的に採用されたオプション):要約...

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...