echarts 5.5.0版本下的层叠柱形图,每个值都从0开始,会有覆盖情况

需求:

1、每个公司,需要两个柱子去展示(stack: '1'是第一个柱子,stack:'2',是第二个柱子);

2、必须每个数据都是从0开始,不在上一个值上累加;

3、鼠标滑上去的时候,最大值的柱子,会全部显示出来,滑走就恢复显示其他值;

4、echarts 版本必须是 5.3.3 以上的,低版本不支持这个效果

5、鼠标滑上去的时候,当前公司的所有值都会有提示,并且和其他公司同类型值有突出显示

鼠标没有滑上的效果图
鼠标滑上的效果

const data = [{ company: 'A公司', value1: 270, value2: 115.97, value3: 25.85, value4: 170, value5: 115 },{ company: 'B公司', value1: 150, value2: 86.1, value3: 12.2, value4: 170, value5: 155 },{ company: 'C公司', value1: 230, value2: 67.8, value3: 61.89, value4: 230, value5: 155 },{ company: 'D公司', value1: 170, value2: 68.5, value3: 17.98, value4: 155, value5: 155 },{ company: 'Q公司', value1: 150, value2: 56.21, value3: 11.06, value4: 155, value5: 155 }];option = {tooltip: {trigger: 'axis',formatter: function (params) {let str = params[0].name + '<br/>'params.forEach(item=>{let a =  item.marker + item.seriesName + ': ' + item.value + '<br/>'str+=a})return str;}},title: {text: '各公司产值数据展示',top: '5%'},grid: {top: '15%',bottom: '10%'},xAxis: {type: 'category',data: data.map(d => d.company)},yAxis: {type: 'value'},series: [{name: '1~5月计划产值',type: 'bar',barWidth: '20%',stack: '1',stackStrategy: 'position',barGap: '-100%',data: data.map(d => d.value1),emphasis: { // 添加强调状态配置focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素itemStyle: {opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明}}},{name: '全年累计完成产值',type: 'bar',barWidth: '20%',stack: '1',stackStrategy: 'position',barGap: '-100%',data: data.map(d => d.value2),emphasis: { // 添加强调状态配置focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素itemStyle: {opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明}}},{name: '年度计划产值',type: 'bar',barWidth: '20%',stackStrategy: 'position',stack: '1',barGap: '0%',data: data.map(d => d.value3),emphasis: { // 添加强调状态配置focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素itemStyle: {opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明}}},{name: '5月计划产值',type: 'bar',barWidth: '20%',stack: '2',stackStrategy: 'position',data: data.map(d => d.value4),emphasis: { // 添加强调状态配置focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素itemStyle: {opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明}}},{name: '5月实际完成产值',type: 'bar',barWidth: '20%',stack: '2',stackStrategy: 'position',data: data.map(d => d.value5),emphasis: { // 添加强调状态配置focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素itemStyle: {opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明}}}]};

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

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

相关文章

什么是API?如何进行API对接?

目录 一、API和API对接的定义 二、API接口的应用场景 三、为什么需要API对接 四、如何进行API对接 GET请求 POST请求 五、API对接的注意事项 在这个数字化时代&#xff0c;API像一把万能钥匙&#xff0c;让数据流动起来&#xff0c;创造出无限可能。本文旨在介绍API及其…

点云处理实战 PCL求解点云表面曲率

目录 一、什么是曲率 二、曲率计算过程 三、pcl 求解点云局部曲率 四、思考?为何曲率计算会使用协方差矩阵? 五、推荐阅读 一、什么是曲率 曲率是几何学中用来描述曲线或曲面形状变化的一个量。它反映了曲线或曲面的弯曲程度。在不同的上下文中,曲率的定义和计算方式有…

科普:什么是 BC-404 ?全方位解读最新通缩型 NFT 标准

区块链技术飞速发展的今天&#xff0c;创新从未停歇。继 ERC-404 标准问世后&#xff0c;一个名为 BC-404 的新标准应运而生&#xff0c;为 NFT 市场带来了全新的可能性。BC-404&#xff08;Bonding Curve 404&#xff09;—基于对 ERC-404 的改进&#xff0c;加密货币中第一个…

三、知识库搭建

知识库搭建 1 介绍词向量向量数据库 2 使用embedding API3 数据处理数据加载数据清洗文档分割 4 搭建并使用向量数据库4.1 自定义embedding封装4.2 chroma数据库4.3 向量检索 详细代码参考&#xff1a;https://github.com/lin902/llm-application 1 介绍 词向量 词向量就是把…

RK3568平台开发系列讲解(调试篇)分析内核调用的利器 ftrace

🚀返回专栏总目录 文章目录 一. 指定 ftrace 跟踪器二、设置要 trace 的函数三、ftrace 的开关四、查看 trace五、trace-cmd 的使用六、trace-cmd 的常用选项6.1、查看可以跟踪的事件6.2、跟踪特定进程的函数调用6.3、函数过滤6.4、限制跟踪深度6.5、追踪特定事件沉淀、分享、…

CesiumJS【Basic】- #016 多边形面渲染“花了”的问题

文章目录 多边形面渲染“花了”的问题1 目标2 问题代码3 修正后代码4 总结多边形面渲染“花了”的问题 1 目标 解决多边形的面“花了”的问题 2 问题代码 使用Cesium.PerInstanceColorAppearance渲染后出现色斑 import * as Cesium from "cesium";const viewer …

防火墙双机热备

防火墙双机热备 随着移动办公、网上购物、即时通讯、互联网金融、互联网教育等业务蓬勃发展&#xff0c;网络承载的业务越来越多&#xff0c;越来越重要。所以如何保证网络的不间断传输成为网络发展过程中急需解决的一个问题。 防火墙部署在企业网络出口处&#xff0c;内外网之…

Orangepi Zero2使用外设驱动库wiringOP配合时间函数驱动HC-SR04超声波测距模块

目录 一、HC-SR04超声波模块原理和硬件接线 1.1 超声波测距原理&#xff1a; 1.2 超声波时序图&#xff1a; 1.3 HC-SR04超声波模块硬件接线&#xff1a; 二、时间函数 2.1 时间函数gettimeofday()原型和头文件&#xff1a; 2.2 使用gettimeofday()函数获取当前时间的秒数…

【osgEarth】Ubuntu 22.04 源码编译osgEarth 3.5

下载源代码 git clone --depth1 https://dgithub.xyz/gwaldron/osgearth -b osgearth-3.5 下载子模块 git submodule update --init 如果下载不过来&#xff0c;就手动修改下.git/config文件&#xff0c;将子模块的地址替换成加速地址 (base) yeqiangyeqiang-Default-string…

打印一张A4纸多少钱?打印a4多少钱一张

在数字化日益发展的今天&#xff0c;打印服务依然是办公、学习和生活中不可或缺的一部分。对于广大用户来说&#xff0c;了解A4纸打印的价格成为选择打印服务的重要参考因素。那么&#xff0c;A4纸打印到底多少钱一张呢&#xff1f; 在琢贝云打印平台&#xff0c;打印价格非常实…

Arcengine 添加字段时,显示General function failuer

一、现象 Arcengine开发的时候&#xff0c;在addfield&#xff08;添加字段&#xff09;操作时&#xff0c;显示General function failuer。如下图所示&#xff1a; 二、问题原因 General function failuer是常规故障&#xff0c;问题原因是文件占用&#xff0c;只要把文件在…

文华wh6均线交易策略多空波段止盈止损提示主图指标公式源码

文华wh6均线交易策略多空波段止盈止损提示主图指标公式源码&#xff1a; EMA120:EMA(C,120); RSV:(CLOSE-LLV(LOW,9))/(HHV(HIGH,9)-LLV(LOW,9))*100; K:SMA(RSV,3,1); D:SMA(K,3,1); J:3*K-2*D; DRAWTEXT(C>EMA120&&J<0,L,多),VALIGN0; DRAWTEXT(C<EMA…

AcWing算法基础课笔记——求组合数3

求组合数Ⅲ 20万组数据&#xff0c; 1 ≤ b ≤ a ≤ 1 0 18 , 1 ≤ p ≤ 1 0 5 1 \le b \le a \le 10^{18}, 1\le p \le 10 ^5 1≤b≤a≤1018,1≤p≤105&#xff0c;使用卢卡斯定理。 卢卡斯定理&#xff1a; C a b ≡ C a m o d p b m o d p C a / p b / p ( m o d p ) C_a…

SSI 注入漏洞

0x00漏洞描述 SSI 英文是 Server Side Includes 的缩写&#xff0c;翻译成中文就是服务器端包含的意思。从技术角度上说&#xff0c;SSI 就是在 HTML 文件中&#xff0c;可以通过注入注释调用的命令或指针。SSI 具有强大的功能&#xff0c;只要使用一条简单的 SSI 命令就可以实…

day2-web安全漏洞攻防-基础-弱口令、HTML注入(米斯特web渗透测试)

day2-web安全漏洞攻防-基础-弱口令、HTML注入&#xff08;米斯特web渗透测试&#xff09; 1&#xff0c;漏洞2&#xff0c;弱口令3&#xff0c;爆破&#xff08;1&#xff09;Burpsuite&#xff08;2&#xff09;攻击类型 4&#xff0c;HTML针剂注入 1&#xff0c;漏洞 挖掘和利…

批量打造怀旧风情:视频批量剪辑将现代视频打造成怀旧经典老视频效果

在繁忙的现代生活中&#xff0c;我们时常怀念那些旧时光&#xff0c;那些充满岁月痕迹的老电影片段。它们不仅记录了一个时代的风貌&#xff0c;更承载了无数人的情感与记忆。你是否想过&#xff0c;将现代的视频素材打造成这种怀旧经典的老视频效果&#xff0c;让每一帧都充满…

【手眼标定】使用kalibr对imu和双目摄像头进行联合标定

使用kalibr对imu和双目摄像头进行联合标定 前言一、IMU标定二、双目摄像头标定三、手眼标定&#xff08;imu和双目摄像头的联合标定&#xff09; 前言 由于本文的imu、双目摄像头都是在ros2环境下开发&#xff0c;数据传输自然也是在ros2中。 但想要使用kalibr进行标定&#x…

骑马与砍杀战团mod制作-基础-军队笔记(一)

骑马与砍杀战团mod制作-基础-军队装备笔记&#xff08;一&#xff09; 资料来源 学习的资料来源&#xff1a; b站【三啸解说】手把手教你做【骑砍】MOD&#xff0c;基础篇&#xff0c;链接为&#xff1a; https://www.bilibili.com/video/BV19x411Q7No?p4&vd_sourcea507…

VOC格式转YOLO格式,xml文件转txt文件简单通用代码

目录 前言 思路介绍 代码 完整代码 拓展代码 前言 很多人在进行目标检测训练时习惯将得到的数据标注为XML文件的VOC格式&#xff0c;或者在网上获取的数据集被标注为XML文件&#xff0c;但是不同的标注工具进行的标注会产生不同的标注xml文件&#xff0c;这里我写了一种通用…

边缘混合计算智慧矿山视频智能综合管理方案:矿山安全生产智能转型升级之路

一、智慧矿山方案介绍 智慧矿山是以矿山数字化、信息化为前提和基础&#xff0c;通过物联网、人工智能等技术进行主动感知、自动分析、快速处理&#xff0c;实现安全矿山、高效矿山的矿山智能化建设。旭帆科技TSINGSEE青犀基于图像的前端计算、边缘计算技术&#xff0c;结合煤…