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

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

相关文章

ubuntu 更新源

前言 实现一键替换在线源 一键更新源 ubuntu 全球镜像站以下支持现有ubuntu 20&#xff0c;22&#xff0c;24 echo "Delete the default source" rm -rf /etc/apt/sources.listecho "Build a new source" cat <<EOF>>/etc/apt/sources.li…

Kafka介绍及Go操作kafka详解

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

Unity: TextMeshPro生成中文字体(附3.5k,7k,2w常用字集)

免费常用3千5&#xff0c;7千字&#xff0c;2万字中文字体包 1.选择Window/TextMeshPro/Font Asset Creator 注&#xff1a;准备字体&#xff1a;从字体库或其他来源获取中文字体文件&#xff0c;通常为.ttf、.otf或.ttc格式。最简单的方式是从Windows系统文件的Font文件夹里…

Kafka(四) Consumer消费者

一&#xff0c;基础知识 1&#xff0c;消费者与消费组 每个消费者都有对应的消费组&#xff0c;不同消费组之间互不影响。 Partition的消息只能被一个消费组中的一个消费者所消费&#xff0c; 但Partition也可能被再平衡分配给新的消费者。 一个Topic的不同Partition会根据分配…

Linux云计算 |【第一阶段】SERVICES-DAY4

主要内容&#xff1a; DHCP概述、PXE批量装机、配置PXE引导、Kickstart自动应答、Cobbler装机平台 一、DHCP服务概述及原理 DHCP动态主机配置协议&#xff08;Dynamic Host Configuration Protocol&#xff09;&#xff0c;由IETF&#xff08;Internet网络工程师任务小组&…

【JavaScript 算法】最长公共子序列:字符串问题的经典解法

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理状态转移方程初始条件 二、算法实现注释说明&#xff1a; 三、应用场景四、总结 最长公共子序列&#xff08;Longest Common Subsequence&#xff0c;LCS&#xff09;是字符串处理中的经典问题。给定两个字符串…

[算法题]买卖股票的最好时机(一)

题目链接: 买卖股票的最好时机(一) 利用贪心, 并且遍历求解, 从前往后遍历, 每遍历到一个位置就在该天卖出, 利用一个变量保存在第 i 天卖出时, 在区间 [0, i-1] 中的最小买入价格, 再用一个变量保存每次卖出的最大值, 不断遍历更新卖出的最大值即可. 图示: 题解代码: #inc…

PHP上门按摩专业版防东郊到家系统源码小程序

&#x1f486;‍♀️【尊享级体验】上门按摩专业版&#xff0c;告别东郊到家&#xff0c;解锁全新放松秘籍&#xff01;&#x1f3e0;✨ &#x1f525;【开篇安利&#xff0c;告别传统束缚】&#x1f525; 亲们&#xff0c;是不是厌倦了忙碌生活中的疲惫感&#xff1f;想要享…

问题:4、商业保险与政策性保险的主要不同之处是:经营主体不同、经营目标不同、承保机制不同。 #学习方法#其他#学习方法

问题&#xff1a;4、商业保险与政策性保险的主要不同之处是&#xff1a;经营主体不同、经营目标不同、承保机制不同。 参考答案如图所示

CH552G使用IAP下载

常见下载中的方式ISP&#xff0c;IAP&#xff0c;ICP 参考&#xff0c;CH552G中文手册&#xff0c;参考1 ISP&#xff1a;In System Programing&#xff0c;在系统编程。是常见的&#xff0c;使用软件&#xff0c;先将某个引脚&#xff08;例如boot&#xff09;连接到合适的电…

从微软发iPhone,聊聊企业设备管理

今天讲个上周的旧闻&#xff0c;微软给员工免费发iPhone。其实上周就有很多朋友私信问我&#xff0c;在知乎上邀请我回答相关话题&#xff0c;今天就抽点时间和大家一起聊聊这事。我不想讨论太多新闻本身&#xff0c;而是更想聊聊事件的主要原因——微软企业设备管理&#xff0…

