echarts formatter鼠标悬停显示信息

由于echarts中柱状图，鼠标放上去默认显示的是x轴名称以及y轴值。
而我现在需要再添加一些显示信息。
下面是操作：
在tooltip对象中补充trigger: “axis”,属性，然后再设置formatter。

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

通过网页端的debug可以初步判断params结构：
params是所有种的图信息，而不是单种图的信息。由于我的柱状图只有一根柱子，所以直接锁定params[0]。
通过params[0].dataIndex获取柱子索引。
后续还有个问题，如果直接return res。
那么显示是直接一行，我们把要显示的内容放入list中，一个list代表一行，这样可以更加美观

formatter: function (params) {// console.log(params[0].dataIndex)let list = []let listItem = ''var index = params[0].dataIndex;res = String(NowRoomQualityIndexType[index]) + '\n'+ "机房质量: " + String(NowRoomQualityIndexData[index]) + "  "+ '上行丢包率: ' + String(NowRoomUp[index]) + '%\n'+ '下行丢包率: ' + String(NowRoomDown[index]) + '%\n'+ 'rtt: ' + String(NowRoomRtt[index]) + '\n';list.push(String(NowRoomQualityIndexType[index]));list.push("机房质量: " + 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>'}

echarts formatter鼠标悬停显示信息相关推荐

vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容
首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = {tooltip: {trigger: 'it ...
去除ECharts圆环鼠标悬停时中间显示的文字
ECharts中鼠标悬浮到图形元素上时,一般会出现高亮的样式,主要是通过 emphasis 属性来自定义,series中有下述代码的时候,鼠标悬停到图形元素上时,会在图形的中间位置显示图形块对应的文字 ...
EasyUI Datagrid 鼠标悬停显示单元格内容复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容第一种方式: 1.js 定义函数<script type="text/javascript"> //格式化单元格 ...
quill鼠标悬浮出现提示_jQuery实现鼠标悬停显示提示信息窗口的方法
本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xht ...
quill鼠标悬浮出现提示_html实现鼠标悬停显示气泡文字内容
需求描述:当鼠标悬停在一个元素上的时候,显示气泡,气泡内容可以是一段文字或图片.实现如下: html> 气泡显示 .container { margin-top: 130px; } #xszti ...
鼠标悬停显示滚动条，移出不显示
鼠标悬停显示滚动条,移出不显示代码如下: <!DOCTYPE html> <html lang="en"><head><meta cha ...
Vue之鼠标悬停显示页面加载时间
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
html用title属性实现鼠标悬停显示文字
实现鼠标悬停显示文字,html中使用title属性就可实现显示文字的效果,这个属性还是比较实用的,需要的朋友可以参考下 <a href=# title="这里是显示的文字"& ...

echarts formatter鼠标悬停显示信息

echarts formatter鼠标悬停显示信息相关推荐

最新文章

热门文章