官方一般都是:

而我们通常是需要显示额外内容的,比如这样

其中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)显示额外内容的更多相关文章

  1. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  2. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. ECharts图表tooltip显示时超出canvas图层解决方法

    我们在做ECharts图表的时候可能会遇到tooltip显示时超出了canvas图层范围,并且被其它z-index较高的div容器遮盖,这是悬浮展示信息就看不全,我们根据官网文档的配置项查询发现con ...

  4. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

  5. echarts中提示框的样式调整

    第一种方法:利用tooltip 里面的配置项 默认就会有写显示 第二种方法:利用formattet回调函数 返回我们想要显示的信息 formatter : function (params) { va ...

  6. echarts画图时tooltip.formatter参数params不会更新(转载)

    echarts画图时tooltip.formatter参数params不会更新 解决方案: setOption时默认是合并, 如果要全部重新加载 要写成 setOption({},true),这样就可 ...

  7. bootstrap tooltip 显示提示信息

    参照网上文档,是这样说的, <a data-toggle="tooltip" data-placement="top" title="这是要提示 ...

  8. WPF 控件被禁用,悬浮提示不显示问题

    原文:WPF 控件被禁用,悬浮提示不显示问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/89 ...

  9. [WPF]TextTrimming截断后,ToolTip显示完整信息

    文本过长被截断后,用ToolTip显示完整信息. 文本未被截断,则不显示ToolTip. 值转换器: public class TrimmedTextBlockVisibilityConverter ...

随机推荐

  1. GridControl 使用方法篇 --- 隐藏表头、隐藏Group by Box

  2. 请找出"aaaabbcccdddd"字符串中出现最多的字母

    function getCount(str) { for(var code=32;code<128;code++){ var mych=String.fromCharCode(code); va ...

  3. .NET总结--WebService 配置与设置,发布

    发环境 OS:win10 企业版 开发工具:VS2017 IIS版本:6.0 .NET版本:4.6.1 Web Service 简介 Web Service也叫XML Web Service WebS ...

  4. python 获取文件本身的绝对路径

    tester.py: import os print (os.path.dirname(__file__)) print (os.path.abspath(__file__)) print (os.p ...

  5. xshell && xftp 下载

    链接:https://pan.baidu.com/s/1aLdgOSshytIYhArkB7tghQ 提取码:fqjb

  6. 【转】Spring线程及线程池的使用

    spring @Async 线程池使用 最近公司项目正逐渐从dubbo向springCloud转型,在本次新开发的需求中,全部使用springcloud进行,在使用时线程池,考虑使用spring封装的 ...

  7. join的用法

    var array = ['周欢', '周圆圈'] var str = array.join(' ') console.log(str) // 周欢 周圆圈 join()的括号里面的表示的是分隔符号

  8. 多catch块的代码优化

    一.多catch块的代码优化 在写代码时,多行存在不同的异常,使用try catch的话,习惯性的是有多个catch,如下所示: 注意到warning,文字描述如下: Reports identica ...

  9. bash: ip: command not found

    Centos安装 # yum install iproute2 iproute2-doc Ubuntu安装 # apt-get install iproute2 iproute2-doc

  10. 性能测试-cpu负载和cpu利用率

    概述 做压力测试的时候,我们经常会关注两个指标,CPU利用率和CPU负载 Linux中,进程分为三种状态: 阻塞的进程blocked process 可运行的进程runnable process 正在 ...