Vue在echarts?tooltip中添加點擊事件案例詳解
更新時間：2021年11月23日 15:59:32 作者：靜水思流
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解，代碼具有一定的價值，感興趣的小伙伴可以來學習一下
需求
需要在echarts tooltip點擊學校的名稱，跳轉到詳情頁面；項目是從上海市---> 某個區(qū)----> 具體的學校（在最后一級的tooltip中綁定一個點擊事件）
?項目是用vue和echarts實現的，echarts是新版本（^5.0.2），并不能把點擊事件綁定在window上
解決方法
1、設置tooltip
enterable: true, //允許鼠標進入提示懸浮層中，triggeron:'click',//提示框觸發(fā)的條件? mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā)? 'mousemove|click'同時鼠標移動和點擊時觸發(fā)
tooltip: {
// 提示框組件
show: true, // 顯示提示框組件
trigger: "item", // 觸發(fā)類型
triggerOn: "mousemove", // 出發(fā)條件
// formatter: "名稱:<br/>坐標:{c}",
enterable: true, //允許鼠標進入提示懸浮層中
showContent: true,
triggerOn: "click", //提示框觸發(fā)的條件 mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā) 'mousemove|click'同時鼠標移動和點擊時觸發(fā)
// confine: true, //把toolTip限制在圖表的區(qū)域內
className: "areaTool",
// hideDelay: 100000, //延時消失時間
formatter: (item) => {
this.hookToolTip = item;
// 經緯度太長需要對位數進行截取顯示，保留七位小數
// 需要綁定點擊事件
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>" +
"經度" +
'<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>" +
"緯度" +
'<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>" +
"考場數" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</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>" +
"監(jiān)考教師" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"個" +
"</p>";
return tipHtml;
},
},
2、定義hookToolTip變量
在formatter中給hookToolTip賦值，添加一個id，然后通過watch去檢測dom元素，可以通過onclick去綁定事件，也可以通過addEventListerner去注冊事件
watch: {
hookToolTip: {
handler(newVal, oldVal) {
console.log(newVal, oldVal, "---------watch");
let tooltipButton = document.querySelectorAll("#btn-tooltip");
//通過onclick注冊事件 querySelectorAll獲取的元素是一個數組
if (tooltipButton.length > 0) {
tooltipButton[0].onclick = this.pointNameClick;
}
// 通過addEventListener注冊事件
for (let i = 0; i < tooltipButton.length; i++) {
tooltipButton[i].addEventListener("click", this.chartClick);
}
},
// immediate: true,
// deep: true,
},
},
3、在methods中添加方法
4、完整代碼
data(){
hookToolTip: {},
},
watch: {
hookToolTip: {
handler(newVal, oldVal) {
console.log(newVal, oldVal, "---------watch");
let tooltipButton = document.querySelectorAll("#btn-tooltip");
//通過onclick注冊事件 querySelectorAll獲取的元素是一個數組
if (tooltipButton.length > 0) {
tooltipButton[0].onclick = this.pointNameClick;
}
// 通過addEventListener注冊事件
for (let i = 0; i < tooltipButton.length; i++) {
tooltipButton[i].addEventListener("click", this.chartClick);
}
},
//并不需要進入頁面就檢查
// immediate: true,
// deep: true,
},
},
methods: {
chartClick() {
console.log(
this.hookToolTip,
"-------addEventList",
this.hookToolTip.name
);
},
},
//echarts
tooltip: {
// 提示框組件
show: true, // 顯示提示框組件
trigger: "item", // 觸發(fā)類型
triggerOn: "mousemove", // 出發(fā)條件
// formatter: "名稱:<br/>坐標:{c}",
enterable: true, //允許鼠標進入提示懸浮層中
showContent: true,
triggerOn: "click", //提示框觸發(fā)的條件 mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā) 'mousemove|click'同時鼠標移動和點擊時觸發(fā)
// confine: true, //把toolTip限制在圖表的區(qū)域內
className: "areaTool",
// hideDelay: 100000, //延時消失時間
formatter: (item) => {
this.hookToolTip = item;
console.log(item, "-----", this.hookToolTip);
// 經緯度太長需要對位數進行截取顯示，保留七位小數
// 需要綁定點擊事件
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>" +
"經度" +
'<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>" +
"緯度" +
'<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>" +
"考場數" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</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>" +
"監(jiān)考教師" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"個" +
"</p>";
return tipHtml;
},
},
到此這篇關于Vue在echarts tooltip中添加點擊事件案例詳解的文章就介紹到這了,更多相關Vue的內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
為了提升頁面加載速度,我們可以使用頁面骨架屏技術來優(yōu)化用戶感知,下面就跟隨小編一起學習一下如何在vue中實現頁面骨架屏吧2024-03-03
Vue是構建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數據綁定和靈活的組件系統，本文詳細介紹了Vue的使用安裝和相關知識，有興趣的同學可以參考借鑒2023-03-03
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
今天小編就為大家分享一篇在Vue methods中調用filters里的過濾器實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vite創(chuàng)建Vue3項目及Vue3使用jsx詳解
vite是新一代的前端構建工具,下面這篇文章主要給大家介紹了關于Vite創(chuàng)建Vue3項目以及Vue3使用jsx的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
element el-table如何實現表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則)
這篇文章主要介紹了element el-table如何實現表格動態(tài)增加/刪除/編輯表格行(帶校驗規(guī)則),本篇文章記錄el-table增加一行可編輯的數據列,進行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
基于vue3+TypeScript實現一個簡易的Calendar組件
最近在學習 react,在學習到使用 react 開發(fā) Calendar 組件的時候,突然聯想到使用 vue 進行 Calendar 功能的實現,因為目前使用的技術棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實現一個簡易的Calendar組件2024-05-05
這篇文章主要為大家詳細介紹了vue實現模態(tài)框組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
項目中用到了富文本,選來選去選擇了wangeditor,下面這篇文章主要給大家介紹了關于Vue3使用富文本框(wangeditor)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01