Detailed explanation of adding click event in echarts tooltip in Vue

Detailed explanation of adding click event in echarts tooltip in Vue

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

Recommend

How does MySQL ensure data integrity?

The importance of data consistency and integrity ...

MySQL 5.6 binary installation process under Linux

1.1 Download the binary installation package wget...

The "3I" Standards for Successful Print Advertising

For many domestic advertisers, the creation and ev...

Detailed explanation of FTP environment configuration solution (vsftpd)

1. Install vsftpd component Installation command:...

Superficial Web Design

<br />I have always believed that Yahoo'...

A brief discussion on several ways to implement front-end JS sandbox

Table of contents Preface iframe implements sandb...

A brief introduction to web2.0 products and functions

<br />What is web2.0? Web2.0 includes those ...

How to solve the problem of zabbix monitoring causing Chinese garbled characters in the graphical interface due to PHP problems

Solve the problem of Chinese garbled characters i...

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Preface Recently, I encountered a requirement. Du...

CSS makes the child container exceed the parent element (the child container floats in the parent container)

Preface Sometimes, we need a floating effect requ...

Summary of the installation process of MySql 8.0.11 and the problems encountered when linking with Navicat

My system and software versions are as follows: S...

How to set npm to load packages from multiple package sources at the same time

Table of contents 1. Build local storage 2. Creat...

Docker Tutorial: Using Containers (Simple Example)

If you’re new to Docker, take a look at some of t...

How to enable TLS and CA authentication in Docker

Table of contents 1. Generate a certificate 2. En...

Vue's vue.$set() method source code case detailed explanation

In the process of using Vue to develop projects, ...