设置Echarts鼠标悬浮样式

在option下 tooltip内添加以下代码:

(本文在后台进行传值 也就是其中的viewstate[])

 tooltip: {
                        show: true,
                        trigger: ‘axis‘,
                        //show: true,   //default true
                        showDelay: 0,//显示延时,添加显示延时可以避免频繁切换
                        hideDelay: 50,//隐藏延时
                        transitionDuration: 0,//动画变换时长
                        backgroundColor: ‘rgba(0,0,0,0.7)‘,//背景颜色(此时为默认色)
                        borderRadius: 8,//边框圆角
                        padding: 10,    // [5, 10, 15, 20] 内边距
                        position: function (p) {
                            // 位置回调
                            // console.log && console.log(p);
                            return [p[0] + 10, p[1] - 10];
                        },
                        formatter: function (params, ticket, callback) {
                            console.log(params)
                            var res = "班级" + ‘ : ‘ + params[0].name + "班<br/>";
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += ‘<br/>‘ + params[i].seriesName + ‘ : ‘ + params[i].value + "<%=ViewState["unit"]%>";//鼠标悬浮显示的字符串内容
                            }
                            setTimeout(function () {
                                // 仅为了模拟异步回调
                                callback(ticket, res);
                            }, 1000)
                            return ‘loading...‘;
                        }
                        //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
                    },

如图所示: 

 

希望对小伙伴们有帮助!0.0

PS:使柱形图的每个图形显示随机色:

itemStyle: { normal: {color:function (value){return \"#\"+(\"00000\"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); }},},

  在series内添加上面代码即可。

时间: 2024-10-07 05:30:05

设置Echarts鼠标悬浮样式的相关文章

java+selenium+new——模拟鼠标悬浮操作——action类

package rjcs; import java.util.*; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; import org.openqa.selenium.support.ui.Select; public class xinkaishi { public

用JS去设置HTML页面鼠标悬浮时改变背景图片

首先将每一个li上面添加一个移入事件onmouseover;在悬浮事件里面设置event事件源 JS样式里首先应该找到页面里的ul 然后在ul里面的所有li var ln = bg.querySelectorAll("li"); 在移入函数中获取触发事件元素    var leg = e.target;//获得触发事件元素   target 事件属性可返回事件的目标节点(触发该事件的节点), 在循环里面初始化背景图片 设置鼠标悬浮时背景图片 event事件源触发了鼠标悬浮事件 如果在初

html超链接字体样式(鼠标悬浮、点击)

定义链接样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover :active 因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下: a:link,定义正常链接的样式: a:visited,定义已访问过链接的样式: a:hover,定义鼠标悬浮在链接上时的样

(转)OL2中设置鼠标的样式

http://blog.csdn.net/gisshixisheng/article/details/49496289 概述: 在OL2中,鼠标默认是箭头,地图移动时,鼠标样式是移动样式:很多时候,为了形象起见,我们总是希望鼠标在地图上的时候和移动地图的时候鼠标的样式不是默认的效果,本文讲述如何实现这样的效果. 实现方式: 通过下面的代码实现修改鼠标样式. map.layerContainerDiv.style.cursor = ("url(img/openhand.cur),default&q

鼠标悬浮于链接之上出现文字说明效果

鼠标悬浮于链接之上出现文字说明效果:对于超链接<a>标签,有一个title属性,当鼠标表悬浮于链接之上时候,就会显示title的属性值,虽然在一定程度上满足了我们的需要,但是美观度却似差强人意,同时无法修改它的样式,下面就来介绍一下如何利用jquery模拟实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

CSS实现的鼠标悬浮整行背景变色代码

CSS实现的鼠标悬浮整行背景变色代码:在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

unity下替换鼠标显示样式

1.在某些游戏下,经常会隐藏鼠标,或者有绚丽的动画来代替鼠标显示. 2.其实,实现很简单,就是将鼠标隐藏起来,设置一个sprite的坐标为鼠标坐标即可.当然代码要放到 Update里才行. 3.注意事项:此脚本不能挂在Camera上,否则会出现鼠标闪烁的情况. public dfGUICamera Camera; public dfSlicedSprite sprite; public float value = 0f; void Update() { //隐藏鼠标 Screen.showCur

ArcGIS api fo silverlight学习三(利用ElementLayer实现鼠标悬浮弹出自定义窗体)

接着上一节继续学习,本节主要是利用ElementLayer实现鼠标悬浮弹出自定义窗体 参考博文:http://www.cnblogs.com/luxiaoxun/p/3322218.html 一.新建silverlight用户控件 自定义窗体,可以放置很多控件,命名为MyMapTip.xaml,代码为: <Grid x:Name="LayoutRoot" Width="400" Height="100" Background="T

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://