Vueがechartsのtooltipにクリックイベントを追加するケーススタディ

2022-01-13 12:23:43

要求事項

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

このプロジェクトはvueとechartsで実装されており、新しいバージョン（^5.0.2）であるため、クリックイベントをウィンドウにバインドしていない

解決方法

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

enterable: true, //マウスでチップホバーレイヤーに入ることを許可, triggeron:'click', //チップボックスがトリガーする条件マウス移動トリガークリックトリガー 'mousemove|click' マウス移動とクリックが同時に起こること

tooltip: {
          // prompt box component
          show: true, // Show the tip box component
          trigger: "item", // trigger type
          triggerOn: "mousemove", // start condition
          // formatter: "name:{b}<br/>coordinates:{c}",
          enterable: true, // allow mouse to enter in hover layer
          showContent: true,
          triggerOn: "click", // the condition that the hint box is triggered mousemove when the mouse moves click when the mouse clicks 'mousemove|click' when the mouse moves and clicks at the same time
          // confine: true, // confine toolTip to the area of the chart
          className: "areaTool",
          // hideDelay: 100000, // delay the disappearing time
          formatter: (item) => {
            this.hookToolTip = item;
            // The latitude and longitude are too long and need to intercept the display of the number of digits, keeping seven decimal places
            // need to bind the click event
            var tipHtml = "";
            tipHtml =
              '<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: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">' +   
              item.name +
              "</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>" +
              "longitude" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[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>" +
              "lat" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[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>" +
              "Number of examination rooms" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "pcs" +
              "</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>" +
              "invigilator" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "pcs" +
              "</p>";

            return tipHtml;
          },
        },

2. hookToolTip 変数の定義

フォーマッターで hookToolTip に値を割り当て、id を追加し、onclick でイベントをバインドするか、addEventListerner でイベントを登録するか、dom 要素をウォッチで検出します。

watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //register the event by onclick querySelectorAll gets the element as an array
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // Register the event via addEventListener
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      // immediate: true,
      // deep: true,
    },
  },

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

4. フルコード

data(){
       hookToolTip: {},     
},

  watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //register the event by onclick querySelectorAll gets the element as an array
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // Register the event via addEventListener
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      // It is not necessary to enter the page to check
      // immediate: true,
      // deep: true,
    },
  },

  methods: {
    chartClick() {
      console.log(
        this.hookToolTip,
        "-------addEventList",
        this.hookToolTip.name
      );
    },
 },

    
/      tooltip: {
          // prompt box component
          show: true, // Show the prompt box component
          trigger: "item", // trigger type
          triggerOn: "mousemove", // start condition
          // formatter: "name:{b}<br/>coordinates:{c}",
          enterable: true, // allow mouse to enter in hover layer
          showContent: true,
          triggerOn: "click", // the condition that the hint box is triggered mousemove when the mouse moves click when the mouse clicks 'mousemove|click' when the mouse moves and clicks at the same time
          // confine: true, // confine toolTip to the area of the chart
          className: "areaTool",
          // hideDelay: 100000, // delay the disappearing time
          formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // too long latitude and longitude need to intercept the number of digits displayed, retaining seven decimal places
            // need to bind the click event
            var tipHtml = "";
            tipHtml =
              '<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: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">' +
              item.name +
              "</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>" +
              "longitude" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[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>" +
              "lat" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[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>" +
              "Number of examination rooms" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "pcs" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +

Vueがechartsのtooltipにクリックイベントを追加するケーススタディ

要求事項

解決方法

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

2. hookToolTip 変数の定義

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

4. フルコード

関連

親子コンポーネント通信を解決する3つのVueスロット

fetch ネットワークリクエストラッパーの説明例

要素ツリー制御によるvueTreeテーブル

Vue+ElementUIによる大規模なフォームの処理例

vue3.0プロジェクトのアーキテクチャを構築するための便利なツール

vue ディレクティブ v-html と v-text

vueが定義するプライベートフィルタと基本的な使い方

vueにおけるfilterの適用シーンについて解説します。

Vueの「データを聴く」原則を解説

Vueのフォームイベントのデータバインディングの説明

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。

Vueの要素ツリーコントロールに破線を追加する説明

vue for 登録ページ効果 vue for sms 認証コードログイン

jQueryのコピーオブジェクトの説明

vueのグローバルがscss(mixin)を導入。

vueディレクティブv-bindの使用と注意点

vueの補間表現とv-textディレクティブの違いについて

VUEグローバルフィルターの概念と留意点、基本的な使い方

Vueのイベント処理とイベントモディファイアの解説

Vueのフィルタの説明