Echarts的提示(Tooltip)显示额外内容
官方一般都是:
而我们通常是需要显示额外内容的,比如这样
其中Tooltip也是参考了网友的写法
option = {
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>'; // 具体显示的数据【字段名称:seriesName,值:value】
// 这里判断一下name,如果是我们需要特殊处理的,就处理
if(seriesName === '额外信息'){
// 前面一条线,后面一条线【具体样式自己写】
htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
htmlStr += 'XXXXX:' + value;
htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
}else{
// 正常显示的数据,走默认
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
htmlStr += seriesName + ':' + value + 'W';
} htmlStr += '</div>';
}
return htmlStr;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '收入',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},{
name: '额外信息',
data: ['今天赚大了', '今天赚大了', '今天赚大了', '今天赚大了', '今天赚大了', '今天赚大了', '今天赚大了'],
type: 'line'
}
]
};
测试地址,就用官方的就可以
https://www.echartsjs.com/examples/editor.html?c=line-simple
Echarts的提示(Tooltip)显示额外内容的更多相关文章
- echarts之字符云tooltip显示混乱问题的解决办法
echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...
- Echarts数据可视化tooltip提示框,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- ECharts图表tooltip显示时超出canvas图层解决方法
我们在做ECharts图表的时候可能会遇到tooltip显示时超出了canvas图层范围,并且被其它z-index较高的div容器遮盖,这是悬浮展示信息就看不全,我们根据官网文档的配置项查询发现con ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- echarts中提示框的样式调整
第一种方法:利用tooltip 里面的配置项 默认就会有写显示 第二种方法:利用formattet回调函数 返回我们想要显示的信息 formatter : function (params) { va ...
- echarts画图时tooltip.formatter参数params不会更新(转载)
echarts画图时tooltip.formatter参数params不会更新 解决方案: setOption时默认是合并, 如果要全部重新加载 要写成 setOption({},true),这样就可 ...
- bootstrap tooltip 显示提示信息
参照网上文档,是这样说的, <a data-toggle="tooltip" data-placement="top" title="这是要提示 ...
- WPF 控件被禁用,悬浮提示不显示问题
原文:WPF 控件被禁用,悬浮提示不显示问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/89 ...
- [WPF]TextTrimming截断后,ToolTip显示完整信息
文本过长被截断后,用ToolTip显示完整信息. 文本未被截断,则不显示ToolTip. 值转换器: public class TrimmedTextBlockVisibilityConverter ...
随机推荐
- GridControl 使用方法篇 --- 隐藏表头、隐藏Group by Box
- 请找出"aaaabbcccdddd"字符串中出现最多的字母
function getCount(str) { for(var code=32;code<128;code++){ var mych=String.fromCharCode(code); va ...
- .NET总结--WebService 配置与设置,发布
发环境 OS:win10 企业版 开发工具:VS2017 IIS版本:6.0 .NET版本:4.6.1 Web Service 简介 Web Service也叫XML Web Service WebS ...
- python 获取文件本身的绝对路径
tester.py: import os print (os.path.dirname(__file__)) print (os.path.abspath(__file__)) print (os.p ...
- xshell && xftp 下载
链接:https://pan.baidu.com/s/1aLdgOSshytIYhArkB7tghQ 提取码:fqjb
- 【转】Spring线程及线程池的使用
spring @Async 线程池使用 最近公司项目正逐渐从dubbo向springCloud转型,在本次新开发的需求中,全部使用springcloud进行,在使用时线程池,考虑使用spring封装的 ...
- join的用法
var array = ['周欢', '周圆圈'] var str = array.join(' ') console.log(str) // 周欢 周圆圈 join()的括号里面的表示的是分隔符号
- 多catch块的代码优化
一.多catch块的代码优化 在写代码时,多行存在不同的异常,使用try catch的话,习惯性的是有多个catch,如下所示: 注意到warning,文字描述如下: Reports identica ...
- bash: ip: command not found
Centos安装 # yum install iproute2 iproute2-doc Ubuntu安装 # apt-get install iproute2 iproute2-doc
- 性能测试-cpu负载和cpu利用率
概述 做压力测试的时候,我们经常会关注两个指标,CPU利用率和CPU负载 Linux中,进程分为三种状态: 阻塞的进程blocked process 可运行的进程runnable process 正在 ...