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,一经查实,立即删除!

相关文章

通过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…

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; …

前端组件化实践: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;虚拟机可能无法找到完整的差异…

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

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

第2章 矩阵

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

通过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…

CH03_布局

第3章&#xff1a;布局 本章目标 理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 ​ WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面&#xff0c;需要在窗口上放置一个容器&#x…

【性能优化】在大批量数据下使用 HTML+CSS实现走马灯,防止页面卡顿

切换效果 页面结构变化 1.需求背景 项目首页存有一个小的轮播模块,保密原因大概只能这么展示,左侧图片右侧文字,后端一次性返回几百条数据(开发环境下,生产环境只会更多).无法使用分页解决,前端需要懒加载防止页面卡顿 写个小demo演示,如下 2.解决思路 获取到数据后,取第一…

开源模型应用落地-FastAPI-助力模型交互-进阶篇(四)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

科技赋能,智慧粮仓视频综合管理方案助力粮食安全

一、背景需求 随着科技的快速发展&#xff0c;智慧化、智能化管理已成为各行各业的重要发展方向。粮食仓储作为国家粮食安全战略的重要组成部分&#xff0c;其管理的科学性和智能化水平直接关系到粮食的存储安全、品质保障和运营效率。 因此&#xff0c;TSINGSEE青犀提出一套…

Linux文件和目录常用命令

1.操作命令 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 >> 管道 | 1.1 终端实用技巧 1>自动补全 在敲出 文件/目录/命令 的前几个字母之后&#xff0c;按下…

pdf怎么压缩的小一点?PDF压缩变小的6种方法(2024全新)

pdf怎么压缩的小一点&#xff1f;首先&#xff0c;PDF文件可以进行压缩。职场文档传阅还是比较建议PDF压缩&#xff0c;PDF文件可以无障碍访问&#xff0c;保持原始文本、图像和表格&#xff0c;无需担心展示效果差异等等优势&#xff0c;成为我们日常工作中不可或缺的一部分。…

阿里云盾占用资源的问题AliYunDun,AliYunDunUpdate

目录 1.关闭AliYunDunUpdate&#xff0c;AliYunDun&#xff0c;AliYunDunMonitor。 2.发现报错如下 3.打开阿里云安全中心控制台 4.成功解决 2.开启云盾命令 “如果您在解决类似问题时也遇到了困难&#xff0c;希望我的经验分享对您有所帮助。如果您有任何疑问或者想分享您…

哪种SSL证书可以快速签发保护http安全访问?

用户访问网站&#xff0c;经常会遇到访问http网页时&#xff0c;提示网站不安全或者不是私密连接的提示&#xff0c;因为http是使用明文传输&#xff0c;数据传输中可能被篡改&#xff0c;数据不被保护&#xff0c;通常需要SSL证书来给数据加密。 SSL证书的签发速度&#xff0…