Vue在echarts tooltip中新增點選事件案例詳解
阿新 • • 發佈：2021-11-24
目錄
- 需求
- 解決方法
- 1、設定tooltip
- 2、定義hookToolTip變數
- 3、在methods中新增方法
- 4、完整程式碼
需求
需要在echarts tooltip點選學校的名稱，跳轉到詳情頁面；專案是從上海市---> 某個區----> 具體的學校（在最後一級的tooltip中繫結一個點選事件）
專案是用和echarts實現的，echarts是新版本（^5.0.2），並不能把點選事件繫結在window上
解決方法
1、設定tooltip
enterable: true,//允許滑鼠進入提示懸浮層中，triggeron:'click',//提示框觸發的條件 mousemove滑鼠移動時觸發 click滑鼠點選時觸發 'mousemove|click'同時滑鼠移動和點選時觸發
tooltip: {
// 提示框元件
show: true,// 顯示提示框元件
trigger: "item",// 觸發型別
triggerOn: "mousemove",// 出發條件
// formatter: "名稱:{b}<br/>座標:{c}",enterable: true,//允許滑鼠進入提示懸浮層中
showContent: true,triggerOn: "click",//提示框觸發的條件 mousemove滑鼠移動時觸發 click滑鼠點選時觸發 'mousemove|click'同時滑鼠移動和點選時觸發
// confine: true,//把toolTip限制在圖表的區域內
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,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>" +
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,//並不需要進入頁面就檢查
// immediate: true,methods: {
chartClick() {
console.log(
this.hookToolTip,"-------addEventList",this.hookToolTip.name
);
},//echarts
tooltip: {
// 提示框元件
show: true,enterable: true,//延時消失時間
formatter: (item) => {
this.hookToolTip = item;
console.log(item,"-----",this.hookToolTip);
// 經緯度太長需要對位數進行擷取顯示，保留七位小數
// 需要繫結點選事件
var tipHtml = "";
tipHtml =
'<div style="width:2.5rem;height:80%;background:rgba(22,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-siziAqhnpPAte: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;he客棧ight: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>" +
"監考教師" +
'<span style="color:#11ee7d;margin:0 0.075rem;">' +
item.componentIndex +
"</span>" +
"個" +
"</p>";
return tipHtml;
},
到此這篇關於Vue在echarts tooltip中www.cppcns.com新增點選事件案例詳解的文章就介紹到這了,更多相關Vue的內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！