当前位置: 首页 > news >正文

echarts有背景的柱状图,鼠标滑过提示信息都是展示背景柱状图的值

// 上一篇文章介绍了如何实现有背景的柱状图,现在又遇到一个问题,鼠标滑过柱子,提示信息是背景柱子的值,解决方案,自定义tooltip的formatter,上代码tooltip: {//鼠标悬浮提示数据formatter: function (param) {// param.seriesIndex 会告诉你是第一个柱状图,用这个来判断你要显示的数值let str = ''if (param.seriesIndex === 1) {str = `<div>${param.name}: ${param.value} 辆</div>`}return str},backgroundColor: 'rgba(0,123,177,0.2)',borderColor: "#030C31",textStyle: {color: '#ffffff',}},//完整代码import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'const CarAgeEcharts = (props) => {const chartRef = useRef()console.log(props)useEffect(() => {console.log(props)var salvProName = [];var salvProValue = [];if (props?.info?.length) {salvProName = props?.info[0];salvProValue = props?.info[1];}var salvProMax = [];//背景按最大值let bigNum = 0// props?.info[1].map((res)=>{// })bigNum = Math.max.apply(null, props?.info[1])for (let i = 0; i < salvProValue.length; i++) {salvProMax.push(bigNum)}const options = {grid: {// 左右边距left: 50,bottom: 30,top: 10,},tooltip: {//鼠标悬浮提示数据formatter: function (param) {console.log(param)let str = ''if (param.seriesIndex === 1) {str = `<div>${param.name}: ${param.value} 辆</div>`}return str},backgroundColor: 'rgba(0,123,177,0.2)',borderColor: "#030C31",textStyle: {color: '#ffffff',}},xAxis: {type: 'category',data: props?.info[0],axisTick: {show: false,},axisLabel: {interval: 0}},yAxis: {type: 'value',splitLine: {//分割线配置show: true,lineStyle: {color: "rgba(48,170,219,0.15)",},},axisLabel: {//y轴文字的配置textStyle: {color: "#ffffff",margin: 15,},}},series: [{name: '背景',type: 'bar',barWidth: 20,barGap: '-100%',data: salvProMax,itemStyle: {normal: {color: 'rgba(0, 123, 177, 0.2)',barBorderRadius: 30,}},},{data: props?.info[1],type: 'bar',smooth: true,barWidth: 20,itemStyle: {normal: {barBorderRadius: 10,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#18FFE1'}, {offset: 0.5,color: '#18EBFF'}, {offset: 1,color: '#00A2FF'}]),},},},]};// 创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例const chart = echarts.init(chartRef.current)// 设置图表实例的配置项和数据chart.setOption(options)// 组件卸载return () => {// myChart.dispose() 销毁实例。实例销毁后无法再被使用chart.dispose()}}, [props])return (// 把图表封装单独放入一个组件中<div style={{ width: "100%", height: "70%" }} ref={chartRef}></div>)
}
export default CarAgeEcharts

相关文章:

echarts有背景的柱状图,鼠标滑过提示信息都是展示背景柱状图的值

// 上一篇文章介绍了如何实现有背景的柱状图&#xff0c;现在又遇到一个问题&#xff0c;鼠标滑过柱子&#xff0c;提示信息是背景柱子的值&#xff0c;解决方案&#xff0c;自定义tooltip的formatter&#xff0c;上代码tooltip: {//鼠标悬浮提示数据formatter: function (para…...

华为防火墙基本原理工作方法总结

防火墙只会对tcp首包syn建立会话表&#xff0c;其它丢掉&#xff0c;如synack&#xff0c;ack udp直接建立会话表 icmp只对首包请求包建立会话表&#xff0c;其它包&#xff0c;如应答的不会建立直接丢掉 防火墙状态查看&#xff1a; rule name trust_untrust source-zone tru…...

Spring Cloud之多级缓存

