echarts自定义tooltip位置和内容

tooltip: {trigger: 'item',backgroundColor: 'none',position: function (pos, params, dom, rect, size) {//我这个是每次显示30条数据 所以这么判断var obj = params.dataIndex < 15 ? "right" : "left"return obj;},formatter: (params) => {//收入和支出是不同颜色 背景 还带个箭头var str = this.activeNum == 0 ? '收入' : '支出',bg = this.activeNum == 0 ? '#E2F8EE' : '#FFE0C9',textColor = this.activeNum == 0 ? '#00A862' : '#F29C00',//两个箭头 小于15的显示左边的 大于的显示右边的//这个字符串拼接感觉好麻烦showLeft = params.dataIndex < 15 ? "block" : "none",showRight = params.dataIndex < 15 ? "none" : "block"return '<div style="display:flex;align-items:center;justify-content:space-between;color:' + textColor + '"><div style="display:' + showLeft + '"><b style="content:\'\';display: inline-block;height: 0.08rem;width: 0.08rem;border-top: 0.08rem solid transparent; border-bottom: 0.1rem solid transparent;border-right: 0.1rem solid ' + bg + ';"></b></div><div style="flex:1;border-radius:0.05rem;padding: 0.02rem 0.09rem;background:' + bg + '"><p>' + params.name.split('-')[0] + '月' + params.name.split('-')[1] + '日' + str + '</p><p>' + params.value + '元</p></div><div style="display:' + showRight + '"><b style="content:\'\';display: inline-block;height: 0.08rem;width: 0.08rem;border-top: 0.08rem solid transparent; border-bottom: 0.1rem solid transparent;border-left: 0.1rem solid ' + bg + ';"></b></div></div>';}},

效果图:

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

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

相关文章

拥有「中美韩」资方背景的Story,下轮牛市密码?

Story由 (A16Z) 领投&#xff0c;帕丽斯希尔顿 (Paris Hilton) 提供 5400 万美元融资&#xff0c;标志着IP领域的一个转折点。他们认为 Story Protocol 有何独特之处&#xff1f;该项目旨在如何彻底改变数字世界&#xff1f;区块链的致富效应&#xff0c;已经让传统金融蠢蠢欲动…

大数据----31.hbase安装启动

二.Hbase安装 先前安装&#xff1a; Zookeeper 正常部署 首先保证 Zookeeper 集群的正常部署&#xff0c;并启动之。 三台机器都执行&#xff1a;zkServer.sh startHadoop 正常部署 Hadoop 集群的正常部署并启动。 主节点上进行 &#xff1a;start-all.sh 1.HBase 的获取 一定…

2023微博AIGC算法工程师一面 面试题

来源&#xff1a;投稿 作者&#xff1a;LSC 编辑&#xff1a;学姐 一面 35min左右&#xff0c;主要是根据简历发问的 1.自我介绍 介绍实习项目, 聊的比较详细&#xff0c;但是我实习项目限制比较多&#xff0c;做的不够深入。 2.多标签分类的损失函数 多标签分类任务&#x…

拦截器与过滤器的区别

1.最通俗的理解 过滤器&#xff1a;你要从一堆请求中通过一个工具挑选出符合你要求的请求&#xff0c;而这个工具就是过滤器 拦截器&#xff1a;当一个流程正在进行时&#xff0c;你希望干预它的进展&#xff0c;甚至是直接将它终止 2.触发时机不同 过滤器是在请求进入容器…

DevExpress WinForms Pivot Grid组件,一个类似Excel的数据透视表控件(二)

界面控件DevExpress WinForms的Pivot Grid组件是一个类似Excel的数据透视表控件&#xff0c;用于多维(OLAP)数据分析和跨选项卡报表。在上文中&#xff08;点击这里回顾>>&#xff09;我们介绍了DevExpress WinForms Pivot Grid组件的性能、分析服务、数据塑造能力等&…

Java实现一个简单的贪吃蛇小游戏

一. 准备工作 首先获取贪吃蛇小游戏所需要的头部、身体、食物以及贪吃蛇标题等图片。 然后&#xff0c;创建贪吃蛇游戏的Java项目命名为snake_game&#xff0c;并在这个项目里创建一个文件夹命名为images&#xff0c;将图片素材导入文件夹。 再在src文件下创建两个包&#xff0…

开源云原生网关Linux Traefik本地部署结合内网穿透远程访问

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

一文带你了解UI自动化测试框架

PythonSeleniumUnittestDdtHTMLReport分布式数据驱动自动化测试框架结构 1、Business&#xff1a;公共业务模块&#xff0c;如登录模块&#xff0c;可以把登录模块进行封装供调用 ------login_business.py from Page_Object.Common_Page.login_page import Login_Page from H…

ubuntu22 安装 cuda12.0

本文是先安装显卡驱动后进行的操作 查看显卡驱动支持CUDA的最新版本12.0 nvidia-smi 检查gcc版本 gcc -v 查看系统支持的gcc版本 https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html 选择对应的安装cuda命令 https://developer.nvidia.com/cuda-too…

工业级路由器在货运物流仓储管理中的应用

工业级路由器在货运物流仓储管理中扮演着重要的角色&#xff0c;为整个物流系统提供了稳定可靠的网络连接和数据传输支持。下面将从以下几个方面介绍工业级路由器在货运物流仓储管理中的应用。 实时监控和追踪&#xff1a;工业级路由器通过与各种传感器、监控设备和物联网设备的…

【论文阅读】深度学习方法在数字岩石技术中的应用进展

【论文名称】Advances in the application of deep learning methods to digital rock technology 深度学习方法在数字岩石技术中的应用进展 【论文来源】EI检索 【作者单位】长江大学地球物理与油气资源学院、加拿大阿尔伯塔大学土木与环境工程系、东北石油大学地球科学学院、…

【剑指offer|图解|数组】寻找文件副本 + 螺旋遍历二维数组

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、剑指offer每日一练 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️寻找文件副本(题目难度&#xff1a;简单)1.1 题目1.2 示例1.3 限制1.4 解题思路一c代…

高翔《自动驾驶与机器人中的SLAM技术》第九、十章载入静态地图完成点云匹配重定位

修改mapping.yaml文件中bag_path&#xff1a; 完成之后会产生一系列的点云文件以及Keyframe.txt文件&#xff1a; ./bin/run_frontend --config_yaml ./config/mapping 生成拼接的点云地图map.pcd文件 &#xff1a; ./bin/dump_map --pose_sourcelidar 。、 完成第一次优…

低代码开发:属于“美味膳食”还是“垃圾食品”

目录 引言低代码是什么&#xff1f;低代码的优点使用挑战未来展望最后 引言 随着数字化转型的迅猛发展&#xff0c;低代码开发平台逐渐成为了企业和开发者的关注焦点&#xff0c;尤其是前两年低代码的迅速火爆&#xff0c;来势汹汹&#xff0c;号称要让大部分程序员下岗的功能…

双指针算法(一)

目录 移动零 复写零 快乐数 盛水最多的容器 双指针与单调性结合 有效三角形的个数 查找总价格为目标值的两个商品 两数之和 Ⅱ - 输入有序数组 双指针算法是通过定义两个指针不断单向移动来解决问题的一种算法。但双指针算法&#xff0c;是一个抽象的思想概念&#xf…

dockerfile,Docker镜像的创建

dockerfile&#xff1a;创建镜像&#xff0c;创建自定义的镜像。包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口。设置环境变量。 docker的创建镜像的方式&#xff1a; 1、基于已有镜像进行创建。根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起容…

Linux主机自动注册NPS客户端(脚本化)

参考官方对API使用方法的定义&#xff1a;https://ehang-io.github.io/nps/#/ 1、首先必须要在配置文件中开启 auth_key 并配置一个合适的密钥 2、修改脚本中的可变量参数&#xff0c;以适配自己的环境 #!/bin/bash # 脚本使用说明&#xff1a;# 脚本名称&#xff1a;npc_cr…

+0和不+0的性能差异

前几日&#xff0c;有群友转发了某位技术大佬的weibo。并在群里询问如下两个函数哪个执行的速度比较快&#xff08;weibo内容&#xff09;。 func g(n int, ch chan<- int) {r : 0for i : 0; i < n; i {r i}ch <- r 0 }func f(n int, ch chan<- int) {r : 0for …

基于Microchip 光伏逆变器方案

小编杂谈新能源已经完成了至少5期的博文了&#xff0c;Boss告诉小编&#xff0c;如果还不介绍我们的产品和方案&#xff0c;黄花菜都凉了&#xff0c;所以小编这期博文就重点介绍一下Microchip在储能上的产品介绍&#xff0c;重点聊聊Microchip储能中使用的光伏逆变器的解决方案…

期末数组函数加强练习

前言&#xff1a;由于时间问题&#xff0c;部分题解取自网友&#xff0c;但都是做过的好题。 对于有些用c实现的题目&#xff0c;可以转化成c实现&#xff0c;cin看成c的读入&#xff0c;可以用scanf&#xff0c;输出cout看作printf&#xff0c;endl即换行符 开胃菜&#xff…