echart的tooltip显示不同的单位

news2024/10/6 5:58:46

效果

在这里插入图片描述

实现

在每个series中添加不同的
tooltip: {
valueFormatter: function (value) {
return value.toFixed(0) + ‘A’;
}
},

代码如下

var option = {
  // grid: {
  //           left: '-13vw',//左边距72px
  //           right: '32%',
  //           bottom: '64%',
  //           top: '16%',
  //           containLabel: false
  //         },
  backgroundColor: "white",
  title: [{
      text: '.',

      x: 15,
      y: '20',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 20,
          fontWeight: '500',
          color:"transparent",
      }
  }, {
      text: '.',
      x: "11",
      y: '5',
      textBaseline: 'middle',
      textStyle: {
          color:'#cccccc',
          fontSize: 16,
          fontWeight: '100'
      }
  }, {
      text: '最新',
      x2: 235,
      y: '10',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: '最小',
      x2: 165,
      y: '10',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: '最大',
      x2: 95,
      y: '10',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: '平均',
      x2: 20,
      y: '10',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: in_new,
      x2: 235,
      y: '26',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: in_min,
      x2: 165,
      y: '26',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: in_max,
      x2: 95,
      y: '25',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: in_avg,
      x2: 20,
      y: '25',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: out_new,
      x2: 235,
      y: '40',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: out_min,
      x2: 165,
      y: '40',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {
      text: out_max,
      x2: 95,
      y: '40',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }, {

      text: out_avg,
      x2: 20,
      y: '40',
      textBaseline: 'middle',
      textStyle: {
          fontSize: 12,
          fontWeight: '100'
      }
  }],
  legend: [{
      x2: 300,
      y: 20,
      icon: 'rect',
      itemGap: 3,
      itemWidth: 11,
      itemHeight: 11,
      orient: 'vertical',
      data: ['接收', '发送']
  }],
  grid: [{
      left: 20,
      right: 20,
      top: 80,
      bottom: 20,
      containLabel: true
  }],
  
  dataZoom: {
      type: 'inside',
      filterMode: 'filter',
      orient: 'horizontal',
      xAxisIndex: [0],
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          lineStyle: {
              color: '#57617B'
          }
      },

      
      // formatter: function (params) {
      //         //文字加单位
      //         var relVal = params[0].name;
      //         for (var i = 0, l = params.length; i < l; i++) {
      //           relVal +=
      //             "<br/>" +
      //             params[i].marker +
      //             params[i].seriesName +
      //             " : " +
      //             params[i].value +
      //             "%";
      //         }
      //         return relVal;
      //       },

  },
  xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
          lineStyle: {
              color: '#57617B'
          }
      },
      data: date
  }],
  yAxis: {
      type: 'value',
      axisTick: {
          show: false
      },
      axisLine: {
          lineStyle: {
              color: '#57617B'
          }
      },
      axisLabel: {
          formatter: '{value}',
          textStyle: {
              fontSize: 12
          }
      },
      splitLine: {
          lineStyle: {
              color: '#cccccc'
          }
      },
      
  },
  series: [{
      name: '电流',
      type: 'line',
      showSymbol: false,
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'A';
          }
        },
      lineStyle: {
          normal: {
              width: 0
          }
      },
      itemStyle: {
          normal: {
              color: 'rgba(0,0,255)'
          }
      },
      areaStyle: {
          normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,0,255, 1)'
              }, {
                  offset: 0.8,
                  color: 'rgba(0,0,255, 0.5)'
              }])
          },
      },
      data: cur
  }, {
   
      name: '电压',
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'V';
          }
        },
      type: 'line',
      showSymbol: false,
      lineStyle: {
          normal: {
              width: 0
          }
      },
      itemStyle: {
          normal: {
              color: 'rgba(0,255,0)'
          }
      },
      areaStyle: {
          normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,255,0,1)'
              }, {
                  offset: 0.8,
                  color: 'rgba(0,255,0, 0.5)'
              }])
          },
      },
      data: vol
  },
  {
      name: '电容',
      type: 'line',
      tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'Kwh';
          }
        },
      showSymbol: true,
      lineStyle: {
          normal: {
              width: 2
          }
      },
      itemStyle: {
          normal: {
              color: 'black'
          }
      },
      
      data: cap
  },
]
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1189184.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LaMa 论文复现:Resolution-robust Large Mask Inpainting with Fourier Convolutions

