echarts实现3D柱状图（视觉层面）根据博主改编
https://blog.csdn.net/weixin_57798646/article/details/131067725
这是原贴
在这个基础上我需要实现
一根柱子
代码如下
<!DOCTYPE html>
<html lang="en" style="height: 100%"><head><meta charset="utf8">
</head><body style="height: 100%; margin: 0"><div id="litiBar1" style="height:100%;background-color: #000;"></div><script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script><script type="text/javascript">//组织数据let setData = function (data, constData, showData) {data.filter(function (item) {if (item) {constData.push(1);showData.push(item);} else {constData.push(0);showData.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});}//组织颜色let setColor = function (colorArr) {let color = {type: "linear",x: 0,x2: 1,y: 0,y2: 0,/* 此处决定阴暗面 若为横向柱状图则x,y轴调换x: 0,x2: 0,y: 0,y2: 1, */colorStops: [{offset: 0,color: colorArr[0],},{offset: 0.5,color: colorArr[0],},{offset: 0.5,color: colorArr[1],},{offset: 1,color: colorArr[1],},],};return color}var vehicle = [45, 25, 48, 62, 10]var controlBall = [0, 0, 0, 0, 0]var barWidth = 220//顶部组件的宽度;//上边的宽度var constData1 = [];var showData1 = [];var constData2 = [];var showData2 = [];setData(vehicle, constData1, showData1)var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];// var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];var color1 = setColor(colorArr1)// var color2 = setColor(colorArr2)var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {top: '15%',bottom: '15%'},xAxis: {type: 'category',axisLabel: {color: '#A2BCC9',fontSize: 16},offset: 30,axisLine: {show: false,},axisTick: {show: false},data: ['0-18', '18-30', '30-50', '50-65', '>65']},yAxis: {type: 'value',axisLabel: {show: false},axisLine: {show: false,},splitLine: {show: false,}},series: [{z: 1,type: 'bar',name: '人员数量',barGap: "15%", //相邻柱子间距itemStyle: {borderRadius: [0, 0, 0, 0],//柱子四周圆角color: color1//柱子左右颜色（深，浅）},data: vehicle //Y轴上的高度},// ---------------------------------------------{z: 2,name: '人员数量',type: "pictorialBar",data: constData1,//此数据对应底部组件symbol: "diamond",//底部组件形状，不写默认为椭圆symbolOffset: [0, 15],//与柱子的偏移角度[左边偏移，上下偏移]symbolSize: [210, 30],//底面[宽，高]itemStyle: {normal: {color: color1//底面左右颜色（深，浅）},},tooltip: {show: false,},},{z: 3,name: '人员数量',label: { // 在这里明确设置 label 配置show: true,position: 'top',color: '#DFEEFA',distance: 20,textStyle: {fontSize: 16 // 设置图例的字体大小},},type: "pictorialBar",symbolPosition: "end",data: showData1,//此数据对应顶部组件symbol: "diamond",symbolOffset: [0, -10],//顶部组件的左边偏移数值和右边偏移数值symbolSize: [barWidth - 10, (20 * (barWidth - 4)) / barWidth],//顶部组件[宽，高]itemStyle: {normal: {/* borderColor: colorArr1[2],borderWidth: 2, */ //加上棱角分明color: colorArr1[2]},},tooltip: {show: false,},},]}let chart1 = echarts.init(document.querySelector("#litiBar1"), null, {renderer: 'canvas',useDirtyRect: false});var app = {};// chart1.setOption(option)if (option && typeof option === 'object') {chart1.setOption(option);}window.addEventListener('resize', chart1.resize);</script>
</body></html>相关文章：
echarts实现3D柱状图（视觉层面）根据博主改编
https://blog.csdn.net/weixin_57798646/article/details/131067725 这是原贴 在这个基础上我需要实现 一根柱子 代码如下 <!DOCTYPE html> <html lang"en" style"height: 100%"><head><meta charset"utf8"> </hea…...
【一篇文章理解Java中多级缓存的设计与实现】
文章目录 一.什么是多级缓存？1.本地缓存2.远程缓存3.缓存层级4.加载策略 二.适合/不适合的业务场景1.适合的业务场景2.不适合的业务场景 三.Redis与Caffine的对比1. 序列化2. 进程关系 四.各本地缓存性能测试对比报告(官方)五.本地缓存Caffine如何使用1. 引入maven依…...
OpenSource - 开源WAF_SamWaf
文章目录 PreSafeLine VS SamWaf开发初衷软件介绍架构界面主要功能 使用说明下载最新版本快速启动WindowsLinuxDocker 启动访问升级指南自动升级手动升级 在线文档 代码相关代码托管介绍和编译已测试支持的平台测试效果 安全策略问题反馈许可证书贡献代码 Pre Nginx - 集成Mod…...
旅游避坑指南
1.火车站旁白的小摊贩，还有周边的小饭店百分之百是黑店，不仅难吃要死而且巨黑！！！ 可以地图上搜索附近的大型商超，例如泰安市的银座商超，里面的东西不仅好吃而且价格透明，还有很多当…...
矩阵系统源码搭建的具体步骤，支持oem，源码搭建
一、前期准备 明确需求 确定矩阵系统的具体用途，例如是用于社交媒体管理、电商营销还是其他领域。梳理所需的功能模块，如多账号管理、内容发布、数据分析等。 技术选型 选择适合的编程语言，如 Python、Java、Node.js 等。确定数据库类型&…...
正则表达式调试工具实战
正则表达式调试工具实战 1、新建工程QWidget工程工程名RegexTool 如果QT不会配置，请参考我的博客，QT配置 Widget.cpp 默认内容如下 2、主界面设计 三行两列，每行采用HBoxLayout作为行布局控件，内部一个Lable控件和一个TextEdit控件，采用VBoxLayout 控件包裹三个HBoxLa…...
SQL:函数以及约束
目录 介绍 函数 字符串函数 数值函数 日期函数 流程函数 约束 总结 介绍 说到函数我们都不陌生,在C,C,java等语言中都有库函数,我们在平时也是经常使用,函数就是一段代码,我们既可以自定义实现,又可以使用库里内置的函数;从来更加简洁方便的完成业务;同样的在SQL中也有…...
在Linux中将设备驱动的地址映射到用户空间
本期主题： MMU的简单介绍，以及如何实现设备地址映射到用户空间 往期链接： Linux内核链表零长度数组的使用inline的作用嵌入式C基础——ARRAY_SIZE使用以及踩坑分析Linux下如何操作寄存器（用户空间、内核空间方法讲解）…...
电脑自带dll修复在哪里，dll丢失的6种解决方法总结
在现代科技日新月异的时代，电脑已经成为我们生活中不可或缺的一部分。然而，在使用电脑的过程中，我们常常会遇到一些常见的问题，其中之一就是dll文件丢失或损坏。当这些dll文件丢失或损坏时，可能会导致某些应用程序无法…...
k8s基于nfs创建storageClass
首先安装nfs #服务端安装 yum install -y nfs-utils rpcbind #客户端安装 yum install -y nfs-utils #启动服务 并设置开启启动 systemctl start rpcbind && systemctl enable rpcbind systemctl start nfs && systemctl enable nfs #创建共享目录 mkdir -p /…...
Chrome无法拖入加载.crx扩展文件(以IDM为例)
问题原因：新版本的Chrome浏览器已不支持加载.crx文件 解决办法：将.crx文件压缩为.zip文件，解压缩后再加载到Chrome中 以IDM的.crx文件作为示例； IDM的.crx文件位于C:\Program Files (x86)\Internet Download Manager; 将IDMGCE…...
数字教学时代：构建高效在线帮助中心的重要性
在数字化教学日益普及的今天，教育领域正经历着前所未有的变革。随着在线课程、虚拟教室、智能学习平台等数字化工具的广泛应用，教育资源的获取方式和学习模式发生了深刻变化。然而，这种变革也带来了新的挑战，其中之一便是如何确保…...
828华为云征文｜华为云弹性云服务器FlexusX实例下的Nginx性能测试
本文写的是华为云弹性云服务器FlexusX实例下的Nginx性能测试 目录 一、华为云弹性云服务器FlexusX实例简介二、测试环境三、测试工具四、测试方法五、测试结果 下面是华为云弹性云服务器FlexusX实例下的Nginx性能测试。 一、华为云弹性云服务器FlexusX实例简介 华为云弹性云服…...
知识图谱入门——2：技术体系基本概念：知识表示与建模、知识抽取与挖掘、知识存储与融合、知识推理与检索
知识图谱是通过构建“实体”和“关系”来描述世界的信息网络，它不仅是数据的存储方式，还可以支持推理与查询，帮助系统更好地理解、整合和利用数据。 文章目录 1. 知识表示与建模2. 知识抽取与挖掘3. 知识存储与融合4. 知识推理与检索总结 1.…...
【不看会后悔系列】排序之——文件归并【史上最全详解】~
文章目录 前言一、何为文件归并？二、文件归并思路分析三、创造多数据文件四、前置准备——堆排序五、两个文件写入到第三个文件六、读 N 个数据返回给文件,并返回读到数据的个数七、文件归并八、文件归并完整代码总结1. 运行代码2. 运行截图 总结 前言 学习了归并排…...
安全点的应用场景及其原理详解
引言 在Java虚拟机（JVM）运行的过程中，有些时刻，系统需要暂停所有正在运行的线程，以执行某些全局操作或确保数据的一致性。这些暂停线程的时刻被称为**“安全点”**（Safepoint）。尽管安全点最广…...
计算机各专业2025毕业设计选题推荐【各专业 | 最新】
计算机各专业2025毕业设计选题推荐 Java、Python、Vue、PHP、小程序、安卓、大数据、爬虫、可视化、机器学习、深度学习 文末有联系方式~~~ 1.Java 基于Java的在线购物系统设计与实现Java开发的图书管理系统基于Spring Boot的社交媒体平台Java实现的移动健康应用在线学习平…...
【Python报错已解决】IndexError: index 0 is out of bounds for axis 1 with size 0
🎬 鸽芷咕：个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 专栏介绍 在软件开发和日常使用中，BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...
SpringGateway（网关）微服务
一.启动nacos 1.查看linux的nacos是否启动 docker ps2.查看是否安装了nacos 前面是你的版本，后面的names是你自己的，我们下面要启动的就是这里的名字。 docker ps -a3.启动nacos并查看是否启动成功 二.创建网关项目 1.创建idea的maven项目 2.向pom.x…...
jQuery面试题：（第三天）
8.你在jQuery中使用过哪些插入节点的方法，它们的区别是什么？ 答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore() 内添加 1.append()在文档内添加元素 2.appendTo()把匹配的元素添加到对象里 3.prepend()…...
聊聊国内首台重大技术装备（2）
上次，介绍了《首台（套）重大技术装备推广应用指导目录（2024年版）》中介绍的硅外延炉，湿法清洗机，氧化炉，见文章： 《聊聊国内首台重大技术装备（1）》…...
python 实现rayleigh quotient瑞利商算法
rayleigh quotient瑞利商算法介绍 瑞利商（Rayleigh Quotient）算法在多个领域，如线性代数、计算机视觉和机器学习等，都有重要的应用。瑞利商定义为函数 R ( A , x ) ( x H A x ) / ( x H x ) R(A, x) (x^H Ax) / (x^H x) R(A,x)…...
Java Web应用升级故障案例解析
在一次Java Web应用程序的优化升级过程中，从Tomcat 7.0.109版本升级至8.5.93版本后，尽管在预发布环境中验证无误，但在灰度环境中却发现了一个令人困惑的问题：新日志记录神秘“失踪”。本文深入探讨了这一问题的排查与解决过程&…...
Java类和对象、自定义包、static、代码块、方法重写
目录 1.类和对象 2.this指针 3.对象的构造和初始化 3.1默认初始化 3.2就地初始化 3.3构造初始化 3.4IDEA快速填充 3.5使用this简化 3.6初始化的总结 4.包的引入 4.1包的概念 4.2导入包中的类 4.3自定义包 5.static修饰 6.代码块的划分 7.方法重写 1.类和对象 使…...
【系统代码】招投标采购一体化管理系统，JAVA+vue
前言： 随着互联网和数字技术的不断发展，企业采购管理逐渐走向数字化和智能化。数字化采购平台作为企业采购管理的新模式，能够提高采购效率、降低采购成本、优化供应商合作效率，已成为企业实现效益提升的关键手段。系统获取在文末…...
基于yolov8深度学习的120种犬类检测与识别系统python源码+onnx模型+评估指标曲线+精美GUI界面目标检测狗类检测犬类识别系统
【算法介绍】 基于YOLOv8深度学习的120种犬类检测与识别系统是一款功能强大的工具，该系统利用YOLOv8深度学习框架，通过21583张图片的训练，实现了对120种犬类的精准检测与识别。 该系统基于Python与PyQt5开发，具有简洁的UI界面&a…...
UNI-APP_iOS开发技巧之：跳转到TestFlight或者App Store
有的时候我们的应用可能需要上TestFlight或者App Store，更新升级就需要跳到TestFlight里面。方法如下： 跳转到TestFlight: itms-beta://itunes.apple.com/app/你的AppID 跳转到AppStore: itms-apps://itunes.apple.com/app/你的AppIDhttps://airp…...
基于SSM+Vue技术的定制式音乐资讯平台
文未可获取一份本项目的java源码和数据库参考。 一、选题的背景与意义： 随着个人计算机的普及和互联网技术的日渐成熟，网络正逐渐成为人们获取信息及消费的主要渠道。然而在当前这个信息时代，网络中的信息种类和数量呈现爆炸性增长的趋势&a…...
Spring依赖注入和注解驱动详解和案例示范
在 Spring 框架中，依赖注入（Dependency Injection, DI）和注解驱动（Annotation-Driven）是其核心机制，它们为 Spring 应用提供了灵活性和可扩展性。依赖注入简化了对象间的依赖管理，而注解驱动则通…...
网络通信——OSPF协议（基础篇）
这里基础是因为没有讲解OSPF中的具体算法过程，以及其中很多小细节。后续会更新。 目录 一.OSPF的基础信息 二.认识OSPF中的Router ID 三.OSPF中的三张表 四.OSPF中的度量方法（计算开销值） 五. OSPF选举DR和BDR（就是这个区域…...
wordpress 设置数据库/个人免费开发app
文档类1 相关类CDocument类-父类是CCmdTarget类，所以，文档类也可以处理菜单等命令消息。作用保存和管理数据。注意事项：如何解决断言错误2 在视图中显示文档中的数据2.1 CView::OnInitialUpdate作用初始化视图，在附加文档之后&…...
网站建设详细方案/大一html网页制作作业简单
上网查了一下，官方貌似没有提供flash builder 4.5的下载，但是既然是基于eclipse的，那么应该能被安装在linux下。 首先，安装eclipse sudo apt-get install eclipse 然后，下载eclipse的flash builder 插件 最后就是安装了…...
云存储wordpress/google搜索
CSS背景属性 属性描述值IEFNW3Cbackground简写属性，作用是将背景属性设置在一个声明中。 background-color background-image background-repeat background-attachment background-position 4161background-attachment设置是否背景图像是固定的或随页面其余部分滚动…...
汕头 做网站/百度官方客服电话
原标题：国科大生物试卷玩诗意走红网络《蛋白质工程原理》试卷节选孤山叶落春梦在，杏花疏影笛横吹。下列哪种氨基酸易在肽链中形成拐角：( )A、缬氨酸 B、酪氨酸 C、脯氨酸 D、苏氨酸 E、色氨酸我自开来我自落，有人没人香四方。唯有…...
lol做直播网站/外链价格
...
平面广告设计作品集/网站seo是什么意思
需求:做这个项目之前需要用到一个java的webservice接口,首先想到的第一种方法就是添加服务引用了.但是这样的话会有一个config文件 生成的dll必须要读取config文件,config文件放到同一目录也不行的,需要放到另一个工具的节点中才能被另外一个工具读取,不幸的是另外一个工具不能…...