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選共有

推薦する

JavaScript でドラッグ可能なプログレスバーを実装する

この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...

geo モジュールを使用して Nginx でホワイトリストを設定する例

元の構成: http { ...... limit_conn_zone $binary_remote...

ネイティブ JS カプセル化 vue タブ切り替え効果

この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

Zabbix ベースの Jenkins プロセス監視の詳細な説明

1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...

時間のかかるMySQLレコードのSQL例の詳細な説明

mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...

TypeScript における列挙型の理解と応用シナリオ

目次1. 何ですか2. 使用数値列挙文字列列挙異種列挙自然3. 応用シナリオ要約する1. 何ですか列...

Centos Docker ブリッジ モードでホスト Redis サービスにアクセスできないというトラブルシューティングの経験

背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...

Nginx を使用して rtmp ライブ サーバーを実行する方法

今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...

Vue は Tencent TIM インスタント メッセージングを統合します

この記事では主に、Tencent TIM インスタント メッセージングを Vue と統合する方法を紹...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

Vue の関連ページへのマルチレベルジャンプ (ページドリルダウン) 機能の完全な例

背景プロジェクト開発プロセスでは、前のページから次のページにジャンプする必要に迫られることがよくあり...

CSS 透明ボーダー背景クリップマジック

この記事では、CSSの透明な境界線の背景クリップの素晴らしい使い方を主に紹介し、みんなと共有し、自分...