Detailed explanation of adding click event in echarts tooltip in Vue

need
Workaround

1. Set tooltip
2. Define the hookToolTip variable
3. Add methods in methods
4. Complete code

need

You need to click the name of the school in the echarts tooltip to jump to the details page; the project is from Shanghai ---> a certain district ----> a specific school (bind a click event in the last level tooltip)

The project is implemented with vue and echarts. echarts is a new version (^5.0.2) and cannot bind click events to window.

Workaround

1. Set tooltip

enterable: true, //Allow the mouse to enter the prompt floating layer, triggeron:'click', //Conditions for prompt box to be triggered mousemove is triggered when the mouse moves click is triggered when the mouse clicks 'mousemove|click' is triggered when the mouse moves and clicks at the same time

tooltip: {
          //Prompt box componentshow: true, //Show prompt box componenttrigger: "item", //Trigger typetriggerOn: "mousemove", //Departure condition//formatter: "name:{b}<br/>coordinates:{c}",
          enterable: true, //Allow the mouse to enter the prompt suspension layer showContent: true,
          triggerOn: "click", //Conditions for tooltip triggering mousemove Triggered when the mouse moves click Triggered when the mouse clicks 'mousemove|click' Triggered when the mouse moves and clicks at the same time // confine: true, //Limit toolTip to the area of the chart className: "areaTool",
          // hideDelay: 100000, //delay disappearance time formatter: (item) => {
            this.hookToolTip = item;
            // The longitude and latitude are too long, so the number of digits needs to be truncated and 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: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>" +
              "Latitude" +
              '<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>" +
              "Proctor" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "pcs" +
              "</p>";

            return tipHtml;
          },
        },

2. Define the hookToolTip variable

Assign a value to hookToolTip in the formatter, add an id, and then detect the DOM element through watch. You can bind the event through onclick or register the event through addEventListerner.

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

3. Add methods in methods

4. Complete code

data(){
       hookToolTip: {},     
},

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

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

    
//echarts
      tooltip: {
          //Prompt box componentshow: true, //Show prompt box componenttrigger: "item", //Trigger typetriggerOn: "mousemove", //Departure condition//formatter: "name:{b}<br/>coordinates:{c}",
          enterable: true, //Allow the mouse to enter the prompt suspension layer showContent: true,
          triggerOn: "click", //Conditions for tooltip triggering mousemove Triggered when the mouse moves click Triggered when the mouse clicks 'mousemove|click' Triggered when the mouse moves and clicks at the same time // confine: true, //Limit toolTip to the area of the chart className: "areaTool",
          // hideDelay: 100000, //delay disappearance time formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // The longitude and latitude are too long, so the number of digits needs to be truncated and 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: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>" +
              "Latitude" +
              '<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>" +
              "Proctor" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "pcs" +
              "</p>";

            return tipHtml;
          },
        },

This is the end of this article about Vue adding a click event case in echarts tooltip. For more Vue-related content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue implements dynamic assignment of id, and click event to obtain the id operation of the currently clicked element
Detailed explanation of the difference between passing parameters and not passing parameters in Vue click events
VUE solves the problem that v-html cannot trigger click events
Vue v-for loop @click click event to get element example
Get the global click event method in the Vue component
How to get the source of click event in Vue
Vue method of reading audio files through click events
Solve the problem of invalid click event in vue binding object
Vue project introduces echarts to add click event operation
Vue uses hightcharts to customize the legend click event

<<: Example of asynchronous file upload in html

>>: 20 excellent foreign web page color matching cases sharing