Echarts 雷达图鼠标移入标签名显示悬浮框

const that = this;this.category.on("mouseover", function (params) {that.toolProportion = ""that.tool_creation_project = ""that.tool_become_project = ""switch (params.name) {case "【全部】":that.tooltitleName = "【全部】"that.toolProportion = Number(that.proportion[0] * 100).toFixed(1) + "%";that.tool_creation_project = that.creation_project[0]that.tool_become_project = that.become_project[0]break;case "【无线】":that.tooltitleName = "【无线】"that.toolProportion = Number(that.proportion[3] * 100).toFixed(1) + "%";that.tool_creation_project = that.creation_project[3]that.tool_become_project = that.become_project[3]break;case "【其他】":that.tooltitleName = "【其他】"that.toolProportion = Number(that.proportion[2] * 100).toFixed(1) + "%";that.tool_creation_project = that.creation_project[2]that.tool_become_project = that.become_project[2]break;case "【传输】":that.tooltitleName = "【传输】"that.toolProportion = Number(that.proportion[1] * 100).toFixed(1) + "%";that.tool_creation_project = that.creation_project[1]that.tool_become_project = that.become_project[1]break;default:break;}if (params.name === "【全部】" || params.name === "【无线】" || params.name === "【其他】" || params.name === "【传输】") {document.getElementById('tooltipTops').style.top = (params.event.offsetY) + "px"document.getElementById('tooltipTops').style.left = (params.event.offsetX + 15) + "px"that.isShow = trueif (params.event.offsetY > 300) {document.getElementById('tooltipTops').style.top = (params.event.offsetY - 120) + "px"document.getElementById('tooltipTops').style.left = (params.event.offsetX + 10) + "px"that.isShow = true}if (params.event.offsetX > 400) {document.getElementById('tooltipTops').style.top = (params.event.offsetY - 120) + "px"document.getElementById('tooltipTops').style.left = (params.event.offsetX - 50) + "px"that.isShow = true}}});this.category.on("mouseout", function (params) {that.isShow = false});

关键代码

Echarts 雷达图鼠标移入标签名显示悬浮框相关推荐

vue实现鼠标放上去就有提示_Vue实现鼠标经过文字显示悬浮框效果的示例代码
需求在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出butt ...
echarts雷达图鼠标悬浮显示单轴数据
雷达图效果展示雷达图默认只能展示一圈的数据,而不能展示一个轴向的数据,具体图片效果如下问题描述在雷达图的tooltip中的 formatter: function (params){}打印出pa ...
echarts漏斗图鼠标移入时内部文字阴影/描边
问题当移入时,文字会有描边,且颜色为item不高亮时的颜色.想要去除. 解决属性鼠标移入时的属性在series中的label中的emphasis属性修改. 添加textBorderWidth和t ...
echarts折线图鼠标移入页面出现抖动
解决方法: 在echarts的实例化的元素外面加一个div包裹起来,然后外层元素样式设置overflow:hidden 属性设置tooltip的 confine:true,属性 tooltip: { ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
echarts 玫瑰图比例太小显示优化
echarts 玫瑰图比例太小显示优化 1.效果图 2.实现思路 3.代码选择了 echarts 做大数据统计,但是由于统计数据的差异太大,数据特别小的时候,使用玫瑰图展示会造成看不清楚扇区的问题, ...

Echarts 雷达图鼠标移入标签名显示悬浮框

Echarts 雷达图鼠标移入标签名显示悬浮框相关推荐

最新文章

热门文章

Echarts 雷达图 鼠标移入标签名 显示悬浮框

Echarts 雷达图 鼠标移入标签名 显示悬浮框相关推荐

最新文章

热门文章

Echarts 雷达图鼠标移入标签名显示悬浮框

Echarts 雷达图鼠标移入标签名显示悬浮框相关推荐