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+'%';
} }
}
}

链接:https://www.jianshu.com/p/aa585c304660

在echarts中自定义提示框内容的更多相关文章

  1. echarts中tooltip提示框位置控制

    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...

  2. Echarts修改提示框及自定义提示框内容

    1:首先先定义自定义的json数据 var msg = [{ 'tell':'110', 'ContentMessage':"我今天去吃大餐" },{ 'tell':'111', ...

  3. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  4. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

  5. vue2.0 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  6. vue 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  7. 使提示框居中显示&自定义提示框

    ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...

  8. 解决input中智能提示框onblur与onclick冲突的问题

    背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下 ...

  9. 活动中使用提示框(Toast)

    任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz ...

随机推荐

  1. STL中关联式容器的特性

    1.map 代码如下: /* * map_1.cpp * * Created on: 2013年8月6日 * Author: Administrator */ #include <iostrea ...

  2. .aspx(或.asp)文件与.html(.htm)文件的区别与联系

    由于都是用于描述网页文档的文件,自学asp.net起就对两者之间的关系很好奇 主要的区别在于,当用户请求页面时,它们在服务器的端的处理不同 下图解释客户端请求页面时,服务器端的处理流程: .html文 ...

  3. JAVA , TOMCAT , AXIS2 环境变量配置

    想要成功配置Java的环境变量,那肯定就要安装JDK,才能开始配置的. 安装JDK 向导进行相关参数设置.如图: 正在安装程序的相关功能,如图: 选择安装的路径,可以自定义,也可以默认路径.如图: 成 ...

  4. Transform数据权限浅析2之利用Java完成权限设置

    一:项目背景 1.1:cognos的两种建模工具 为了更好的满足客户的需求,提升报表展现的效率,一种建模工具已经不能满足报表开发和展现的需要.Cognos除了给我们提供了一种基于关系型数据库的建模工具 ...

  5. [Functional Programming] Monad

    Before we introduce what is Monad, first let's recap what is a pointed functor: A pointed functor is ...

  6. 使用Loader实时查询本地数据库用法

    在看Android的文档时,看到了这么一个东西: Loader 究竟是什么东西呢? Introduced in Android 3.0, loaders make it easy to asynchr ...

  7. MPMoviePlayerViewController 视频播放黑屏

    MPMoviePlayerViewController 视频播放黑屏 今天用视频做本地视频播放:使用 MPMoviePlayerViewController 老是出现黑屏: 结果发现是一个 很坑爹的问 ...

  8. 编写的windows程序,崩溃时产生crash dump文件的办法

    一.引言 dump文件是C++程序发生异常时,保存当时程序运行状态的文件,是调试异常程序重要的方法,所以程序崩溃时,除了日志文件,dump文件便成了我们查找错误的最后一根救命的稻草.windows程序 ...

  9. 〖Linux〗不知谁写的,很实用的Linux命令

    第一部分 . sudo 运行上一条命令 sudo !! . HTTP方式共享当前目录 python -m SimpleHTTPServer . vim保存一个root用户文件 :w !sudo tee ...

  10. 【BIRT】报表显示不全

    使用BIRT开发了一张报表,预期效果如下 但是开发完成后预览效果如下: 最后的合计竟然没有了,那么怎么处理呢 鼠标点击Layout窗口空白部分,找到布局,切换为自动布局,如下图所示: