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.rhkb.cn/news/361868.html

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

相关文章

ffmpeg音视频开发从入门到精通——ffmpeg日志及目录操作

文章目录 FFMPEG1. 操作日志2. 文件移动和删除3. 操作目录重要函数 FFMPEG 1. 操作日志 日志级别 AV LOG ERROR AV LOG WARNING AV LOG INFO AV LOG DEBUG cmake_minimum_required(VERSION 3.27) project(FFmpeg_exercise) set(CMAKE_CXX_STANDARD 14)# 定义FFmpeg的安装路…

基于Java技术的在线学习平台系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术&#xff0c;基于SpringBoot框架 工具&#xff1a;Eclipse、Navicat、M…

【ocean】ocnPrin结合getData导出数据

核心就是这一句ocnPrint(?output fout leafValue( getData(“/output” ?result “dc”))) r_list list(4000, 4100, 4200) multi_list list(20,21,22) fout outfile("/home/yourpath/results.txt" "w") foreach(r_value r_listforeach(multi_value …

Redis数据库(六):主从复制和缓存穿透及雪崩

目录 一、Redis主从复制 1.1 概念 1.2 主从复制的作用 1.3 实现一主二从 1.4 哨兵模式 1.4.1 哨兵的作用 1.4.2 哨兵模式的优缺点 二、Redis缓存穿透和雪崩 2.1 缓存穿透——查不到 2.1.1 缓存穿透解决办法 2.2 缓存击穿 - 量太大&#xff0c;缓存过期 2.2.1 缓存…

高频面试题基本总结回顾2(含笔试高频算法整理)

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

如何快速解决验证码图像问题 | 最佳图像(OCR)验证码解决工具

你是否曾经遇到过陷入一个看似无尽的 CAPTCHA 挑战中&#xff0c;努力识别扭曲的字符或数字&#xff1f;这些令人抓狂的 CAPTCHA 是为了确保你是人类而不是机器人&#xff0c;但它们也给真正的用户带来了头痛。那么&#xff0c;有没有快速解决这些 CAPTCHA 图像的方法&#xff…

Vue-Ci搭建项目

项目创建 vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义 好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个 骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速; 主要的功能 ● 统一的目录结构 ● 本地调试 热部署 ● 单元…

华为OD机试 - 石头剪刀布游戏(Java 2024 D卷 200分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

设备驱动框架之LED

文章目录 前言一、什么是驱动框架二、使用步骤1.注册LED设备2.卸载LED设备3.内核中申请内存4.container_of5.platform_get_drvdata 和 platform_set_drvdata6.module_platform_driver 三、驱动示例总结 前言 为了尽量降低驱动开发者难度以及接口标准化&#xff0c;就出现了设备…

基于weixin小程序智慧物业系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;员工管理&#xff0c;房屋管理&#xff0c;缴费管理&#xff0c;车位管理&#xff0c;报修管理 工作人员账号功能包括&#xff1a;系统首页&#xff0c;维修…

数据库原理之数据库基本概念

目录 前言 基本概念 数据库完整性 前言 今天我们来看看数据库的基本概念&#xff0c;帮助大家对数据库有一点点最基本的了解 基本概念 4个基本概念 数据data&#xff1a;描述事物的符号&#xff0c;数据库中存储的基本对象。 数据库Database&#xff1a;长期存储在计算机…

基于JSP技术的旅游网站系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;B/S架构&#xff0c;JSP技术 工具&#xff1a;Eclipse&#xff0c;Tomcat…

PostMan动态设置全局变量

1. 前言 在开发过程中调试接口&#xff0c;一般都会使用PostMan。 其中有几个变量可能是好几个接口共用的&#xff0c;就会出现频繁手动复制(ctrlc)、粘贴(ctrlv)的情况。 这个过程得非常留意&#xff0c;生怕复制错了&#xff0c;或删减了某些东西&#xff0c;导致接口报错。…

Open3D 显示带有强度的点云数据

目录 一、概述 1.1强度信息的意义 1.2应用场景 二、代码实现 三、实现效果 一、概述 在点云数据中&#xff0c;强度&#xff08;Intensity&#xff09;指的是激光雷达传感器在扫描环境时&#xff0c;每个点返回的反射强度值。这些强度值代表了激光脉冲返回的能量&#xff…

Houdini 通过wedge来做模拟参数对比 (PDG TOP)

我们的设定如下例子 这是个简单的布料悬挂的例子。上方两个角分别被固定住了&#xff0c;然后在distance约束下布料下垂。 我们现在的目的是想要对比不同的streach stiffness对模拟的影响。 第一步&#xff1a;找到stiffness参数&#xff0c;右键expression->edit expre…

基于Pytorch框架的深度学习ConvNext神经网络宠物猫识别分类系统源码

第一步&#xff1a;准备数据 12种宠物猫类数据&#xff1a;self.class_indict ["阿比西尼猫", "豹猫", "伯曼猫", "孟买猫", "英国短毛猫", "埃及猫", "缅因猫", "波斯猫", "布偶猫&q…

【uni-app学习手札】

uni-app&#xff08;vue3&#xff09;编写微信小程序 编写uni-app不必拘泥于HBuilder-X编辑器&#xff0c;可用vscode进行编写&#xff0c;在《微信开发者工具》中进行热加载预览&#xff0c; 主要记录使用uni-app过程中自我备忘一些api跟语法&#xff0c;方便以后编写查找使用…

论文翻译 | ITER-RETGEN:利用迭代检索生成协同增强检索增强的大型语言模型

论文地址&#xff1a;Enhancing Retrieval-Augmented Large Language Models with Iterative Retrieval-Generation Synergy 摘要 检索增强生成由于有望解决包括过时知识和幻觉在内的大型语言模型的局限性而引起广泛关注。然而&#xff0c;检索器很难捕捉相关性&#xff0c;尤…

开发板以电脑为跳板连接互联网

标题 开发板以电脑为跳板连接互联网网络共享方式桥接方式 开发板以电脑为跳板连接互联网 分享下用网线直连电脑的开发板如何以电脑为跳板连接互联网的两个方法。 网络共享方式桥接方式 补充下&#xff0c;我的电脑连接的是无线网络&#xff0c;开发板和电脑是用网线进行连接的…

ComfyUI如何使用Face Detailer和ComfyI2I插件进行修脸

一.插件ComfyI2I使用 1.ComfyUI中调用Mask Ops 2.创建蒙版插件BBOX Detector(combined) 3.创建UltralyticsDetectorProvider 里面包含多个模型其中bbox/face_yolov8m.pt是针对脸部修复 4.组合后测试脸部蒙版识别是否正常 5.测试正常后调出Inpaint Segments&#xff0c;放大…