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

               }
           }
         }

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

原文地址:https://www.cnblogs.com/nizuimeiabc1/p/8525170.html

时间: 2024-10-13 13:04:02

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

echarts中tooltip提示框位置控制

option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis', position: function(point, params, dom, rect, size){ //其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小 var x = point[0];// var y = point[1]; var viewWidth = size.v

Android自定义提示框

在开发中,如果感觉系统自带的提示框不好看,开发者可以自己定义提示框的样式,主要是继承Dialog 程序目录结构 关键代码 package com.dzt.custom.dialog; import android.app.Dialog; import android.content.Context; import android.content.res.Resources; import android.util.DisplayMetrics; import android.view.Gravi

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

1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, // 存储toast vm loadNode = null; // 存储loading节点元素 Toast.install = func

自定义提示框

思路 利用VA_LIST可变参数,自定义欲提醒信息. 1 // 信息提示框 2 void CDECL AlertBox(TCHAR *Format, ...) 3 { 4 TCHAR buf[1024]; 5 va_list pArglist; 6 va_start(pArglist, Format); 7 _vsntprintf_s(buf, sizeof(buf)/sizeof(TCHAR), Format, pArglist); 8 va_end(pArglist); 9 MessageB

Ubuntu12.04中eclipse提示框黑色背景色修改

eclipse提示框的背景颜色使用的是系统的提示框颜色配置,在windows下为黄色,但在Ubuntu12.04(gnome)下却 是黑色,造成提示内容很难看清. 在eclipse中我们是无法修改这个颜色的配置的,只能通过修改系统的颜色配置.在ubuntu11.10以前,我们是 可以能过自定义系统外观来修改这一颜色的配置的,但自ubuntu11.10以后,就没有相关的操作界面了,只能通过修改配置文件的方式实现了.这个文件 位于/usr/share/themes/下对应的主题文件夹下,如你使用Ra

活动中使用提示框(Toast)

任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz03.com/share/s/2cABOq0BC4HP2LGV_j2dj_pL2PmFkt3XSkVX2GjSRG3a9rRL 2.定义一个Toast的触发点,可以让按键点击的时候弹出这个Toast protectedvoid onCreate(Bundle savedInstanceState){

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

背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下所示: 分析:点击用onclick事件触发获取的值,然后点击外框用失去焦点的方式解决 但实际出现效果是: 如果添加了失去焦点的方法,点击提示文本的时候,文字也会因为输入框失去焦点而被隐藏,以至于文字无法被选中上去: 问题出现时用方法如下: //oA是智能提示框的列表中的单个文字 oA.onclick

iOS 自定义提示框

之前因为项目需要做了一个自定义的提示框,从底部弹出 gitoschina地址: https://git.oschina.net/deney/ios-ZLActionView.git

html自定义提示框

自定义html提示框比较令人困惑的就是编写三角形的样式:以前的实现方式是在标签内使用span标签来实现.不过现在有了css提供的两个为类:before,:after之后,可以不用再内置span标签了: 下面是本人的一个简单例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>提示框的三角形原理</title> <style type=&