代码&#xff1a;GitHub - andy971022/auto-lama 论文&#xff1a;https://arxiv.org/abs/2109.07161 1 LaMa 论文简介 2 LaMa代码复现 2.1 环境部署 2.1.1 下载源码&#xff0c;创建环境&#xff0c;安装必需库 git clone https://github.com/advimman/lama cd lama con…

JAVASSMmysql面向高校校园体育用品租借管理系统94593-计算机毕业设计项目选题推荐(附源码)

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;微信小程序的面向高校校园体育用品租借管理系统被用户普遍…

Git->git简介,git的常用命令,git命令的常用理论

git简介git的常用命令git命令的常用理论 1.git简介 Git是什么&#xff1f; Git是一个开源的分布式&#xff0c;用于敏捷高效地处理任何或小或大的项目 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVSI…

在任何机器人上实施 ROS 导航堆栈的指南

文章目录 路径规划参考 路径规划 路径规划是导航的最终目标。这允许用户向机器人给出目标姿势&#xff0c;并让它在给定的环境中自主地从当前位置导航到目标位置。这是我们迄今为止所做的一切&#xff08;地图绘制和本地化&#xff09;的汇集点。ROS 导航堆栈已经为我们完成了…

教培管理系统源码 教育培训机构系统源码 教务系统源码

教培管理系统源码 教育培训机构系统源码 教务系统源码 功能介绍&#xff1a; 教务中心: 学员管理 班级管理 课表管理 教师管理 课程/收费 上课记录 家校互动: 课后作业 课后点评 成绩单 成绩档案 通知管理 营销中心&#xff1a; 活动模板 我的活动 销售中心&am…

双十一数码好物推荐,盘点那些错过等一年的好物!

双十一购物狂欢节马上到来&#xff0c;对于热爱数码产品的人来说&#xff0c;双十一无疑是一个绝佳的时机&#xff0c;因为许多知名品牌和零售商都会推出各种令人心动的数码好物促销活动。从佩戴服饰到大件智能装备&#xff0c;再到健康科技产品&#xff0c;市场上的选择多种多…

竞赛 身份证识别系统 - 图像识别 深度学习

文章目录 0 前言1 实现方法1.1 原理1.1.1 字符定位1.1.2 字符识别1.1.3 深度学习算法介绍1.1.4 模型选择 2 算法流程3 部分关键代码 4 效果展示5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计 图像识别 深度学习 身份证识别…

四川芸鹰蓬飞商务信息咨询有限公司电商服务引领潮流

在今天的数字时代&#xff0c;抖音带货已成为一种新型的、高效的营销方式。许多公司都在寻找可靠的抖音带货服务&#xff0c;以扩大其品牌影响力并增加销售额。在这方面&#xff0c;四川芸鹰蓬飞商务信息咨询有限公司以其专业的知识和经验&#xff0c;成为行业内的佼佼者。 四…

画家尹星,美术界的扫地僧

尹星 简历&#xff1a; 1944年1月25日出生于山西省阳高县&#xff0c;内蒙古师范学院艺术系美术专业&#xff0c;师从水彩之父李剑晨&#xff0c;北京京华美术学院创立者邱石冥&#xff0c;徐坚。与吴冠中&#xff0c;朱德群&#xff0c;赵无极&#xff0c;杨飞云是同门。擅长…

【EI会议征稿】JPCS独立出版-第五届新材料与清洁能源国际学术会议(ICAMCE 2024)

JPCS独立出版-第五届新材料与清洁能源国际学术会议&#xff08;ICAMCE 2024&#xff09; 2024 5th International Conference on Advanced Material and Clean Energy 第五届新材料与清洁能源国际学术会议&#xff08;ICAMCE 2024&#xff09;将于2024年2月23-25日在中国▪长沙…

采集Prestashop独立站采集Prestashop独立站

import java.net.URL 这一行导入了Java.net包中的URL类&#xff0c;这个类在处理URL链接时非常有用。 import org.jsoup.Jsoup 这一行导入了Jsoup库&#xff0c;它是一个强大的HTML和XML文档解析库&#xff0c;我们可以使用它来解析网页内容。 import org.jsoup.nodes.Docume…

安卓数据恢复工具哪个强? 10 个最佳 Android 数据恢复应用程序

如果您是 Android 用户并且已经使用您的设备一段时间&#xff0c;那么您很可能遇到过与数据相关的问题。这可能是由于软件问题导致文件被意外删除或损坏。许多人不经常备份数据&#xff0c;从而丢失了重要的文档、图像、视频文件等。最糟糕的是&#xff0c;数据丢失可能随时发生…

AI智能雷达名片平台版小程序源码系统 带完整的搭建教程

大家好啊&#xff0c;今天源码小编来给大家分享一款AI智能雷达名片平台版小程序源码系统。人工智能技术的不断发展和普及&#xff0c;越来越多的企业开始应用AI技术来提高业务效率和提升用户体验。AI智能雷达名片平台版小程序源码系统就是利用人工智能技术&#xff0c;帮助企业…

WPS的JS宏基础

一、基础知识 1、简单的第一个宏 //注意function只能全部用小写 function demo(){alert("你好!") }2、录制宏生成工资条 function 使用录制宏自动生成代码以JS宏为例()//使用相对引用 {Selection.Copy(undefined);ActiveCell.Offset(5, 0).Range("A1:M4"…

基于springboot实现福聚苑社区团购平台系统项目【项目源码】

基于springboot实现福聚苑社区团购平台系统演示 Javar技术 Java是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&…

智慧油气推动能源行业的绿色转型和可持续发展

智慧油气推动能源行业的绿色转型和可持续发展 随着技术的不断进步和创新的推动&#xff0c;智慧油气正成为引领能源行业发展的重要趋势。通过融合物联网、云计算、人工智能等先进技术&#xff0c;智慧油气实现了油气资源的高效管理和利用&#xff0c;为能源行业带来了巨大的变革…

Spring Cloud智慧工地管理平台源码,智慧工地APP源码,实现对劳务人员、施工进度、工地安全、材料设备、环境监测等方面的实时监控和管理

智慧工地管理平台源码&#xff0c;智慧工地APP源码&#xff0c; 智慧工地管理平台实现对人员管理、施工进度、安全管理、材料管理、设备管理、环境监测等方面的实时监控和管理&#xff0c;提高施工效率和质量&#xff0c;降低安全风险和环境污染。智慧工地平台支持项目级、公司…

STM32-EXTI中断

EXTI简介 EXTI&#xff08;Extern Interrupt&#xff09;外部中断 EXTI可以监测指定GPIO口的电平信号&#xff0c;当其指定的GPIO口产生电平变化时&#xff0c;EXTI将立即向NVIC发出中断申请&#xff0c;经过NVIC裁决后即可中断CPU主程序&#xff0c;使CPU执行EXTI对应的中断程…

站在创新视角理解美的集团“全球突破”

全球化&#xff0c;对于企业发展的意义毋庸赘言。 作为一家年营收3000多亿的科技集团&#xff0c;美的集团有超过四成收入来自海外市场。 可以预见的是&#xff0c;未来海外市场的重要性还会不断提升。因为国内家电市场正在从增量周期转入存量周期&#xff0c;市场增长趋稳。…

《开箱元宇宙》:认识香港麦当劳通过 The Sandbox McNuggets Land 的 Web3 成功经验

McNuggets Land 是 The Sandbox 于 2023 年发布的最受欢迎的体验之一。在本期的《开箱元宇宙》系列中&#xff0c;我们采访了香港麦当劳数位顾客体验暨合作伙伴资深总监 Kai Tsang&#xff0c;来了解这一成功案例背后的策略。 在不断发展的市场营销和品牌推广领域&#xff0c;不…