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.mfbz.cn/a/242273.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot--Freemarker渲染技术+实际案例

目录 Freemarker 1.1.什么是Freemarker 1.2.Freemarker模板组成部分 1.3.优点 FreeMarker常见的方法&#xff1a; 2.2.2.数值 2.2.3.布尔值 2.2.4.日期 2.3.常见指令 2.3.1.处理不存在的值 assign 2.3.4.list 2.3.5.include SpringBoot整合Freemarker Freemarker…

MYsql第三次作业

目录 问题&#xff1a; 解答 1.查询student表的所有记录 2.查询student表的第2条到4条记录 3.从student表查询所有学生的学号&#xff08;id&#xff09;、姓名&#xff08;name&#xff09;和院系&#xff08;department&#xff09;的信息 4.从student表中查询计算机系和…

Qt设置类似于qq登录页面(ikun)

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QWindow> #include <QIcon> #include <QLabel> #include <QMovie> #include <QLineEdit> #include <QPushButton>QT_BEGIN_NAMESPACE namespace Ui { class…

分类预测 | Matlab实现HPO-GRU【23年新算法】基于猎食者优化算法优化门控循环单元的数据分类预测

分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机的数据分类预测【23年新算法】 目录 分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机的数据分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.HPO-GRU【23年新算法】基于猎食者优化算法优…

算法导论复习(二)

算法导论第二次复习以 分治法 为专题 文章目录 分治算法是什么归并排序Strassen矩阵乘法最近点对 求解递推表达式 分治算法是什么 归并排序 代码如下&#xff1a; #include <iostream> #include <vector>using namespace std;// 归并函数&#xff0c;将两个有序数…

vue router-view报错解决

目录 1 报错内容2 解决方案2.1 检查版本2.1 正确引入使用vue-router组件 1 报错内容 我们在使用router-view组件的时候会遇到如下报错&#xff1a; 报错内容如下&#xff1a; [Vue warn]: Unknown custom element: <router-view> - did you register the component co…

企业首选的免费开源供应链管理协作系统功能应用介绍

本文节选自Odoo亚太金牌服务机构【开源智造】所编写的《Odoo最佳业务解决方案》如需获取完整的知识内容&#xff0c;请至开源智造官网免费获取。感谢网友一键三连&#xff1a;点赞、转发、收藏&#xff0c;您的支持是我们最大的前进动力&#xff01; 供应链协作 用Odoo供应链协…

redis-学习笔记(Jedis hash简单命令)

hset & hget 往 hash 里面塞数据和获取数据 示例代码 hmset & hmget 批量插入数据, 获取数据 注意, hmset 里面插入的是一个 Map hmget 的返回值是一个一个 List 列表 (参数仍是变长参数) 示例代码 hexists 判断 hash 中 域值 存不存在 示例代码 hdel 删除指定的域和值…

5G/4G工业DTU扬尘在线监测:解决工地扬尘困扰的最佳方案

在如今快速发展的工业环境中&#xff0c;扬尘污染成为了一个严重的问题。工地扬尘不仅对环境造成污染&#xff0c;还对工作人员的健康产生负面影响。为了解决这一问题&#xff0c;5G/4G工业DTU扬尘在线监测应运而生。 5G/4G工业DTU扬尘在线监测原理 5G/4G工业DTU扬尘在线监测是…

SpringBoot之视图渲染技术

前言 在Spring Boot中&#xff0c;视图渲染技术用于将动态数据渲染到用户界面&#xff0c;生成最终的HTML、XML、JSON等文档&#xff0c;以便将其返回给客户端浏览器 一.关于Freemarker 1.介绍 Freemarker是一个Java模板引擎&#xff0c;用于生成基于模板的动态内容。它是一…

【深度学习】Pytorch 系列教程(一):PyTorch数据结构:1、Tensor(张量)及其维度(Dimensions)、数据类型(Data Types)

