首页 > 其他分享 >echarts折线鼠标悬浮时只显示了一条线的数据

echarts折线鼠标悬浮时只显示了一条线的数据

时间:2024-05-09 17:13:10浏览次数:13  
标签:鼠标 悬浮 value content item params 折线 formatter echarts

项目中对悬浮的值formatter进行了唯一给值,并没有针对每一个进行赋值

问题代码大致为:

formatter: (params) => {
return `${params[0].name}  <br/> 
        ${params[0].值1}
        ${params[0].值2} :
        ${params[0].value == 0 ? "-" : Number(params[0].value).toLocaleString()}单位`;`}

处理方式:

 tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            let content = params[0].name + '<br/>';
            params.forEach(function(item) {
                content += item.值1+ ' ' + item.值2+ ' : ' + (item.value == 0 ? "-" : Number(item.value).toLocaleString()) + '单位';
            });
            return content;
        }
    },

标签:鼠标,悬浮,value,content,item,params,折线,formatter,echarts
From: https://www.cnblogs.com/hoper-development/p/18182675

相关文章

  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-45-鼠标操作-下篇
    1.简介鼠标为我们使用电脑提供了很多方便,我们看到的东西就可以将鼠标移动过去进行点击就可以打开或者访问内容,当页面内容过长时,我们也可以使用鼠标滚轮来实现对整个页面内容的查看,其实playwright也有鼠标操作的方法。上一篇文章中已经讲解过鼠标的部分操作了,今天宏哥在这里将剩下......
  • 关于vue3中使用echarts设置tooltip的type为axis不显示的问题
    因为vue3中的数据对象是用的proxy监听的,要取值需要用value等方法取出来,解决方法:使用markRaw让echarts从监听对象变成普通对象!在Vue3中,markRaw是一个用于告诉Vue的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象,并且你确定你不需要它成为响应性......
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-44-鼠标操作-上篇
    1.简介前边文章中已经讲解过鼠标的拖拽操作,今天宏哥在这里对其的其他操作进行一个详细地介绍和讲解,然后对其中的一些比较常见的、重要的操作单独拿出来进行详细的介绍和讲解。2.鼠标操作语法鼠标操作介绍官方API的文档地址:https://playwright.dev/docs/api/class-mouseMouse鼠......
  • ECharts自定义提示框浮层内容
    因为提示框内容支持字符串模板和回调函数两种形式字符串模板模板变量有{a},{b},{c},{d},{e},分别表示系列名,数据名,数据值等等,但是trigger属性为axis的时候它数据条就很多了,就可以用{a0},{a1},{a2}这样子去拿数据跟数组下标一样(官网有详细示例)示例:在`option`中的`tooltip`里边写......
  • Idea怎么使用鼠标控制字体大小?
    IDEA中设置滚轮改变字体大小方法一打开IDEA设置,Windows下的快捷键是Ctrl+Alt+S。在设置窗口中,选择“Editor”选项卡。在“Editor”选项卡下,选择“General”子选项卡。在“General”子选项卡下,找到“Mouse”部分。在“Mouse”部分下,找到“Changefontsize(Zoom)withCtrl......
  • Echarts -- 实现动态加载series
    Echarts--实现动态加载series:https://blog.csdn.net/m0_74444744/article/details/134467184?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%20series&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-1344671......
  • 2024-05-04 css实现鼠标移动至盒子,盒子在约定时间内进行放大缩小
    放大缩小css@keyframesscaleAnimation{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}完整代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset=&q......
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
    https://www.cnblogs.com/Can-daydayup/p/18166862 思维导航前言项目介绍项目源代码BlazorWasm中快速使用项目更多图表截图项目源码地址优秀项目和框架精选DotNetGuide技术社区交流群前言今天大姚给大家分享一个.NET开源(MITLicense)、功能强大、简单、灵活、跨......
  • echarts显示双y轴:折线图+柱状图
    先验知识:yAxis. positiony轴的位置。可选:'left''right'默认grid中的第一个y轴在grid的左侧('left'),第二个y轴视第一个y轴的位置放在另一侧。注:若未将 yAxis.axisLine.onZero 设为 false ,则该项无法生效series-bar. yAxisIndex number使用的 y轴的......
  • vue+echarts实现地图及飞线图
    参考:1.Echarts画区域飞线地图  https://blog.csdn.net/Daylighte/article/details/122502754?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-122502754-blog-122918939.235^v43^control&spm=1001.2101.3001.4242.2&utm_re......