Detailed explanation of adding click event in echarts tooltip in Vue
needYou 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. Workaround1. Set tooltipenterable: 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 variableAssign 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:
|
<<: Example of asynchronous file upload in html
>>: 20 excellent foreign web page color matching cases sharing
Recommend
WeChat applet realizes multi-line text scrolling effect
This article example shares the specific code for...
CentOS configures local yum source/Alibaba Cloud yum source/163yuan source and configures the priority of yum source
1. Use Centos image to build local yum source Sin...
Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump
When the jsp that is jumped to after the struts2 a...
Write a formal blog using XHTML CSS
The full name of Blog should be Web log, which mea...
Linux uses join -a1 to merge two files
To merge the following two files, merge them toge...
Sample code for modifying the input prompt text style in html
On many websites, we have seen the input box disp...
How to use vs2019 for Linux remote development
Usually, there are two options when we develop Li...
Analyze the difference between ES5 and ES6 apply
Table of contents Overview Function signature Opt...
Mysql | Detailed explanation of fuzzy query using wildcards (like,%,_)
Wildcard categories: %Percent wildcard: indicates...
JavaScript DOMContentLoaded event case study
DOMContentLoaded Event Literally, it fires after ...
How to write memory-efficient applications with Node.js
Table of contents Preface Problem: Large file cop...
In-depth analysis of the slow query problem of MySQL Sending data
Through an example, I shared with you the solutio...
MySQL index principle and query optimization detailed explanation
Table of contents 1. Introduction 1. What is an i...
Solution to MySQL restarting automatically
Preface Recently, a problem occurred in the test ...
Implementation of Vue single file component
I recently read about vue. I found a single-file ...