序文最近は会社のスーパーデータスクリーンの作業で忙しく、なかなか記事を継続的に更新する時間が取れません。 しかし、私は長い間記事の更新を止めていなかったので、私が仕事でよく使用する 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux 時間サブシステムの時間表現例の詳細な説明
目的: Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...
1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...
目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...
序文Docker イメージは Dockerfile といくつかの必要な依存関係で構成され、Docke...
最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...
vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...
この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...
MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...
目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...
2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...
目次序文オプション1:オプション2:オプション3:オプション4(最終的に採用されたオプション):要約...
数日前、私のウェブサイトがいくつかの IP アドレスから大量の悪意のある標的型スキャンを受け、ブルー...
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...
docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...