ECharts 3 如何触发图表的tooltip行为?

echart3的动态趋势图,定时5秒一刷新,如何让它在初始时显示第0条记录的信息,手动触发tooltip事件呢?
着急使用,各位大神帮帮忙。

dabocaiqq
请你们大家多多姿瓷我菠菜菌 这个问题问得妙!
大约 2 个月之前 回复

1个回答

在 ECharts 3 里改为通过调用 myChart.dispatchAction({ type: ” }) 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。

查看官方API的action目录下,有tooltip动作的说明指定在相对容器的位置处显示提示框,如果指定的位置无法显示则无效。

展开tooltip:

dispatchAction({
type: 'showTip',
// 屏幕上的 x 坐标
x: number,
// 屏幕上的 y 坐标
y: number,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: Array.|string|Function
})
1234567891011

隐藏tooltip:

dispatchAction({
type: 'hideTip'
})

dabocaiqq
请你们大家多多姿瓷我菠菜菌 回复支付宝加好友偷能量挖: 大神最近怎么不来了。我有好多问题等你回答了才能采纳。
大约 2 个月之前 回复
caozhy
贵阳老马马善福专门编写代码的老马就是我! 回复showbo: 做生意没事,关键要统一好价格,别坏了行市!哈哈
11 个月之前 回复
showbo
支付宝加好友偷能量挖 回复wojiushiwo945you: 小子。。嘿嘿,做生意了
11 个月之前 回复
wojiushiwo945you
毕小宝 可以啦,echart3高手啊,多谢!
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Echarts 图表tooltip的自动播放
// 写一个函数,参数为chart图表的ref参数, 自动播放的间隔时间time // 注意chart的option配置项series 要写成数据的形式,如果为对象 修改函数里面series的判断 autoPlayToopTip (chartRef, time = 1500) { let dataIndex = -1 let dataLen = 0 ...
Echarts图表中的tooltip无法显示
实验环境Echarts 3.5.3问题引入一个Echarts标准饼图以后,图表可以正常显示,而tooltip无法显示,┑( ̄Д  ̄)┍ 一下子感觉low了好多,页面就像死掉了一样就像这样,鼠标放在上面却没显示tooltip。。。上代码:<div class="col-lg-6"> <div class="content-panel">
利用Echarts图表的tooltip在做一个图表
小编最近遇到一个需求,需要在折线图上在做一个图表,如下图: 这是已经做好的demo。http://gallery.echartsjs.com/editor.html?c=xry_8tQjib&v=1 先说说思路,利用折线图表的tooltip.formatter 看下面代码 tooltip: { padding: 3, backgroundColor: '#2
echarts 多个series图表的tooltip自定义
在使用echarts制作数据图表时,由于一张图表中包含多个series并且是多种类型数据(折线图,散点图,自定义图等),最初所有数据都是在各自的series.tooltip中定义提示信息,这种情况下默认tooltip的触发方式是‘item’的方式,但是折线图在这种方式下的使用就很蛋疼了,必须要点中数据点,提示才会出来,但是数据点又比较小,很难点中,用户反馈很不好用;     为了用户体验更好,只
【echarts】echarts图表自适应屏幕
                                                echarts图表自适应屏幕   echarts如何自适应屏幕?只要加上两句话就可以啦!    // 基于准备好的dom,初始化echarts图表 var ch_credit_in_major =echarts.init(document.getElementById('ch_lack_cr...
