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,一经查实,立即删除!

相关文章

第22关 深入解析K8s中的RBAC角色访问控制策略

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维&#xff0c;在k8s上我们如何控制访问权限呢&#xff0c;答案就是Role-based access control (RBAC) - 基于角色&#xff08;Role&#xff09;的访问控制&#xff0c;&#xff08;RBAC&#xff0…

拥有「中美韩」资方背景的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.触发时机不同 过滤器是在请求进入容器…

【数据结构/C++】二分查找

二分查找&#xff1a;根据索引二分&#xff0c;循环查找的条件是左索引小于等于右索引。 二叉树需要判断自身根是否为NULL&#xff0c;并通过改变current的值进行判断。 #include <iostream> using namespace std; // 长度为 N 的有序表nums 中查找 target int BiSearc…

14.Spring2.7.x 整合 Elasticsearch7.17

Elasticsearch&#xff1a;一个分布式的、Restful 风格的搜索引擎&#xff1b;支持对各种类型的数据的索引&#xff1b;搜索速度快&#xff0c;可以提供实时的搜索服务&#xff1b;便于水平扩展&#xff0c;每秒可以处理 PB 级海量数据 目录 1.Spring 整合 Elasticsearch 1.1…

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…

Java的ThreadLocal

ThreadLocal ThreadLocal 是 Java 中一个非常有用的类&#xff0c;它允许你创建线程局部变量。线程局部变量是指每个线程都有自己独立的变量副本&#xff0c;互不干扰。ThreadLocal 主要用于解决多线程环境下共享数据的线程安全性问题。 基本用法 创建 ThreadLocal 变量 Th…

开源云原生网关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…

六. 函数

基本使用 ts与js一样拥有具名函数和匿名函数两种函数类型。但是ts的函数需要提前定义好参数类型以及函数的返回值类型。 具名函数 function add(num1: number, num2: number):number {return num1 num2 }匿名函数 匿名函数的定义相对麻烦&#xff0c;我们需要提前定义函数的…

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代…

微信网页授权步骤说明

总览 引导用户进入授权页面同意授权&#xff0c;获取code通过code换取网页授权access_token&#xff08;与基础支持中的access_token不同&#xff09;如果需要&#xff0c;开发者可以刷新网页授权access_token&#xff0c;避免过期&#xff08;一般不需要&#xff09;通过网页…

高翔《自动驾驶与机器人中的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;号称要让大部分程序员下岗的功能…