1. 程式人生 > 其它 >echarts控制滑鼠懸浮的提示資訊

echarts控制滑鼠懸浮的提示資訊

 

 

如圖所示
tooltip: { show:
true, trigger: "axis", formatter: (params, ticket, callback)=> { var htmlStr = ""; for (var i = 0; i < params.length; i++) { var param = params[i]; var xName = param.name; //x軸的名稱 var
seriesName = param.seriesName; //圖例名稱 var value = param.value; //y軸值 var color = param.color; //圖例顏色 // console.log('param',param) if (i === 0) { htmlStr += this.timeStr+'-'+(xName>9?xName:'0'+xName) + "<br/>"; //x軸的名稱 } htmlStr
+= "<div>"; // 具體顯示的資料【欄位名稱:seriesName,值:value】 // 這裡判斷一下name,如果是我們需要特殊處理的,就處理 if (seriesName === "額外資訊") { // 前面一條線,後面一條線【具體樣式自己寫】 htmlStr += '<div style="border: 1px solid #FFEB3B"></div>'; htmlStr
+= "XXXXX:" + value; htmlStr += '<div style="border: 1px solid #FFEB3B"></div>'; } else { // 正常顯示的資料,走預設 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'; htmlStr +=this.tabTittle[this.activeTabIndex]+':'+ value[1]; } htmlStr += "</div>"; } return htmlStr; }, },