Echarts插件axisLabel增加tooltip接口
来源:互联网 发布:oppo手机解压软件 编辑:程序博客网 时间:2024/06/05 06:05
Echarts插件,默认情况下无法设置axisLabel的tooltip接口,也许是Echarts大神们觉得没必要吧,但是在实际使用过程中,这个接口还是有必要的,特别是数据量大的情况下和某些特殊场景下。
故本人参考插件其他地方的tooltip接口的设置,在axisLabel源码中,增加了tooltip接口。
具体的设置如下:在builders.axisLabel函数中新增如下内容,这段代码,主要是设置tooltip参数的,其中参数name是悬浮后显示的值。
var tooltipOpt = axisModel.get('tooltip', true); var mainType = axisModel.mainType; var formatterParams = { componentType: mainType, name: name, $vars: ['name'] }; formatterParams[mainType + 'Index'] = axisModel.componentIndex;
接着在每一个label初始化为text组件的时候,加入以下代码
var textEl = new graphic.Text({ ... silent: silent, // 沈才良添加 axisLabel 提示信息 tooltip: (tooltipOpt && tooltipOpt.show) ? zrUtil.extend({ content:rawLabels[index], formatter: function () { return rawLabels[index]; }, formatterParams: formatterParams }, tooltipOpt) : null, ...});
option配置:由于涉及到悬浮事件,故在axis的option中,silent要设置为false,triggerEvent要设置为true,在axisLabel配置处要设置{tooltip: {show: true}};如下代码所示:
xAxis : [ { type : 'category', axisTick : {show: false}, data : ['周一你是谁','周二你是谁','周三你是谁','周四你是谁','周五你是谁','周六你是谁','周日你是谁'], silent: false, triggerEvent:true, axisLabel :{ formatter: function (name) { return echarts.format.truncateText(name, 70, '14px Microsoft Yahei', '…'); }, tooltip: { show: true } } }],
注意:tooltip接口一般和axisLabel中的formatter格式化参数配置使用,经过formatter的label一般是不是原始数据,有可能是不完整。而tooltip悬浮显示的内容一般是原始数据,它的作用对于格式化的label的信息一种补充。
demo下载地址: http://download.csdn.net/download/mulumeng981/9975285
最后发一张实际效果图:红色的矩形框所示的悬浮信息就是x轴第一个label的详细信息。
阅读全文
0 0
- Echarts插件axisLabel增加tooltip接口
- Echarts 标签过长如何让axisLabel换行
- Echarts 标签过长如何让axisLabel换行
- Echarts 标签过长如何让axisLabel换行
- echarts tooltip信息添加%
- echarts之tooltip
- echarts之tooltip-trigger
- echarts之tooltip-showContent
- echarts之tooltip-position
- echarts tooltip格式化!
- ECharts 自定义动态tooltip
- echarts tooltip显示图片
- echarts之tooltip-trigger
- Echarts-axislabel文字过长导致显示不全或重叠
- Echarts-axislabel文字过长导致显示不全或重叠
- Echarts-axislabel文字过长导致显示不全或重叠
- Echarts-axislabel文字过长导致显示不全或重叠
- Echarts-axislabel文字过长导致显示不全或重叠
- kinect初学
- Android知识点整理(五)
- oracle表分区
- 《Python机器学习及实践》----监督学习经典模型
- 3089:爬楼梯(2.2基本算法之递归和自调用函数)
- Echarts插件axisLabel增加tooltip接口
- linux ubuntu16.04/centos7 配置 redis 3.0.6 并进行简单测试
- Python-OpenCv之图像基本处理-平移,缩放,旋转,翻转,裁剪及仿射变换
- Linux中的5种扫描工具简介
- chapter18形态学(开,闭运算)
- popstata或onpageshow解决微信浏览器点击返回按钮时读取缓存问题
- MVC框架显示层——Velocity技术
- Android 运行时权限
- 解决VMWare“Could not get vmci driver version:句柄无效”的错误