私有化种子索引器bitmagnet

本文软件由网友 P家单推人 推荐 什么是 bitmagnet &#xff1f; bitmagnet 是一个自托管的 BitTorrent 索引器、DHT 爬虫、内容分类器和 torrent 搜索引擎&#xff0c;带有 Web UI、GraphQL API 和 Servarr 堆栈集成。 需要注意的是&#xff0c;该软件目前还处于 alpha 阶段。它…

深入探究理解大型语言模型参数和内存需求

概述 大型语言模型 取得了显著进步。GPT-4、谷歌的 Gemini 和 Claude 3 等模型在功能和应用方面树立了新标准。这些模型不仅增强了文本生成和翻译&#xff0c;还在多模态处理方面开辟了新天地&#xff0c;将文本、图像、音频和视频输入结合起来&#xff0c;提供更全面的 AI 解…

人工智能大模型发展的新形势及其省思

作者简介 肖仰华&#xff0c;复旦大学计算机科学技术学院教授、博导&#xff0c;上海市数据科学重点实验室主任。研究方向为知识图谱、知识工程、大数据管理与挖掘。主要著作有《图对称性理论及其在数据管理中的应用》、《知识图谱&#xff1a;概念与技术》&#xff08;合著&a…

微服务实战系列之玩转Docker(二)

前言 上一篇&#xff0c;博主对Docker的背景、理念和实现路径进行了简单的阐述。作为云原生技术的核心之一&#xff0c;轻量级的容器Docker&#xff0c;受到业界追捧。因为它抛弃了笨重的OS&#xff0c;也不带Data&#xff0c;可以说&#xff0c;能够留下来的都是打仗的“精锐…

Python游戏开发之制作捕鱼达人游戏-附源码

制作一个简单的“捕鱼达人”游戏可以使用Python结合图形界面库&#xff0c;比如Pygame。Pygame是一个流行的Python库&#xff0c;用于创建视频游戏&#xff0c;它提供了图形、声音等多媒体的支持。以下是一个基础的“捕鱼达人”游戏框架&#xff0c;包括玩家控制一个炮台来射击…

Java性能优化-书写高质量SQL的建议(如何做Mysql优化)

场景 Mysql中varchar类型数字排序不对踩坑记录&#xff1a; Mysql中varchar类型数字排序不对踩坑记录_mysql vachar排序有问题-CSDN博客 为避免开发过程中针对mysql语句的写法再次踩坑&#xff0c;总结开发过程中常用书写高质量sql的一些建议。 注&#xff1a; 博客&#…

特征工程方法总结

方法有以下这些 首先看数据有没有重复值、缺失值情况 离散&#xff1a;独热 连续变量&#xff1a;离散化&#xff08;也成为分箱&#xff09; 作用&#xff1a;1.消除异常值影响 2.引入非线性因素&#xff0c;提升模型表现能力 3.缺点是会损失一些信息 怎么分&#xff1a;…

【C++】—— 从 C 到 C++ (下)

【C】—— 从 C 到 C &#xff08;下&#xff09; 六、引用6.1、什么是引用6.2、引用在传参的使用6.2.1、例一6.2.2、例二 6.3、引用在做返回值的使用6.4、引用的特性6.5、引用的使用总结6.6、 c o n s t const const 引用6.6.1、 c o n s t const const 引用的规则6.6.2、 c o…

福派斯三文鱼猫粮,养猫新手的福音,让猫咪爱上吃饭!

猫粮的选择对于猫咪的健康和日常饮食至关重要。福派斯三文鱼猫粮作为一款备受关注的产品&#xff0c;它在市场上表现如何呢&#xff1f;下面我们将从几个关键方面深入探讨如何选择猫粮&#xff0c;并详细分析福派斯三文鱼猫粮的优缺点。 一、了解猫咪的独特需求 首先&#xff0…