序文最近は会社のスーパーデータスクリーンの作業で忙しく、なかなか記事を継続的に更新する時間が取れません。 しかし、私は長い間記事の更新を止めていなかったので、私が仕事でよく使用する 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 時間サブシステムの時間表現例の詳細な説明
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...
最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はイン...
目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...
なぜなら、SQL Server 2005 に基づくデータベース チュートリアルがあり、そこで使用され...
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...
mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...
目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...
1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
ネットワークが分離されているため、MySQL は yum を使用してインストールできません。ここでは...
vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...
現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...
gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...