echarts 图表
NULL 博文链接:https://zw7534313.iteye.com/blog/2422593
echarts的tooltip显示百分号
需求:想要tooltip显示百分数,并要有颜色提示。 按官方文档,tooltip可以通过表达式设置百分号, formatter: '{b0}&lt;br /&gt; {a0}:{c0}&lt;br /&gt;{a1}: {c1}%' 效果是这样的: 可以看到,有一个问题,这样设置的提示信息,就没有数据的颜色提示了。 一番折腾后,得到了我想要的效果: 思路: 1、修改too...
Echarts折线图修改tooltip
我之前发的帖子:https://bbs.csdn.net/topics/392562074rn现在鼠标移动到曲线上只提示该点的数值,怎么显示成“09:00 2.506”(前面是横坐标的时间值,后面是该时间对应的数值)?rn气泡的背景颜色Echarts缺省的tooltip背景色(或黑色,透明度0.6)。rnrn非常感谢!!!
echarts 图形的tooltip
echarts的图形的tooltip 怎样可以设置为 当鼠标移动到tooltip上时,tooltip不消失,当鼠标移出tooltip消失, 请大神赐教。。
ECharts 自定义动态tooltip
运行:http://echarts.baidu.com/demo.html
echarts tooltip坐标轴指示器
echarts tooltip坐标轴指示器在时间型X轴中为什么是平行于X轴的,能垂直于X轴吗?
echarts地图tooltip自动轮播
echarts的tooltip按数据轮播 核心代码 var mycharts = echarts.init(this.$refs.echartsMap); var option ={}; mycharts.setOption(option); var index = 0; //播放所在下标 this.mTime = setInterval(function() { ...
echarts tooltip 轮播
echarts-tooltip 轮播 很不错的,图标轮播,具体样式还是可以的
echarts 的tooltip无法显示
this.axiosrn .post("ap", )rn .then(res => rn if (res.data.success) rn this.labelShow3 = true;rn this.flowTare = [];rn this.flowTare.push(rn toDecimal2(rn res.data.data[0].res_pool_no_used +rn res.data.data[0].res_pool_usedrn )rn );rn this.flowTare.push(toDecimal2(res.data.data[0].res_pool_used));rn this.flowTare.push(this.cucMonthFlow);rn this.flowTare.push(this.cucDayFlow);rnrn costPies.setOption(rn title: rn text: "联通流量池扣除量(GB)",rn x: "center"rn ,rn tooltip: rn axisPointer: rn // 坐标轴指示器,坐标轴触发有效rn type: "line" // 默认为直线,可选为:'line' | 'shadow'rn rn ,rn grid: rn containLabel: truern ,rn color: function(params) rn let colorList = [rn "#fe8463",rn "#9bca63",rn "#fad860",rn "#60c0dd"rn ];rn return colorList[params.dataIndex];rn ,rn yAxis: [rn rn type: "value",rn name: "(GB)"rn rn ],rn xAxis: [rn rn type: "category",rn data: ["A", "B", "C", "D"]rn rn ],rn series: [rn rn name: "扣除量",rn type: "bar",rn data: this.flowTare,rn label: rn normal: rn show: true,rn position: "top",rn color: "#000"rn rn rn rn ]rn );rn rn );
分享几个用Echarts做的图表3
3.类迁徙图 公民系统——公民大数据 数据采集 提供单位 17家 提供类别 79类
右键菜单的单击行为如何触发
在列表框中创建了弹出右键菜单的功能,并使用classwizard创建了对应菜单项的消息映射函数,但无法触发,请问是什么原因呢?
echarts图表tooltip浮动框显示单位——散点图
项目中要求在图表的浮动提示窗上显示相对应的单位如图: 方法有二,如下: 方法1: 利用自定义提示框进行拼接: 但是这样的话根据后台返回的数据格式的不同进行处理,在tooltip的formatter中进行拼接即可,注意这样的话要考虑的情况比较多。 方法2(如果和后台商量好可以要求返回值的格式的话就很简单了): 引入echarts的js后,设置: var myChart = echa...
tooltip的触发问题。
[code=C/C++]rnrnBOOL CTestDlg::PreTranslateMessage(MSG* pMsg) rnrn rn // TODO: Add your specialized code here and/or call the base classrn if ( pMsg-> message==WM_KEYDOWN&&pMsg-> wParam==87)rn rn if( GetFocus() == GetDlgItem(IDC_EDIT2))rn // AfxMessageBox("w字符不能输入");rn rnrn //m_tt.RelayEvent(pMsg);怎么去调用tooltip的显示rn rn //检测到特殊字符直接返回rn return TRUE;rn rnrn return CDialog::PreTranslateMessage(pMsg);rnrnrnBOOL CTestDlg::OnInitDialog()rnrn CDialog::OnInitDialog();rn EnableToolTips(TRUE);rn m_tt.Create(this);rn m_tt.Activate(TRUE);rn rn CWnd* pW=GetDlgItem(IDC_EDIT2);//得到窗口指针rn m_tt.AddTool(pW,"w字符不能输入");//添加rn m_tt.SetTipTextColor(RGB(0,0,255));rn m_tt.SetDelayTime(500);rn // m_tt.SetToolInfo(TTF_SUBCLASS );rn UpdateData(TRUE);rn rn // TODO: Add extra initialization herern rn return TRUE; // return TRUE unlern}rn[/code]rnrn本人想在edit控件中检测到特殊字符,只要一检测到那个特殊字符,想弹出tooltip的提示信息。rn但是tooltip好像是响应鼠标消息的。大家有什么好的办法?是否添加自定义消息改写tooltip?rn或者大家有其他的什么思路?rn
Echarts数据可视化action图表行为的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解6大公共组件详解(点击进入): title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解(点击进入): 地理坐标系geo详解、grid直角坐标系(xAxis、yAxis)详解、parallel平行
echarts图 自定义tooltip的样式
echarts图 自定义tooltip的样式 当碰到的需求需要在tooltip里面展示不同的内容的时候,比如在红色的区域显示的内容,和不在红色的区域显示又是不一样的内容。如下图: 怎么做的呢? 通过规则rules(规则根据需求来定),横纵坐标的值来自定义当前折线图上面点的提示框的内容 const {rules} = this.state; tooltip: { tri...
echarts中tooltip的抖动问题
echarts2.0出现的tootlip的位置问题echart2.0中凡是有tootlip的位置都出现你将鼠标放置图片的右侧的时候,tooltip由于是从右侧飘出,所以会出现一定的抖动。如图: 解决此问题的办法是调整此处的tooltip的位置,在你的echarts2.0中程序中修改position:tooltip : { trigger: 'item',
echarts设置tooltip的宽高问题
ECharts容器: 1,ECharts容器设置宽度width,值可以是百分比或者是像素,当设置为百分比时,要检查父元素是否设置了宽度。注意:容器宽度设置不要用min-width,不然会发现tooltip的宽度等于min-width设置的宽度; 2,ECharts容器设置宽度height,值可以是百分比或者是像素,当设置为百分比时,要检查父元素是否设置了高度。注意:容器高度设置不要用min-hei...
Echarts采坑日记之tooltip
formatter当默认的tooltip无法满足需求的时候,我们就会编写formatter函数。但是这样就会出现一个问题,每个类目名前的图标就会没有了,只剩光突突的文字。网上搜索解决办法无果,只能霸王硬上弓了:tooltip: { ... formatter: function (params) { var relVal = params[0].name;
echarts的axisLabel添加tooltip功能
echarts插件默认不支持axisLabel的tooltip功能,本demo主要展示axisLabel新增tooltip后的显示效果。有不懂,可以联系我。
Echarts提示框(tooltip)位置设置
Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。 但是,当提示框位置超出图表所在区域时,就可能出现提示框显示不全的问题,如下所示:           这就需要我们去设置提示框位置 1、设置提示框位置的方法 方法一:通过数组设置提示框位置 数组第一个元素设置距离父元素左边的距离,数组第二个元素设置距离父元素上边的距离 这种方法设置的提示框位置固定不...
echarts tooltip标签内容对齐
先上图: tooltip内容获取方法:formatter : function(params) { var res = params[0].name; res += '' + params[0].seriesName + '&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;' + params[0].value; res += '' + par
echarts自定义tooltip提示框内容
echarts 是一个非常强大的图形编辑工具,对各种数据统计的图形话处理效果非常nice!由于在工作中经常会用到,在此以作总结,也算一种积累。 本文主要是对echarts的tooltip提示功能的一个总结。 tooltip的一些常用属性: (1)提示内容对其方式:textStyle。textStyle:{ align:'left' }, tooltip的align的值可以有“cente
echarts自定义tooltip绘制轨迹
之前用过一阵子echarts做APP上的趋势图,修改过源码实现一些自定义效果。以及设置一些echarts-m.js的隐藏setting,在此Mark一下,防止忘记。 1. 自定义tooltip绘制轨迹。     echarts提供的tooltip,在绘制直线时,只提供了实线,虚线,阴影线。如果要在直线的基础上,增加一些功能,比如线要超出图的边界(如果用formatter事件注入,会有延迟效果)
echarts tooltip信息添加单位
在tootip中添加formatter格式化数据,formatter支持字符串模板和回调函数两种形式: tooltip : { trigger: 'axis', formatter:function(params) { var relVal = params[0].name; fo
Echarts数据可视化tooltip提示框,开发全解+完美注释
tooltip ={ //提示框组件 trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mous
Echarts:折现图表案例
第一步:引入相应的js文件  &amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/jqcloud-1.0.4.js&quot;&amp;gt;&amp;lt;/script&amp;gt;   &amp;lt;script language=&quot;javascript&quot; src=&quot;js/jquery-1.8.2.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;   &am
highcharts和echarts图表的异同
highcharts和echarts图表的异同
echarts图表制作
一般的图表(除地图)可看文档,按照文档制作即可:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 地图: 地图的制作需要先引入相应地图的js文件,或json文件,地图下载地址:http://echarts.baidu.com/download-map.htm
echarts图表的使用
一、介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,
echarts生成图表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Do
离线世界地图Echarts图表
Echars的离线世界地图图表。从里边摘取的片段。实现点击国家弹出国家名称。可以自己修改。如果有其他需要大家可以在研究下ECharts的其他功能。
第一个ECharts图表
ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上。 1.ECharts官网 http://echarts.baidu.com/index.html 通过”实例“...
Echarts 图表高度调整
如下图,两个图表的高度不一致,怎么调整嗯?? 问题:   解决:         //直角坐标系内绘图网格                                          grid : {                         left : '3%',   //组件离容器左侧的距离                         right : '4...
Echarts创建动态图表
   偶然的机会,发现echarts可以制作比较精美的图表,进而小小学习了一下,也算知道了一些基本的常识,现与大家进行分享。         ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生...
echarts图表大小自适应
1.还是我上一篇echarts简单使用的例子: 如果是随windows的width和height自适应的话,如下: var echartsWarp= document.getElementById('echartsWarp'); var resizeWorldMapContainer = function () {//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 e
相关热词 c# login 居中 c# 考试软件 c# 自然语言分析 c# 分段读取文件 c# 泛型反射 c#打断点 c# 时间转多少秒 c# 线程函数加参数 c# modbus 读取 c#查询集合表