当前位置: 首页 > news >正文

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.lryc.cn/news/403420.html

相关文章:

  • Flask校验
  • web前端 Vue 框架面试120题(一)
  • UniApp__微信小程序项目实战 实现长列表分页,通过 onReachBottom 方法上划分次加载数据
  • 数据结构(功能受限的表-栈队列)
  • 高数知识补充----矩阵、行列式、数学符号
  • 《Techporters架构搭建》-Day01 第一个RESTful API接口
  • 【C++ —— AVL树】
  • 跨平台webSocket模块设计技术解决方案
  • Drools规则引擎
  • vue学习day11-路由、路由模块的封装、声明式导航-路由的介绍、VueRouter、router-link、自定义高亮类名
  • 智慧校园学期基础数据管理
  • ISP代理和双ISP代理:区别和优势
  • 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【22】【RabbitMQ】
  • 概率论原理精解【4】
  • Linux云计算 |【第一阶段】ENGINEER-DAY3
  • springboot 实体类加注解校验入参数据
  • 关于 Qt输入法在arm特定的某些weston下出现调用崩溃 的解决方法
  • Android Studio关于Gradle及JDK问题解决
  • Leetcode 205. 同构字符串
  • 多口适配器,给您的生活增添便利
  • 探索现代Web开发:WebKit的剪贴板API革新
  • 【电路笔记】-放大器的频率响应
  • Artix7系列FPGA实现SDI视频编解码,基于GTP高速接口,提供3套工程源码和技术支持
  • NET 语言识别,语音控制操作、语音播报
  • Unity 调试死循环程序
  • 视频监控平台LntonCVS视频融合共享平台智慧安防视频监控汇聚应用方案
  • 【论文阅读笔记】Hierarchical Neural Coding for Controllable CAD Model Generation
  • Unity扩展SVN命令
  • 「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中(三)
  • 微服务保护