由于echarts中柱狀圖，鼠標(biāo)放上去默認(rèn)顯示的是x軸名稱以及y軸值。
而我現(xiàn)在需要再添加一些顯示信息。
下面是操作：
在tooltip對(duì)象中補(bǔ)充trigger: “axis”,屬性，然后再設(shè)置formatter。

tooltip : {formatter: function (params) {// do some thingreturn “名稱：” +params.name} }

通過網(wǎng)頁(yè)端的debug可以初步判斷params結(jié)構(gòu)：
params是所有種的圖信息，而不是單種圖的信息。由于我的柱狀圖只有一根柱子，所以直接鎖定params[0]。
通過params[0].dataIndex獲取柱子索引。
后續(xù)還有個(gè)問題，如果直接return res。
那么顯示是直接一行，我們把要顯示的內(nèi)容放入list中，一個(gè)list代表一行，這樣可以更加美觀

formatter: function (params) {// console.log(params[0].dataIndex)let list = []let listItem = ''var index = params[0].dataIndex;res = String(NowRoomQualityIndexType[index]) + '\n'+ "機(jī)房質(zhì)量: " + String(NowRoomQualityIndexData[index]) + " "+ '上行丟包率: ' + String(NowRoomUp[index]) + '%\n'+ '下行丟包率: ' + String(NowRoomDown[index]) + '%\n'+ 'rtt: ' + String(NowRoomRtt[index]) + '\n';list.push(String(NowRoomQualityIndexType[index]));list.push("機(jī)房質(zhì)量: " + String(NowRoomQualityIndexData[index]));list.push('上行丟包率: ' + String(NowRoomUp[index]));list.push('下行丟包率: ' + String(NowRoomDown[index]));list.push('rtt: ' + String(NowRoomRtt[index]));listItem = list.join('<br>')return '<div class="showBox">' + listItem + '</div>'}

總結(jié)

以上是生活随笔為你收集整理的echarts formatter鼠标悬停显示信息的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。