目录 传统缓存 多级缓存 JVM进程缓存 Caffeine 缓存驱逐策略 实现进程缓存 常用Lua语法 数据类型 变量声明 循环使用 定义函数 条件控制 安装OpenResty 实现Nginx业务逻辑编写 请求参数解析 实现lua访问tomcat JSON的序列化和反序列化 Tomcat的集群负载均衡 …...

融云荣登「2023 年度 PaaS 企业排行榜」

11 月 2 日&#xff0c;中国科学院旗下《互联网周刊》颁布“2023 年度 PaaS 企业排行榜”&#xff0c;融云荣登榜单。关注【融云全球互联网通信云】了解更多 根据中国信息通信研究院《云计算白皮书 2023》&#xff1a;2022 年&#xff0c;PaaS 增长强势&#xff0c;总收入 342 …...

YOLOv8轻量化模型:模型轻量化设计 | 轻量级可重参化EfficientRep| 来自YOLOv6思想

💡💡💡本文解决什么问题:在几乎不保证精度下降的前提下,轻量级模型创新设计 EfficientRep 在关键点检测任务中 | GFLOPs从9.6降低至8.5, mAP50从0.921下降至0.912,mAP50-95从0.697提升至0.779 YOLO轻量化模型专栏:http://t.csdnimg.cn/AeaEF 1.YOLOv6介绍 论文…...

【JavaSE】基础笔记 - 类和对象(下)

目录 1、this引用 1.1、为什么要有this引用 1.2、什么是this引用 1.3、 this引用的特性 2、 对象的构造及初始化 2.1、 如何初始化对象 2.2、构造方法 2.2.1、概念 2.2.2、特性 2.3、默认初始化 2.4、就地初始化 上篇&#xff1a;【JavaSE】基础笔记 - 类和对象&#…...

浅析刚入门Python初学者的注意事项

文章目录 一、注意你的Python版本1.print()函数2.raw_input()与input()3.比较符号&#xff0c;使用!替换<>4.repr函数5.exec()函数 二、新手常遇到的问题1、如何写多行程序&#xff1f;2、如何执行.py文件&#xff1f;3、and&#xff0c;or&#xff0c;not4、True和False…...

2023NOIP A层联测26 总结

T1 求 ∑ i 1 n ∑ j i n ( ⨁ k i j a k ) 2 \sum\limits_{i1}^n\sum\limits_{ji}^n\left(\bigoplus\limits_{ki}^{j}a_k\right)^2 i1∑n​ji∑n​(ki⨁j​ak​)2&#xff0c; n , a i ≤ 2 1 0 5 n,a_i\le2\times10^5 n,ai​≤2105。先转成前缀和&#xff0c;然后就没思…...

响应式编程-Project Reactor Mono 介绍

响应式编程-Project Reactor Mono 介绍 本文以Mono的角度来介绍Reactor编程&#xff0c;Flux的使用同理。 初体验 Web应用 controller 方法在Spring webmvc 和 Spring webFlux下Controller方法实现示例如下&#xff1a; Spring webmvc: GetMapping("/test1") …...

R语言实操记录——导出高清图片(矢量图)

R语言 R语言实操记录——导出高清图片&#xff08;矢量图&#xff09; 文章目录 R语言一、起因&#xff08;闲聊&#xff0c;可跳过&#xff09;二、如何在R中导出高清图片&#xff08;矢量图&#xff09;2.1、保存为EPS图片格式后转AI编辑2.2、保存为PDF格式&#xff08;推荐…...

Apache Doris 开源最顶级基于MPP架构的高性能实时分析数据库

背景介绍 Apache Doris是一个基于MPP架构的易于使用&#xff0c;高性能和实时的分析数据库&#xff0c;以其极高的速度和易用性而闻名。海量数据下返回查询结果仅需亚秒级响应时间&#xff0c;不仅可以支持高并发点查询场景&#xff0c;还可以支持高通量复杂分析场景。 这些都…...

webgoat-Request Forgeries 请求伪造

