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 をよろしくお願いいたします。

以下もご興味があるかもしれません: