echarts 字符串模板和formatter的使用(鼠标悬浮显示的气泡自定义)

news2024/12/24 8:35:41

需求:在鼠标悬浮中加一个总数字段,图1为默认,图2为需要实现的效果
在这里插入图片描述
有两种方式,第一种:在图表添加一条新的图形,默认会自动添加
在这里插入图片描述
需要在整个数据列表中计算出来成为新的数组

 methods: {
    // 根据自己的业务情况修改
    setData () {
      for (let i = 0; i < this.cdata.barData.length -1; i++) {
        let rate = this.cdata.barData[i] + this.cdata.lineData[i];
        this.cdata.rateData.push(rate.toFixed(2));
      }
    },
  }
data () {
    return {
      cdata: {
        category: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        lineData: [
          18092,
          20728,
          24045,
          28348,
          32808,
          36097,
          39867,
          44715,
          48444,
          50415,
          56061,
          62677
        ],
        barData: [
          4600,
          5000,
          5500,
          6500,
          7500,
          8500,
          9900,
          12500,
          14000,
          21500,
          23200,
          24450
        ],
        rateData: []
      }
    };
  },

在series中添加总数一列

{
              name: "总数",
              type: "line",
              barGap: "-100%",
              barWidth: 0,
              z: -2,
              data: newData.rateData
            }

第二种方式:使用formatter,在不添加新的图形的情况下,效果图如下:(注释掉的部分为字符串模板,释放掉注释可看)
在这里插入图片描述

tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            },
            // formatter:'{b}: <br/> {a0} :{c} ({c2}%)' //字符串模板{a}{a0}{a1}....=数据名(定位通信)  {b0}{b1}....=列名(一月二月) {c0}..=数据值
            
            formatter:(params)=>{
              console.log(params)
              let list=[]
              let listItem=''
              let sum
              sum=params[0].value+params[1].value
              for (let i = 0; i < params.length; i++) {
                list.push(
                '<span style="display:inline-block;">' +
                 params[i].seriesName +
                 '</span>&nbsp&nbsp:' +
                 params[i].value 
                )  
              }
              listItem=list.join('<br>')
              return params[0].name+'<div class="showBox">' + listItem + '</div>'+'<div class="showBox">总数&nbsp&nbsp:' + sum + '</div>'
            }
          },

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

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

相关文章

SpringBoot源码分析(4)--Environment(下)/配置文件加载原理

SpringBoot源码分析 SpringBoot源码分析(1)–SpringBootApplication注解使用和原理/SpringBoot的自动配置原理详解SpringBoot源码分析(2)–SpringBoot启动源码(万字图文源码debug讲解springboot启动原理)SpringBoot源码分析(3)–Environment简介/prepareEnvironment准备环境&a…

UNet训练自己的数据集

pycharm中python环境设置&#xff1a; 打开左上角File ---> Settings ---> 如下图 ---> Add 选择合适的python版本&#xff0c;进行环境设置 UNet训练自己的数据集&#xff1a; 一、训练自己的数据集 1、本文使用VOC格式进行训练。 2、训练前将标签文件放在VOCde…

谈 Dojo 应用的 UI 自动化测试

目录 前言&#xff1a; Dojo 是什么&#xff1f; Dojo 应用 UI 自动化测试面临的挑战 A. 异步请求的处理 B. 元素定位 图 1. Dojo 按钮小部件 C. Dojo 复杂性 D. 产品复杂性 E. 频繁的 UI 更改 F. Dojo 升级 Dojo 应用 UI 自动化测试框架挑选&#xff08;设计&#…

IIS WebApi: 文件上传,大小限制,提示413 (Request Entity Too Large)

问题&#xff1a;IIS WebApi文件上传&#xff0c;大小限制&#xff0c;提示413 (Request Entity Too Large) 一&#xff1a;在web.config上配置,按照以下格式&#xff0c;将下列标红加粗的地方&#xff0c;按照对应位置复制到web.config中&#xff0c;即可解决。 注&#xff…

本质安全设备标准(IEC60079-11)的理解(五)绝对可靠器件infallible components

在前面的章节中我们简单提及到绝对可靠器件&#xff0c; 这里重新摘抄如下&#xff1a; “这里顺便说一下可靠元器件&#xff08;infallible component&#xff09;的理解。它在标准里面占有不少的章节&#xff0c;而且开始理解他也有一些费劲。本人从两个方面理解它 &#x…

工艺流程图绘制流程?试试这样绘制

工艺流程图绘制流程&#xff1f;绘制工艺流程图可以帮助我们更好地理解工艺流程&#xff0c;确定生产流程&#xff0c;优化生产效率&#xff0c;并帮助人们更好地进行生产管理和质量控制。通过工艺流程图&#xff0c;我们可以清晰地了解每一步骤所需的设备和材料&#xff0c;以…

【Java】基于云计算-智慧校园电子班牌系统源码带原生微信小程序端