(A8:2013) Request Forgeries Cross-Site Request Forgeries 跨站请求伪造&#xff0c;又称一键攻击或会话骑乘&#xff0c;简称CSRF &#xff08;有时发音为 sea-surf&#xff09;或 XSRF&#xff0c;是一种恶意利用网站&#xff0c;其中传输未经授权的命令 来自网站信任的用…...

【flask跨域问题】解决它

大概7-8年前&#xff0c;前后端还没开始分离或者刚开始分离的之前&#xff0c;跨域问题很多。 后来我就没在遇到过了&#xff0c;这次做一个小项目&#xff0c;又遇到了&#xff0c;记录下。 现在前端的脚手架都自己能解决了。 1. 跨域 是因为出于浏览器的同源策略限制。同源…...

虚幻引擎:如何在工程里面添加插件

1.在自己的项目中安装插件 在content目录下创建一个Plugins的文件,将插件文件放进去即可 2.在软件上安装,这样所有创建的项目都会带有此插件 将插件放在自己软件的这个目录下就好了...

SpringCloud Alibaba 【四】Openfeign

Openfeign配置与使用 前言介绍openfeign使用openfeign导入依赖启动类正式使用测试结果 前言 在springcloud中消费者项目需要调用提供者项目的接口&#xff0c;一开始用的是RestTemplate中的方法。但是RestTemplate进行远程调用时&#xff0c;直接调用controller层的接口&#…...

语音信号的线性预测分析、合成及MATLAB编程设计实现

需要的基础&#xff1a;AR模型、列文森-杜宾递推法 推荐阅读&#xff1a; 基于线性预测的语音编码原理解析 基于线性预测的语音编码原理解析 这篇文章和上一篇类似 语音信号的线性预测分析及其Matlab源码 这篇文章是要付费看的&#xff0c;但是他能预览的那部分写的确实好 语…...

rabbitMQ rascal/amqplib报错 Error: Unexpected close 排查

以下是一些可能导致此 RabbitMQ 客户端或任何其他 RabbitMQ 客户端中的套接字读取或写入失败的常见场景 1.错过&#xff08;客户端&#xff09;心跳 第一个常见原因是RabbitMQ 检测到心跳丢失。发生这种情况时&#xff0c;RabbitMQ 将添加一个有关它的日志条目&#xff0c;然…...

一文1600字使用Postman搞定各种接口token实战(建议收藏)

现在许多项目都使用jwt来实现用户登录和数据权限&#xff0c;校验过用户的用户名和密码后&#xff0c;会向用户响应一段经过加密的token&#xff0c;在这段token中可能储存了数据权限等&#xff0c;在后期的访问中&#xff0c;需要携带这段token&#xff0c;后台解析这段token才…...

Vue自定义组件学习笔记

专业描述: vue关于自定义组件的描述中&#xff0c;父子组件是相对的概念,父组件表示引用当前组件的组件,子组件就是当前组件&#xff1b; 1)关于props和emits选项的理解 1.props:我们平时写的.vue文件实际上就是一个自定义组件,只是一般不会考虑复用性,不会去设置props选项,…...

王道p18 第12题假设 A中的 n个元素保存在一个一维数组中,请设计一个尽可能高效的算法,找出A的主元素。若存在主元素,则输出该元素:否则输出-1

视频讲解在&#xff1a;&#x1f447; p18 第12题 c语言实现王道数据结构课后习题_哔哩哔哩_bilibili 从前向后扫描数组元素&#xff0c;标记出一个可能成为主元素的元素 Num。然后重新计数&#xff0c;确认 Num 是否是主元素。 我们可分为以下两步: 1.选取候选的主元素。依…...

从“变速齿轮”到“创新引擎”:解码阿里“大中台、小前台”战略的演进与实战

1. 中台战略的起源与本质 第一次听说"大中台、小前台"这个概念时&#xff0c;我正坐在杭州一家咖啡馆里和几位阿里P8的技术专家聊天。他们用了一个特别形象的比喻&#xff1a;"现在的互联网公司就像一辆老式自行车&#xff0c;前台是拼命蹬车的双腿&#xff0c;…...

