echarts实现3d柱状效果

代码如下,单个的调第一个方法,多个柱状的调第二个方法,具体情况修改参数或者二次开发即可

//3d柱状图
export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=[1,2,3], colorObj:IBaseObject={topStartColor:'rgba(236, 191, 55)',topEndColor:'rgba(236, 191, 55)',startColor:'rgba(71, 57, 30)',endColor:'rgba(236, 191, 55)',bottomStartColor:'rgba(236, 191, 55)',bottomEndColor:'rgba(236, 191, 55)'
}) {return {tooltip: {trigger: "axis",axisPointer: {type: 'shadow'},backgroundColor:'rgba(255,255,255,.1)',borderColor:'rgba(40, 60, 74)',textStyle:{align:'left',fontSize: 10,//字体大小color:'#fff',},formatter: function (params) {var str = params[0].axisValue + ":" +params[0].value;return str;},},grid: {left: "3%", //图表距边框的距离right: "3%",top: "15%",bottom: "5%",containLabel: true,},xAxis: {data: xAxisData,axisTick: {show: false,},axisLabel: {color: '#cae2ee' // 设置Y轴文字颜色为蓝色}},yAxis: {type: 'value',splitLine: {show: 'ture', // 是否显示y轴分割线interval: 'auto', // 坐标轴分隔线的显示间隔lineStyle: {color: ['rgba(232,236,239,.2)'], // 分隔线颜色。width: 1, // 分隔线线宽type: 'dashed', // 线的类型opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。}},axisLabel: {color: '#cae2ee' // 设置Y轴文字颜色为蓝色}},series: [// 数据低下的圆片{name: '',type: 'pictorialBar',symbol: 'diamond',symbolSize: [16,10], // 宽,高symbolOffset:[0,2],// 左 上symbolPosition: 'start',z: 0,itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorObj.bottomStartColor },{ offset: 1, color: colorObj.bottomEndColor }]);}},data: data},// 数据的柱状图{name: '',type: 'bar',barWidth: 8, // 柱条的宽度,不设时自适应。showSymbol: false,hoverAnimation: false,data: data,itemStyle: {// normal: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorObj.startColor },{ offset: 1, color: colorObj.endColor }]);},borderRadius:[1,0,0,100],// }},},{name: '',type: 'bar',barWidth: 8, // 柱条的宽度,不设时自适应。barGap: '0', // 不同系列的柱间距离data: data,itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorObj.startColor },{ offset: 1, color: colorObj.endColor }]);},borderWidth: 0.1,borderColor:'#B0E1FF',borderRadius:[0,2,100,0]},},// 数据顶部的样式{name: '',type: 'pictorialBar',symbol: 'diamond',symbolSize: [16,9],symbolOffset:[0,-4],symbolPosition: 'end',z: 3,itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: colorObj.topStartColor },{ offset: 1, color: colorObj.topEndColor }]);},label: {show: true, // 开启显示position: 'top', // 在上方显示textStyle: {fontSize: '12',color: '#B0E1FF'},offset:[0,-2]}},data: data},]};
}
export function getEcharts3DBar1 (obj) {//obj的格式/*obj:{xAxisData: ['2024-07-12','2024-07-13','2024-07-14'],data:{data1:{//劳务人员name:'劳务人员',offset:[-8,-2],colorObj: {topStartColor:'rgba(236, 191, 55)',topEndColor:'rgba(236, 191, 55)',startColor:'rgba(71, 57, 30)',endColor:'rgba(236, 191, 55)',bottomStartColor:'rgba(236, 191, 55)',bottomEndColor:'rgba(236, 191, 55)'},data:[0,0,0],},data2:{//岗位人员name:'岗位人员',offset:[8,-2],colorObj: {topStartColor:'rgba(21, 205, 217)',topEndColor:'rgba(10, 72, 140)',startColor:'rgba(10, 72, 140)',endColor:'rgba(53, 152, 212)',bottomStartColor:'rgba(53, 152, 212)',bottomEndColor:'rgba(53, 152, 212)'},data:[0,0,0],},}}*/let series = [],legendData=[],circle1=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data1.colorObj.startColor}`,circle2=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data2.colorObj.startColor}`for(let key in obj.data){legendData.push({name: obj.data[key].name,icon: 'roundRect',itemStyle: {color: obj.data[key].colorObj.startColor}})series.push( // 数据底部的圆片{name: obj.data[key].name,type: 'pictorialBar',symbol: 'diamond',symbolSize: [16,10], // 宽,高symbolOffset:obj.data[key].offset,// 左 上symbolPosition: 'start',z: 0,itemStyle: {color: (val) => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: val.data?obj.data[key].colorObj.bottomStartColor:'transparent' },{ offset: 1, color: val.data?obj.data[key].colorObj.bottomEndColor:'transparent' }]);}},data: obj.data[key].data},// 数据的柱状图{name: obj.data[key].name,type: 'bar',barWidth: 8, // 柱条的宽度,不设时自适应。showSymbol: false,hoverAnimation: false,symbolOffset:obj.data[key].offset,// 左 上data: obj.data[key].data,itemStyle: {color: (val) => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color:val.data?obj.data[key].colorObj.startColor:'transparent' },{ offset: 1, color:val.data?obj.data[key].colorObj.endColor:'transparent' }]);},// borderRadius:[1,0,0,100],},},{name: obj.data[key].name,type: 'bar',barWidth: 8, // 柱条的宽度,不设时自适应。symbolOffset:obj.data[key].offset,// 左 上barGap: '0', // 不同系列的柱间距离data: obj.data[key].data,itemStyle: {color: (val) => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: val.data?obj.data[key].colorObj.startColor:'transparent' },{ offset: 1, color: val.data?obj.data[key].colorObj.endColor:'transparent' }]);},borderWidth: 0.1,borderColor:'#B0E1FF',// barBorderRadius:[0,2,100,0]},},// 数据顶部的样式{name: obj.data[key].name,type: 'pictorialBar',symbol: 'diamond',symbolSize: [16,9],symbolOffset:obj.data[key].offset,// 左 上symbolPosition: 'end',z: 3,itemStyle: {color: (val) => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: val.data?obj.data[key].colorObj.topStartColor:'transparent' },{ offset: 1, color: val.data?obj.data[key].colorObj.topEndColor:'transparent' }]);},label: {show: true, // 开启显示position: 'top', // 在上方显示textStyle: {fontSize: '12',color: '#B0E1FF'},offset:[0,-2]}},data: obj.data[key].data},)}return {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},backgroundColor:'rgba(255,255,255,.1)',borderColor:'rgba(40, 60, 74)',textStyle:{align:'left',fontSize: 10,//字体大小color:'#fff',},formatter: function (params) {var str = "<div>"+params[0].axisValue+"</div>";str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params[0].seriesName + ":" +params[0].value+"</div>";str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params[5].seriesName + ":" + params[5].value+"</div>";return str;},},grid: {left: "3%", //图表距边框的距离right: "3%",top: "15%",bottom: "5%",containLabel: true,},xAxis: {data: obj.xAxisData,axisTick: {show: false,},axisLabel: {color: '#cae2ee' // 设置Y轴文字颜色为蓝色}},yAxis: {type: 'value',splitLine: {show: 'ture', // 是否显示y轴分割线interval: 'auto', // 坐标轴分隔线的显示间隔lineStyle: {color: ['rgba(232,236,239,.2)'], // 分隔线颜色。width: 1, // 分隔线线宽type: 'dashed', // 线的类型opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。}},axisLabel: {color: '#cae2ee' // 设置Y轴文字颜色为蓝色}},legend:{y: 'top',icon:'rectangle',itemStyle:{// color:[colorObj.topStartColor,colorObj1.topStartColor]},textStyle:{color:'#fff'},data:legendData,},series:series};
}

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

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

相关文章

Go的入门

一、GO简介 Go语言&#xff08;也叫 Golang&#xff09;是Google开发的开源编程语言。 1. 语言特性 Go 语法简洁&#xff0c;上手容易&#xff0c;快速编译&#xff0c;支持跨平台开发&#xff0c;自动垃圾回收机制&#xff0c;天生的并发特性&#xff0c;更好地利用大量的分…

服务器相关总结

文章目录 conda 安装镜像源总结&#xff08;手动加&#xff09;创建环境安装pytorch安装transformers conda 安装 查看conda版本 conda --version查看当前conda的配置文件位置 conda config --show编辑配置文件,默认路径是~/condarc vim ~/.condarc 在channels字段添加新的…

通过albumentation对目标检测进行数据增强(简单直接)

albumentation官方文档看不懂&#xff1f;xml文件不知道如何操作&#xff1f;下面只需要修改部分代码即可上手使用 要使用这个方法之前需要按照albumentation这个库还有一些辅助库,自己看着来安装就行 pip install albumentation pip install opencv-python pip install json…

MKS流量计软件MFC通讯驱动使用于C和P系列MFC控制USB接口W10系统

MKS流量计软件MFC通讯驱动使用于C和P系列MFC控制USB接口W10系统

使用VuePress-Reco快速搭建博客(保姆级)

简介&#xff1a;VuePress-Reco 一款简洁的 vuepress 博客 & 文档 主题&#xff0c;可以自由搭建自己的风格&#xff0c;比较方便简洁。 链接&#xff1a;vuepress-reco 准备环境&#xff1a; Node.Js >20.5.0&#xff0c;Npm > 10.8.2 OR Yarn > 1.22.19 注&am…

Android C++系列:Linux信号(二)

PCB的信号集 如果在进程解除对某信号的阻塞之前这种信号产生过多次,将如何处理?POSIX.1允 许系统递送该信号一次或多次。Linux是这样实现的:常规信号在递达之前产生多次只 计一次,而实时信号在递达之前产生多次可以依次放在一个队列里。本文不讨论实时信 号。每个信号只有一…

Kafka介绍及Go操作kafka详解

文章目录 Kafka介绍及Go操作kafka详解项目背景解决方案面临的问题业界方案ELKELK方案的问题日志收集系统架构设计架构设计组件介绍将学到的技能消息队列的通信模型点对点模式 queue发布/订阅 topicKafka介绍Kafka的架构图工作流程选择partition的原则ACK应答机制Topic和数据日志…

0718,TCP协议,三次握手,四次挥手

目录 上课喵&#xff1a; TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;的状态迁移图 TCP连接的状态迁移图 状态迁移说明&#xff1a; 注意&#xff1a; big_htonl.c 字节序转换 addr.c IP地址的转换 作业喵&#xff1a; …

django命令

Django 的命令行工具 django-admin&#xff08;或 manage.py 中的 manage 函数&#xff09;提供了一系列的命令&#xff0c;用于执行各种管理任务。 1. check: 检查项目的 full 路径&#xff0c;确保没有错误配置。 2. compilemessages: 编译 .po 文件中的翻译&#xff0c;生…

Python面试整理-Python中的控制流语句

在Python中,控制流语句用于根据特定的条件或逻辑来控制程序的执行流程。主要的控制流语句包括条件判断(if)、循环(for 和 while)以及其他辅助语句如 break, continue, 和 pass。下面详细介绍这些控制流语句: 1. 条件判断(if 语句) if 语句用于根据一个或多个条件来执行…

前端组件化实践:Vue自定义加载Loading组件的设计与实现

摘要 随着前端技术的飞速发展&#xff0c;组件化开发已成为提高开发效率、降低维护成本的重要方法。本文介绍了前端Vue自定义加载Loading组件的设计思路与实现过程&#xff0c;该组件通过设置gif动画实现加载效果&#xff0c;可广泛应用于页面请求加载场景。通过该组件的实践&…

2024年度上半年中国汽车保值率报告

来源&#xff1a;中国汽车流通协会&精真估 近期历史回顾&#xff1a; 2024上半年房地产企业数智化转型报告.pdf 2024国产院线电影路演数据洞察报告.pdf 空间数据智能大模型研究-2024年中国空间数据智能战略发展白皮书.pdf 2024年全球资产管理报告 2024年中型律师事务所的法…

VMware中Ubuntu磁盘空间的清理

最近发现Ubuntu占用空间过大&#xff0c;在网上找了一些方法&#xff0c;在这里总结一下。 1.删除快照 把不需要的快照删除&#xff0c;但要注意删除快照可能会影响到后续的快照链。每个快照依赖于前面的快照。如果删除一个中间快照&#xff0c;虚拟机可能无法找到完整的差异…

深入解析Linux文件权限管理:掌握`chmod`和`chown`命令

深入解析Linux文件权限管理&#xff1a;掌握chmod和chown命令 深入解析Linux文件权限管理&#xff1a;掌握chmod和chown命令 大纲&#xff1a;摘要&#xff1a;内容&#xff1a; 1. 引言2. 理解文件权限3. 使用chmod命令4. 使用chown命令5. 综合应用6. 常见问题与解决方案7. 结…

零基础入门:创建一个简单的Python爬虫管理系统

摘要&#xff1a; 本文将手把手教你&#xff0c;从零开始构建一个简易的Python爬虫管理系统&#xff0c;无需编程基础&#xff0c;轻松掌握数据抓取技巧。通过实战演练&#xff0c;你将学会设置项目、编写基本爬虫代码、管理爬取任务与数据&#xff0c;为个人研究或企业需求奠…

第2章 矩阵

A 乘以此列向量&#xff0c;1的位置依次往下&#xff0c;所以A的列向量全为0 B C、D 取BE 要统一

面经学习(厦门安全狗实习)

个人评价 安全狗主要还是做安全的&#xff0c;所以java开发约等于小厂。后端开发主要使用的技术栈技术sshjsp。 技术可谓是先当的古老&#xff0c;本次面试内容主要以项目为主。也是首次收到面试官的夸奖&#xff0c;面试下来也是非常开心的。 介绍一下实习项目吧&#xff1…

通过libx246 libfaac转换推送RTMP音视频直播流

一、RTMP简介及rtmplib库&#xff1a; RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写&#xff0c;它是由Adobe公司提出的一种应用层的协议&#xff0c;用来解决多媒体数据传输流的多路复用&#xff08;Multiplexing&#xff09;和分包&#xff08;packetizing…

【体外诊断】ARM/X86+FPGA嵌入式计算机在免疫分析设备中的应用

体外诊断 信迈提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板&#xff0c;以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显&#xff0c;提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口&#xff0c;扩展性强&#xf…

Swagger生成Api文档的增强解决方案--knife4j

springboot版本号&#xff1a;2.7.3 knife4j:3.0.2 使用步骤 导入 knife4j 的maven坐标 在pom.xml中添加依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2…