一、前言 智慧校园系统是利用物联网和云计算&#xff0c;强调对教学、科研、校园生活和管理的数据采集、智能处理、为管理者和各个角色按需提供智能化的数据分析、教学、学习的智能化服务环境。它包含“智慧环境、智慧学习、智慧服务、智慧管理”等层面的内容。 智慧校园描绘的…

webpack笔记一

文章目录 什么是webpack安装webpack一、创建配置项二、安装webpack局部安装(推荐)全局安装 三、安装webpack-cli(可选) 核心概念入口(entry)出口(output)loader插件(plugin)模式(mode) 项目实例webpack基本使用 html打包插件&#xff1a;html-webpack-plugin文件拷贝插件&#…

电子版简历有哪些(合集)

word、Excel、PPT简历 传统的电子版简历&#xff0c;即用文档软件编辑的简历。这一类简历的呈现模式只有单一的文字、图片或表格。传统&#xff0c;意味着被广泛求职者所使用。优点包括有&#xff1a;传统、端庄、直观。但传统也意味着没有创新。缺点包括有&#xff1a;乏味、不…

Gradle下载和配置教程:Windows、Mac和Linux系统安装指南

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

linux入门练级篇 第三讲 基本指令3

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f…

如何使用ChatGPT制作免费的数字人

传统的数字人制作过程 制作属于自己的免费的数字人是一个复杂的过程&#xff0c;需要涉及多个方面的知识和技术。以下是一个大致的步骤指南&#xff0c;以帮助你开始这个过程&#xff1a; 1. 确定数字人的目标和设计&#xff1a;首先&#xff0c;你需要确定数字人的用途和目标…

PPT里动画连续多次移动一个元素

PPT里有移动动画, 每次只可以移动一次. 其实可以再此添加移动动画, 但是注意新添加的动画移动轨迹是从原先的位置开始的: 如果想要其连续移动, 那么可以把第二次开始的起点拖动到第一次移动的终点上去:

MSP432学习笔记14:定时器A的学习整理

本文整理学习一下定时器A的相关基础知识&#xff0c;本文比较偏向理解与理论性&#xff0c; 主要是深入在官方手册层面进行对定时器A的深入研究&#xff0c;定时器 A的相关实践基本上在之前的文章中都有提及&#xff1a; 1.定时器A定时中断&#xff1a; MSP432学习笔记7&…

导航流程:从输入URL到页面展示,这中间发生了什么?

“在浏览器里&#xff0c;从输入 URL 到页面展示&#xff0c;这中间发生了什么&#xff1f; ”这是一道经典的面试题&#xff0c;能比较全面地考察应聘者知识的掌握程度&#xff0c;其中涉及到了网络、操作系统、Web 等一系列的知识。所以我在面试应聘者时也必问这道题&#xf…

Linux学习之系统默认打开的文件描述符、重定向

系统默认打开的文件描述符 一个进程默认会打开标准输入、标准输出、错误输出三个文件描述符。可以在/proc/PID/fd里边可以看到打开文件的描述符&#xff0c;PID需要改成具体的pid&#xff0c;比如可以使用A终端输入vim proctest之后按下回车键。 打开一个vim编辑窗口。 再打…

产品经理考PMP?开什么玩笑

早上好&#xff0c;我是老原。 熟悉我的粉丝都知道&#xff0c;我平常喜欢逛知乎&#xff0c;这不就关注到了一个话题 ​ 关于这个问题&#xff0c;老原我的回答当然是&#xff0c;有用。 毕竟没有人会自信到&#xff0c;可以只做产品经理的产品设计、需求分析、画画原型等&a…

云计算行业岗位介绍

云计算、大数据、人工智能作为新一代信息技术产业&#xff0c;未来发展前景不可估量&#xff0c;就业“前途”一片光明。 随着阿里云、腾讯云、华为云为首的国内云厂商的快速发展&#xff0c;释放出来的岗位也越来越多&#xff0c;很多有着“大厂梦”的小伙伴可以通过考取大厂…

shell脚本--------shell变量、条件表达式、流程控制

第三阶段基础 时 间&#xff1a;2023年7月7日 参加人&#xff1a;全班人员 内 容&#xff1a; shell变量、条件表达式、流程控制 目录 一、shell变量 二、shell条件表达式与运算符 三、break和continue语句 演示&#xff1a;break语句 continue语句 四、实例拓展 …

error: undefined symbol: _ZN5boost6locale4util17get_system_localeB5cxx11Eb

一、背景 UOS_x86系统&#xff0c;使用cmake编译了一个c的动态库&#xff0c;然后java通过JNI调用该动态库。编译阶段没有任何报错&#xff0c;但是运行该动态库时报了如下图的错误&#xff1a; 二、分析 目测最后这一串ZN5boost6locale4util17get_system_localeB5cxx11Eb表示…