颠覆式窗口置顶:Topit重新定义Mac多任务处理体验

颠覆式窗口置顶&#xff1a;Topit重新定义Mac多任务处理体验 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 在数字工作空间爆炸式增长的今天&#xff0c;Mac用…...

南开计算机复试面试:一份能让老师眼前一亮的简历和自我介绍该怎么写?(附避坑指南)

南开大学计算机复试&#xff1a;如何打造高通过率的技术简历与自我介绍 站在南开大学计算机楼前&#xff0c;看着玻璃幕墙反射的阳光&#xff0c;我突然想起去年此时自己手忙脚乱准备复试的场景。作为过来人&#xff0c;我深知一份精心设计的简历和流畅自然的自我介绍&#xff…...

AI显微镜-Swin2SR基础教程:理解‘细节重构技术’对AI生成图的价值

AI显微镜-Swin2SR基础教程&#xff1a;理解‘细节重构技术’对AI生成图的价值 1. 从模糊到高清&#xff1a;AI超分的革命性突破 你是否曾经遇到过这样的情况&#xff1a;AI生成了一张很有创意的图片&#xff0c;但分辨率太低&#xff0c;放大后全是马赛克&#xff1b;或者找到…...

搭建专属汽车电子测试 AI 助手

专栏&#xff1a;《AI 汽车电子测试实战》第 15 篇 作者&#xff1a;一线汽车电子测试工程师 适合人群&#xff1a;想搭建私有 AI 助手的测试团队、关注数据安全的工程师开篇&#xff1a;为什么需要专属 AI 助手&#xff1f; 这是我上个月在某车企的 AI 部署项目中的真实经历。…...

好看不等于会交互!阿里发布基于交互的世界模型基准

视频生成技术正在以惊人的速度迭代&#xff0c;那些光影绚丽的画面常常让人惊叹人工智能的创造力&#xff0c;但当你仔细观察视频中的物理碰撞或物体运动时&#xff0c;会发现它们常常并不符合现实世界的常识。由阿里、中科院、北航和北邮的研究人员联合推出的 Omni-WorldBench…...

【Python时序预测实战】基于贝叶斯优化的Transformer单变量时序预测模型构建与调优

1. 为什么选择Transformer做时序预测&#xff1f; 我第一次用Transformer做销量预测时&#xff0c;心里其实挺没底的。毕竟这玩意儿原本是搞自然语言处理的&#xff0c;就像拿菜刀削苹果——工具不太对口。但当我看到预测结果比传统LSTM提升了23%的准确率时&#xff0c;立刻真香…...

保姆级教程:在YOLOv12中集成CBAM注意力模块(附完整代码与配置文件)

从零实现YOLOv12与CBAM注意力模块的深度整合实战指南 在目标检测领域&#xff0c;YOLO系列算法始终保持着前沿地位。最新发布的YOLOv12在速度和精度之间取得了更好的平衡&#xff0c;而注意力机制的引入则能进一步提升模型对关键特征的捕捉能力。本教程将手把手带你完成CBAM注…...

GNU Parallel进阶指南:解决管道传参的5个常见坑

GNU Parallel进阶指南&#xff1a;解决管道传参的5个常见坑 在数据处理和批量任务处理领域&#xff0c;GNU Parallel堪称瑞士军刀般的存在。这个看似简单的命令行工具&#xff0c;却能让你的工作效率提升数倍。但就像任何强大的工具一样&#xff0c;掌握其精髓需要跨越一些技术…...

iPhone 抓包失败 4 种具体情况逐个解决方法

抓不到包这个描述太模糊了&#xff0c;在实际调试中&#xff0c;这句话至少对应四种完全不同的情况&#xff1a; 完全没有请求只有浏览器能抓到能抓到但 HTTPS 解不开能抓到但数据不完整 如果不先分清楚是哪一种&#xff0c;就会一直重复安装证书或改代理配置。一、先做一个验证…...