Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

必要

詳細ページにジャンプするには、echarts ツールチップの学校名をクリックする必要があります。プロジェクトは上海から ---> 特定の地区 ----> 特定の学校 (最後のレベルのツールチップでクリック イベントをバインド)

このプロジェクトは、vue と echarts を使用して実装されています。echarts は新しいバージョン (^5.0.2) であり、クリック イベントをウィンドウにバインドできません。

回避策

1. ツールチップを設定する

enterable: true, //マウスがプロンプトフローティングレイヤーに入ることを許可します。triggeron:'click', //プロンプトボックスがトリガーされる条件。mousemove はマウスが動くとトリガーされます。click はマウスがクリックするとトリガーされます。'mousemove|click' はマウスが動くと同時にクリックするとトリガーされます。

ツールチップ: {
          //プロンプト ボックス コンポーネントshow: true、//プロンプト ボックス コンポーネントを表示trigger: "item"、//トリガー タイプtriggerOn: "mousemove"、//出発条件//formatter: "name:{b><br/>coordinates:{c}"、
          enterable: true, //マウスがプロンプトサスペンションレイヤーに入ることを許可する showContent: true,
          triggerOn: "click", // ツールチップをトリガーする条件 mousemove マウスが動くとトリガー click マウスがクリックするとトリガー 'mousemove|click' マウスが動くと同時にクリックするとトリガー // confine: true, // ツールチップをチャートの領域に制限 className: "areaTool",
          // hideDelay: 100000, // 消失時間を遅延する formatter: (item) => {
            this.hookToolTip = アイテム;
            // 経度と緯度が長すぎるため、小数点以下 7 桁を残して桁数を切り捨てて表示する必要があります // クリック イベントをバインドする必要があります var tipHtml = "";
            ヒントHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +   
              アイテム名 +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「経度」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              項目.値[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「緯度」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              項目.値[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「診察室数」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              アイテム.コンポーネントインデックス +
              "</span>" +
              「個」+
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「プロクター」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              アイテム.コンポーネントインデックス +
              "</span>" +
              「個」+
              "</p>";

            tipHtml を返します。
          },
        },

2. hookToolTip変数を定義する

フォーマッタの hookToolTip に値を割り当て、ID を追加し、watch を通じて DOM 要素を検出します。onclick を通じてイベントをバインドするか、addEventListerner を通じてイベントを登録できます。

時計:
    フックツールチップ: {
      ハンドラ(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        tooltipButton を document.querySelectorAll("#btn-tooltip");
        //onclickイベントquerySelectorAllを登録して取得した要素は配列ですif (tooltipButton.length > 0) {
          ツールチップボタン[0].onclick = this.pointNameClick;
        }
        // addEventListener を通じてイベントを登録します for (let i = 0; i < tooltipButton.length; i++) {
          ツールチップボタン[i].addEventListener("クリック", this.chartClick);
        }
      },
      // 即時: true、
      // 深い: true、
    },
  },

3. メソッド内にメソッドを追加する

4. 完全なコード

データ(){
       フックツールチップ: {},     
},

  時計:
    フックツールチップ: {
      ハンドラ(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        tooltipButton を document.querySelectorAll("#btn-tooltip");
        //onclickイベントquerySelectorAllを登録して取得した要素は配列ですif (tooltipButton.length > 0) {
          ツールチップボタン[0].onclick = this.pointNameClick;
        }
        // addEventListener を通じてイベントを登録します for (let i = 0; i < tooltipButton.length; i++) {
          ツールチップボタン[i].addEventListener("クリック", this.chartClick);
        }
      },
      //確認するためにページに入る必要はありません//immediate: true,
      // 深い: true、
    },
  },

  メソッド: {
    チャートクリック() {
      コンソール.log(
        this.hookToolTip、
        "-------イベントリストを追加",
        this.hookToolTip.name
      );
    },
 },

    
//eチャート
      ツールチップ: {
          //プロンプト ボックス コンポーネントshow: true、//プロンプト ボックス コンポーネントを表示trigger: "item"、//トリガー タイプtriggerOn: "mousemove"、//出発条件//formatter: "name:{b><br/>coordinates:{c}"、
          enterable: true, //マウスがプロンプトサスペンションレイヤーに入ることを許可する showContent: true,
          triggerOn: "click", // ツールチップをトリガーする条件 mousemove マウスが動くとトリガー click マウスがクリックするとトリガー 'mousemove|click' マウスが動くと同時にクリックするとトリガー // confine: true, // ツールチップをチャートの領域に制限 className: "areaTool",
          // hideDelay: 100000, // 消失時間を遅延する formatter: (item) => {
            this.hookToolTip = アイテム;
            console.log(item, "-----", this.hookToolTip);
            // 経度と緯度が長すぎるため、小数点以下 7 桁を残して桁数を切り捨てて表示する必要があります // クリック イベントをバインドする必要があります var tipHtml = "";
            ヒントHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
              アイテム名 +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「経度」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              項目.値[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「緯度」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              項目.値[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「診察室数」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              アイテム.コンポーネントインデックス +
              "</span>" +
              「個」+
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              「プロクター」+
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              アイテム.コンポーネントインデックス +
              "</span>" +
              「個」+
              "</p>";

            tipHtml を返します。
          },
        },

Vue が echarts ツールチップにクリック イベント ケースを追加する方法についてはこれで終わりです。Vue 関連のコンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはIDの動的な割り当てと、現在クリックされている要素のID操作を取得するクリックイベントを実装しています。
  • Vue クリックイベントでパラメータを渡す場合と渡さない場合の違いの詳細な説明
  • VUEはv-htmlがクリックイベントをトリガーできない問題を解決します
  • Vue v-for ループ @click クリックイベントで要素を取得する例
  • Vueコンポーネントのグローバルクリックイベントメソッドを取得する
  • Vueでクリックイベントのソースを取得する方法
  • クリックイベントを通じてオーディオファイルを読み取るVueメソッド
  • Vueバインディングオブジェクト内の無効なクリックイベントの問題を解決する
  • Vue プロジェクトはクリックイベント操作を追加する echarts を導入しました
  • Vueはhightchartsを使用して凡例のクリックイベントをカスタマイズします

<<:  HTML での非同期ファイルアップロードの例

>>:  海外のウェブページのカラーマッチング事例20選共有

推薦する

ディレクトリスクロール効果を実現するネイティブJS

これはネイティブ JS で実装されたテキスト スクロール効果です。この効果は通常、ニュース、ダイナミ...

MySQL 8.0 の binlog の詳細な説明

1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

Ubuntu 19にTheanoをインストールする際の問題を解決する

解決: pythearn2 パッケージをダウンロードしたディレクトリで、setup.py ファイルを...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

MySQL 8.0 の新しいリレーショナル データベース機能の詳細な説明

序文MySQL 8.0 の最新バージョンは 8.0.4 rc であり、正式版は近日中にリリースされる...

HTML でのテキストエリアの使用と一般的な問題およびケース分析

textarea タグはよく使われる HTML タグです。主に長いテキストを入力するときに改行するた...

ショートビデオ(Douyin)の透かし除去ツールの実装コード

目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...

SQLで同じフィールドの異なる値のデータ統計を実行する

適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...

MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...