Echarts显示数据被遮挡了
设置参数:trigger: 'item',
《在echarts中自定义提示框内容》
1、期望效果
以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容。
如下图,鼠标滑过每个数据项时,
第1张是默认提示框;
第2张是处理成百分比数据后,显示当前单个数据项的提示框;
第3张是处理成百分比数据后,显示当前横坐标下多个数据项的提示框。
图1、默认提示框.jpg
图2、单项提示框.jpg
图3、多项提示框.jpg
2、实现
(本文代码只涉及配置项的部分代码)
上述图片的效果可用echarts的tooltip组件中的一个formatter方法实现,formatter支持字符串和回调函数两种配置方式(本文只描述回调函数的实现方式)。
(具体参考:http://echarts.baidu.com/option.html#tooltip.formatter)。
2.1 显示单项数据内容
(处理上图2提示框的效果)
/*** tooltip配置项示例*///用formatter回调函数显示单项数据内容
tooltip: {trigger: 'item', formatter: function(data) {return data.name + '<br/>' +data.seriesName + ':'+(data.value * 100)+'%'; //将小数转化为百分数显示}}
2.2 显示多项数据内容
(处理上图3提示框的效果)
/*** tooltip配置项示例*///用formatter回调函数显示多项数据内容
tooltip: {trigger: 'axis', formatter: function(datas) {var res = datas[0].name + '<br/>', val;for(var i = 0, length = datas.length; i < length; i++) {val = (datas[i].value*100) + '%';res += datas[i].seriesName + ':' + val + '<br/>';}return res;}}
2.3 formatter回调函数的传参
formatter回调函数的传参格式为:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
描述:
1、params:
(1)当tooltip的trigger为‘item’时,显示单项数据内容。formatter回调函数的第一个参数传入一个数据项对象;
(2)当tooltip的trigger为‘axis’时,显示多项数据内容数组。formatter回调函数的第一个参数传入当前类目下的数据项对象数组。
2、ticket:异步回调标识,无需关心,用作callback的传参。
3、callback:异步回调函数,传递ticket与填充内容的html两个参数。
当tooltip的trigger为‘item’时,在控制台中输出的单项数据示例对象为:
{$vars: ["seriesName", "name", "value"],color: "#c23531",componentSubType: "bar",componentType: "series",data: 0.6,dataIndex: 2,dataType: undefine,dname: "1月3日",seriesIndex: 0,seriesName: "iphone6",seriesType: "bar",value: 0.6}
其中,几个重要的data对象属性如下:
seriesName:系列名称
value:当前数据值
name:数据名,类目名(上述柱状图中表示当前横坐标数据名)
模拟异步返回提示框内容如下:
//用formatter回调函数模拟异步返回提示框内容
tooltip: {trigger: 'item', formatter: function(param, ticket, callback) {//用定时器模拟异步事件setTimeout(function() {var res = param.name + '<br/>' +param.seriesName + ':'+(param.value * 100)+'%';callback(ticket, res);}, 1000);return '';//内容还没返回时显示的内容}}
3、扩展-其他配置项的formatter
3.1 直角坐标轴(xAxis/yAxis)中axisLabel的formatter
显示效果为上图2-单项提示框的y轴刻度数据。
//yAxis/xAxis配置项示例——用axisLabel 的formatter回调函数处理数据格式
yAxis: {name: '销量占比',axisLabel : {formatter: function(value) {if(value == 0) {return value;}else {return value*100+'%';}}}}
Echarts显示数据被遮挡了相关推荐
- Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
- 小程序开发华为P20、voiv下Echarts图表不显示数据、坐标轴等问题
背景:小程序开发 BUG:华为P20.viov手机系统下Echarts图表不显示数据.坐标轴等问题.如下图: 解决方案:WXML中使用的ec-canvas标签加入属性force-use-old-can ...
- echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
- ECharts 饼图数据放在饼图内部显示
1.业务需求 将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值 原样式如下 2.业务实现 调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
- ECharts显示24小时时间数据的一种办法
ECharts3是一个超好用的图表库,在App中,我也让团队放弃原生组件,直接使用ECharts3. 我用ECharts主要是按天显示采集的时间序列数据,并且需要固定展示24小时的数据. 通过ECha ...
- echarts 图表不显示数据,显示了一个表情
echarts图表不显示数据,显示了一个表情 背景描述 使用echarts进行数据统计和展示,但是在使用过程中,发现图表并没有成功绘制,而是只显示了一个表情如下图 原因: 图表的div宽度太宽了,di ...
- echarts 使用案例:针对map地图中显示数据格式化
前言: 1,报表连接:http://gallery.echartsjs.com/editor.html?c=xrJZ60TVIg 2,echats 制作报表中,使用地图的展示样式,发现地图上的显示数据 ...
- Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
- ECharts统计数据以图表显示
ECharts统计数据以图表显示 1:简介 ECharts用于图表展示,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数据可视化的 ...
最新文章
- 详细故障排除步骤:针对 Azure 中到 Windows VM 的远程桌面连接问题
- mysql 数据库的导入和导出
- 密码技术--椭圆曲线算法EDCSA数字签名及Go语言应用
- 没有找到合适的方法来重写_玻璃片价格太高?你可能没有找到合适的供应商
- 春节回来了,你收获了什么?
- python ctime函数_Python中的ctime()方法使用教程
- 能用python做信号处理吗_Python中的信号处理
- Source Insight上手教程
- ImageFun 使JPG的缩略图跟原图不一样 (刷微博必备)
- 广告屏蔽大师 v5.4.521.1800
- ASA K8升级到K9
- java持久层框架分析
- BigDecimal.ROUND_的各种用法
- 涉密计算机u盘管理,涉密U盘管理规定.doc
- 神经网络翻译是什么意思,神经网络用英文怎么说
- webRTC(十三):webrtc 统计信息
- 麒麟系统安装clickhouse
- validator-tools
- 根据关键字选出excel中匹配的数据
- Python 优化 回溯下降算法
热门文章
- 宁畅g40系列服务器发布,基于第三代至强可扩展处理器,宁畅G40系列服务器正式发布...
- 红包分配:指定金额指定上下限后随机分发成若干个红包,随机抽
- Java项目服务器cpu占用过高怎么办?
- uniapp生成android并调用第三方sdk的拍照进行身份证识别
- 基于风险平价的资产配置策略
- 基于线性回归的股票预测案例
- CES Asia展华为秀肌肉,布局智能互联生态
- 即食水产消费品公司“不等食品”获千万元级A轮融资,险峰长青领投...
- java 首字母小写_Java中属性名首字母大小写问题
- FT60F011A包含1Krom+EEPROM+Flash方案