文章目录 一、前言二、实验环境三、PyTorch数据结构0、分类1、Tensor&#xff08;张量&#xff09;1. 维度&#xff08;Dimensions&#xff09;0维&#xff08;标量&#xff09;1维&#xff08;向量&#xff09;2维&#xff08;矩阵&#xff09;3维张量 2. 数据类型&#xff08…

用AI画个女朋友回家过年,1行Python代码,免费实现

#这才是真功夫# 大家好&#xff0c;这里是程序员晚枫&#xff0c;全网同名。 马上过年了&#xff0c;还是单身的举个爪&#xff01; 今年GPT系列的产品非常火爆&#xff0c;今天给大家分享一下&#xff0c;如何免费用AI代码画1个女朋友。&#x1f447; 直接上代码 大家学习 或 …

STM32-TIM定时器输出比较

目录 一、输出比较简介 二、PWM简介 三、输出比较通道&#xff08;通用&#xff09; 四、输出比较通道&#xff08;高级&#xff09; 五、输出比较模式 六、PWM基本结构 七、PWM参数计算 八、外设介绍 8.1 舵机 8.2 直流电机及驱动 九、开发步骤 十、输出比较库函数…

容器技术与操作系统

文章目录 容器技术 vs 虚拟机操作系统容器 Docker与操作系统 容器技术 vs 虚拟机 操作系统 操作系统是一个很重而且很笨的程序&#xff0c;简称笨重&#xff0c;有多笨重呢&#xff1f; 操作系统运行起来是需要占用很多资源的&#xff0c;大家对此肯定深有体会&#xff0c;刚…

vue.js单页面 如何遇到404页面如何正确返回状态码404

客户端配置&#xff08;Vue.js&#xff09; 在客户端&#xff0c;你可以在 Vue 路由器&#xff08;vue-router&#xff09;中设置一个捕获所有未定义路由的规则&#xff0c;显示一个 404 组件&#xff0c;但请注意这不会改变 HTTP 状态码。 import Vue from vue; import Rout…

【源码复现】《Towards Deeper Graph Neural Networks》

目录 1、论文简介2、论文核心介绍2.1、基本概述2.2、模型介绍 3、源码复现3.1、torch复现3.2、DGL复现 1、论文简介 论文题目——《Towards Deeper Graph Neural Networks》论文作者——Meng Liu, Hongyang Gao & Shuiwang Ji论文地址——Towards Deeper Graph Neural Net…

uni-app 一些实用的页面模板

时间倒计时 <!-- 时间倒计时 --> <template><view class"container"><view class"flex-row time-box"><view class"time-item">{{ laveTimeList[0] }}</view><text>天</text><view class&qu…

Kubernetes实战(十四)-k8s集群扩容master节点

1 Master 高可用架构 Kubernetes 作为容器集群系统&#xff0c;通过健康检查 重启策略实现了 Pod 故障自我修复能力&#xff0c;通过调度算法实现将 Pod 分布式部署&#xff0c;并保持预期副本数&#xff0c;根据 Node 失效状态自动在其他 Node 拉起 Pod&#xff0c;实现了应…

【初阶C++】入门(超详解)

C入门 前言1. C关键字(C98)2. 命名空间2.1 命名空间定义2.2 命名空间使用2.3嵌套命名空间 3. C输入&输出4. 缺省参数4.1 缺省参数概念4.2 缺省参数分类 5. 函数重载5.1 函数重载概念5.2 C支持函数重载的原理--名字修饰(name Mangling) 6. 引用6.1 引用概念6.2 引用特性6.3 …

最新版ES8的client API操作 Elasticsearch Java API client 8.0

作者&#xff1a;ChenZhen 本人不常看网站消息&#xff0c;有问题通过下面的方式联系&#xff1a; 邮箱&#xff1a;1583296383qq.comvx: ChenZhen_7 我的个人博客地址&#xff1a;https://www.chenzhen.space/&#x1f310; 版权&#xff1a;本文为博主的原创文章&#xff…
最新文章