在echarts中自定义提示框内容
来源:互联网 发布:不攻自倒by焉知冷暖 编辑:程序博客网 时间:2024/05/18 17:45
以折线图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容,这就需要用到tooltip的formatter属性的回调函数,本文将从配置代码和效果两方面来展示它的使用
(柱状图的原理类似)
1、默认提示框效果一:显示当前单个数据项的提示框
配置代码:
/** * tooltip配置项示例 */ tooltip: { trigger: 'item' },效果如下图:
2、默认提示框效果二:显示当前横坐标下多个数据项的提示框
/** * tooltip配置项示例 */ tooltip: { trigger: 'axis' },效果如下图:
3、期望效果一:显示当前单个数据项的自定义提示框
/** * tooltip配置项示例 */ //用formatter回调函数显示单项数据内容 tooltip: { trigger: 'item', formatter: function (params) { var color = params.color;//图例颜色 var htmlStr ='<div>'; htmlStr += params.name + '<br/>';//x轴的名称 //为了保证和原来的效果一样,这里自己实现了一个点的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //添加一个汉字,这里你可以格式你的数字或者自定义文本内容 htmlStr += params.seriesName + ':'+params.value + '笔'; htmlStr += '</div>'; return htmlStr; } }
效果如下图:
4、期望效果二:显示当前横坐标下多个数据项的自定义提示框
/** * tooltip配置项示例 */ //用formatter回调函数显示多项数据内容 tooltip: { trigger: 'axis', formatter: function (params, ticket, callback) { var htmlStr = ''; for(var i=0;i<params.length;i++){ var param = params[i]; var xName = param.name;//x轴的名称 var seriesName = param.seriesName;//图例名称 var value = param.value;//y轴值 var color = param.color;//图例颜色 if(i===0){ htmlStr += xName + '<br/>';//x轴的名称 } htmlStr +='<div>'; //为了保证和原来的效果一样,这里自己实现了一个点的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //圆点后面显示的文本 htmlStr += seriesName + ':' + value + '笔'; htmlStr += '</div>'; } return htmlStr; } }
效果如下图:
5、当前横坐标下多个数据项的自定义提示框的全部代码
可将如下代码粘贴至ECharts官网调试环境,地址:http://www.echartsjs.com/gallery/editor.html?c=doc-example/line-stack-tiled
option = { title: { text: 'iphone销量', subtext: '纯属虚构' }, /** * tooltip配置项示例 */ //用formatter回调函数显示多项数据内容 tooltip: { trigger: 'axis', formatter: function (params, ticket, callback) { var htmlStr = ''; for(var i=0;i<params.length;i++){ var param = params[i]; var xName = param.name;//x轴的名称 var seriesName = param.seriesName;//图例名称 var value = param.value;//y轴值 var color = param.color;//图例颜色 if(i===0){ htmlStr += xName + '<br/>';//x轴的名称 } htmlStr +='<div>'; //为了保证和原来的效果一样,这里自己实现了一个点的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>'; //圆点后面显示的文本 htmlStr += seriesName + ':' + value + '笔'; htmlStr += '</div>'; } return htmlStr; } }, grid : { left: '10%',//默认10% top:100,//越大越靠下,默认60 right : '5%',//默认10% bottom : 500//默认60 }, legend: { data:['iphone6','iphone7','iphone8'] }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [{ name: 'iphone6', type: 'line', smooth: true, data: [10, 12, 21, 54, 260, 830, 710] }, { name: 'iphone7', type: 'line', smooth: true, data: [30, 182, 434, 791, 390, 30, 10] }, { name: 'iphone8', type: 'line', smooth: true, data: [1320, 1132, 601, 234, 120, 90, 20] }]};
备注:将1,2,3,4章节的配置替换掉第5章提供代码的tooltip中的内容即可运行出本文相应的截图结果。
参考:http://echarts.baidu.com/option.html#tooltip.formatter
阅读全文
0 0
- 在echarts中自定义提示框内容
- 在echarts中自定义提示框内容
- echarts自定义tooltip提示框内容
- Echarts的graph关系图的节点图片自定义及关系边上的提示框内容自定义
- ECharts折线图tooltip提示框格式自定义
- 自定义echarts图形的提示格式
- 自定义Echarts地理分布图tooltip显示内容
- Echarts的tooltip提示框中添加小点
- Flex自定义在DataGrid中搜索内容
- ECharts自定义toolbox中增加自定义按钮
- 在react中插入Echarts
- 在 webpack 中使用 ECharts
- jQueryUI tooltip 自定义提示内容
- 在文本框中提示用户输入内容格式的方法
- 在文本框中提示用户输入内容格式的…
- 在要输如内容的文本框中加提示
- 在Vue项目中使用Echarts(五): Echarts绘制地图
- ECharts官方教程(三)【在webpack中使用 ECharts】
- 【腾讯TMQ】穿山甲系列之像修复Crash一样修复卡顿
- python 字符串常用方法
- 懒人办公|30秒搞定PDF文档合并
- 代码管理svn之command
- Unity/Animator -- 创建Animator Controller
- 在echarts中自定义提示框内容
- Notepad++快捷键
- java懒加载创建实例代码详解
- android通过rosjava协议从Ros系统中获取topic列表
- Spring Boot自定义错误页面,Whitelabel Error Page处理方式
- Fast rcnn 环境配置
- Linux常用命令
- xxl-job配置以及常见错误
- spark 通过打散热点key解决数据倾斜问题