免费资源部落

本篇内容介绍了“echarts怎么实现3d柱状图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

echarts实现3d柱状图的两种方式

看了不少关于3d柱状图的案例,发现做3d柱状图 常用的两种方式就是 自定义图形和象型柱图, 两种实现方式效果如下:

方法1: echarts.graphic.extendShape 自定义图形

echarts自定义图形的详细用法点这里, 官网点这里, 图中第一个3d柱状图我参考的案例在这里, 看了很多 echarts这种3d案例, 自定义图形做3d柱状图,貌似只能有个柱子(可能 能做双柱,但是 我真的不会)

封装成组件的完整代码如下:

<template></template><scriptsetuplang="ts">import{nextTick,watch}from'vue';importechartsfrom'@/assets/ts/echarts';importuseResizeChartfrom'@/hooks/useResizeChart';functionmergeConfig(defaultConfig:object,config:object){returnObject.assign(defaultConfig,config);}functioninitOption():echarts.EChartsCoreOption{//绘制左侧面constCubeLeft=echarts.graphic.extendShape({shape:{x:0,y:0,},buildPath:function(ctx,shape){//会canvas的应该都能看得懂，shape是从custom传入的constxAxisPoint=shape.xAxisPoint;constc0=[shape.x+3.5,shape.y];constc1=[shape.x-11.5,shape.y-3];constc2=[xAxisPoint[0]-11.5,xAxisPoint[1]-6.5];constc3=[xAxisPoint[0]+3.5,xAxisPoint[1]];ctx.moveTo(c0[0],c0[1])//@ts-ignore.lineTo(c1[0],c1[1]).lineTo(c2[0],c2[1]).lineTo(c3[0],c3[1]).closePath();},});//绘制右侧面constCubeRight=echarts.graphic.extendShape({shape:{x:0,y:0,},buildPath:function(ctx,shape){constxAxisPoint=shape.xAxisPoint;constc1=[shape.x+3,shape.y];constc2=[xAxisPoint[0]+3,xAxisPoint[1]];constc3=[xAxisPoint[0]+12,xAxisPoint[1]-7];constc4=[shape.x+12,shape.y-7];ctx.moveTo(c1[0],c1[1])//@ts-ignore.lineTo(c2[0],c2[1]).lineTo(c3[0],c3[1]).lineTo(c4[0],c4[1]).closePath();},});//绘制顶面constCubeTop=echarts.graphic.extendShape({shape:{x:0,y:0,},buildPath:function(ctx,shape){constc1=[shape.x+3.5,shape.y];constc2=[shape.x+12.5,shape.y-7.5];//右点constc3=[shape.x-2.5,shape.y-10];constc4=[shape.x-11.5,shape.y-3];ctx.moveTo(c1[0],c1[1])//@ts-ignore.lineTo(c2[0],c2[1]).lineTo(c3[0],c3[1]).lineTo(c4[0],c4[1]).closePath();},});//注册三个面图形echarts.graphic.registerShape('CubeLeft',CubeLeft);echarts.graphic.registerShape('CubeRight',CubeRight);echarts.graphic.registerShape('CubeTop',CubeTop);constVALUE=props.value;constseries=[{type:'custom',renderItem:(params:any,api:any)=>{letcubeLeftStyle=newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,//@ts-ignorecolor:props.color[0],},{offset:1,color:'rgba(7,20,52,0.7)',},]);letcubeRightStyle=newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(7,20,52,1)',},{offset:1,//@ts-ignorecolor:props.color[0],},]);letcubeTopStyle=newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,//@ts-ignorecolor:props.color[1]||props.color[0],},]);constlocation=api.coord([api.value(0),api.value(1)]);return{type:'group',children:[{type:'CubeLeft',shape:{api,xValue:api.value(0),yValue:api.value(1),x:location[0],y:location[1],xAxisPoint:api.coord([api.value(0),0]),},style:{fill:cubeLeftStyle,},},{type:'CubeRight',shape:{api,xValue:api.value(0),yValue:api.value(1),x:location[0],y:location[1],xAxisPoint:api.coord([api.value(0),0]),},style:{fill:cubeRightStyle,},},{type:'CubeTop',shape:{api,xValue:api.value(0),yValue:api.value(1),x:location[0],y:location[1],xAxisPoint:api.coord([api.value(0),0]),},style:{fill:cubeTopStyle,},},],};},data:VALUE,},{type:'bar',label:{show:true,position:'top',fontSize:14,color:props.color[0],offset:[2,-10],},itemStyle:{color:'transparent',},tooltip:{},data:VALUE,},];consttitle=mergeConfig({text:'',textStyle:{color:props.color[0],fontWeight:'800',fontSize:12,},left:'18px',top:'1%',},props.title,);constXAxisLine=mergeConfig({show:false,lineStyle:{type:'solid',width:1,color:'#2c3954',},},props.XAxisLine,);constYAxisLine=mergeConfig({show:false,lineStyle:{show:true,lineStyle:{type:'solid',width:1,},},},props.YAxisLine,);constlegend=mergeConfig({show:true,left:'center',top:'95%',icon:'circle',textStyle:{color:'#fff',},},props.legend,);constgrid=mergeConfig({left:'5%',right:'5%',top:'12%',bottom:'0%',containLabel:true,},props.grid,);constXSplitLine=mergeConfig({show:false,lineStyle:{type:'dashed',width:1,},},props.XSplitLine,);//纵坐标分割线配置constYSplitLine=mergeConfig({//是否显示//show:false,show:true,//样式lineStyle:{color:'#13263e',type:'solid',width:1,},},props.YSplitLine,);constXAxisTick=mergeConfig({show:false,length:5,inside:true,alignWithLabel:true,lineStyle:{type:'solid',width:1,},},props.XAxisTick,);constYAxisTick=mergeConfig({show:true,length:5,inside:true,alignWithLabel:true,lineStyle:{color:'#13263e',type:'solid',width:1,},},props.YAxisTick,);letoption:echarts.EChartsCoreOption={title,tooltip:{show:false,//指示器提示的坐标轴trigger:'axis',//阴影提示器axisPointer:{type:'shadow',shadowStyle:{shadowColor:'#2e3e51',//设置阴影的颜色},},formatter:function(params:any){constitem=params[1];returnitem.name+':'+item.value;},//提示框背景颜色backgroundColor:'#122843',//提示框边框颜色borderColor:'#42D1F1',//提示框文本样式textStyle:{color:'#fff',},},legend:legend,grid:grid,xAxis:{type:'category',//boundaryGap:false,data:props.xAxisData,axisLine:XAxisLine,splitLine:XSplitLine,axisTick:XAxisTick,axisLabel:{//x轴文字的配置show:true,color:'#fff',fontSize:12,rotate:30,},},yAxis:{type:'value',name:props.yUnit,nameTextStyle:{color:'#fff',fontSize:16,},axisLine:YAxisLine,splitLine:YSplitLine,axisTick:YAxisTick,axisLabel:{//y轴文字的配置color:'#fff',fontSize:12,},},series,};option=Object.assign(option,props.config);returnoption;}constprops=defineProps({pid:{type:String,required:true,},title:{type:Object,default:{},},xAxisData:{type:Array,required:true,},legend:{type:Object,default:{},},grid:{type:Object,default:{},},XAxisLine:{type:Object,default:{},},YAxisLine:{type:Object,default:{},},yUnit:{type:String,default:'',},XSplitLine:{type:Object,default:{},},YSplitLine:{type:Object,default:{},},XAxisTick:{type:Object,default:{},},YAxisTick:{type:Object,default:{},},config:{type:Objectas()=>echarts.EChartsCoreOption,default:{},},value:{type:Array,required:true,},//柱子的颜色color:{type:Array,default:['rgba(29,230,235,1)','rgba(7,235,251,1)'],},});letoption=initOption();letcontainer:HTMLElement|null=null;letmyChart:echarts.ECharts|null=null;constrenderChart=(notMerge:boolean=false)=>{if(!myChart)myChart=echarts.init(containerasHTMLElement);myChart.setOption(option,{notMerge,});};nextTick(()=>{container=document.querySelector('#'+props.pid)asHTMLElement;renderChart();useResizeChart(container,myChartasecharts.ECharts);});watch(()=>props,(newVal,oldVal)=>{letnotMerge=true;option=initOption();renderChart(notMerge);},{deep:true,},);functionexportImg(){constsrc=(myChartasecharts.ECharts).getDataURL({pixelRatio:2,backgroundColor:'#08172A',});consta=document.createElement('a');a.href=src;a.download=(option.titleas{text:string}).text||'chart-img';a.click();}defineExpose({exportImg,});</script><stylelang="scss"scoped></style>方式2: 象型柱图(type: “pictorialBar”)

echarts象型柱图的官网配置项点这里, 参考的案例在这里, 象型柱图可以单柱可以双柱

封装成组件的完整代码如下:

<template></template><scriptsetuplang="ts">import{nextTick,watch}from"vue";importechartsfrom"@/assets/ts/echarts";import{LegendComponent}from"echarts/components";echarts.use([LegendComponent]);//合并配置方法functionmergeConfig(defaultConfig:object,config:object){returnObject.assign(defaultConfig,config);}functioninitOption():echarts.EChartsCoreOption{//此时使用组件只需要要将zzx1的数据和wgx1的数据传递到子组件//第一个柱子的值constzzx1=props.series[0].data;//实际值//第二个柱子的值constwgx1=props.series[1].data;//变量:改变每个柱子的大小,后期可将其设置为动态的?constbarWidth=30;constseries=[//(0)第一个柱子中间的正方形{type:"pictorialBar",//象型柱状symbol:"diamond",symbolSize:[barWidth,5],//调整大小//symbolOffset:[-13,-3],//图形相对于原本位置的偏移symbolOffset:["-55%",-3],//图形相对于原本位置的偏移symbolPosition:"end",z:12,color:"#2584e0",data:zzx1,},//(1)第二个柱子中间的正方形{type:"pictorialBar",symbol:"diamond",symbolSize:[barWidth,8],//symbolOffset:[13,-3],symbolOffset:["55%",-3],symbolPosition:"end",z:12,color:"#07fdd3",data:wgx1,},//(2)第一个柱子底部的正方形{type:"pictorialBar",symbol:"diamond",symbolSize:[barWidth,5],//symbolOffset:[-13,3],symbolOffset:["-55%",3],z:12,color:"#355ba8",data:zzx1,},//(3)第二个柱子底部的正方形{name:"",type:"pictorialBar",symbol:"diamond",symbolSize:[barWidth,5],//symbolOffset:[13,3],symbolOffset:["55%",3],color:"#2095a3",z:12,data:wgx1,},//(4)一个柱子,下方有颜色填充的的柱子{name:props.nameOne,type:"bar",barWidth:barWidth,barGap:"10%",//zlevel:2,stack:"1",itemStyle:{opacity:0.7,color:newecharts.graphic.LinearGradient(0,0,1,0,[{offset:0.5,color:"rgba(44,97,188,0.7)",//color:'#2c61bc',},{offset:0.5,color:"#2584e0",},{offset:1,color:"#214a87",},]),//barBorderRadius:0,borderRadius:0,},//是否在每个柱子显示相应的值label:{show:true,position:["0","-25"],color:"#005dd9",fontSize:14,fontWeight:'bold'},data:zzx1,},//(5)第二个柱子,下方有颜色填充的的柱子{name:props.nameTow,type:"bar",stack:"2",barWidth:barWidth,itemStyle:{opacity:0.7,color:newecharts.graphic.LinearGradient(0,0,1,0,[{offset:0.5,color:"rgba(15,182,182,0.7)",},{offset:0.5,color:"#0ccec7",},{offset:1,color:"#0bddd0",},]),//barBorderRadius:0,borderRadius:0,},//是否在每个柱子显示相应的值label:{show:true,position:["0","-25"],color:"#06e6f6",fontSize:14,fontWeight:'bold'},data:wgx1,},];//title配置consttitle=mergeConfig({//是否显示show:true,//title文本text:"",top:0,left:"left",//文字样式textStyle:{color:"#fff",fontSize:16,},},props.title);//横坐标轴线配置constXAxisLine=mergeConfig({//是否显示show:true,//show:false,//样式lineStyle:{//color:"rgba(46,60,87)",type:"solid",width:1,},},props.XAxisLine);//纵坐标轴线配置constYAxisLine=mergeConfig({//是否显示//show:true,show:false,//样式lineStyle:{//是否显示show:true,//样式lineStyle:{color:"#fff",type:"solid",width:1,},},},props.YAxisLine);//横坐标分割线配置constXSplitLine=mergeConfig({//是否显示show:false,//样式lineStyle:{color:"#fff",type:"dotted",width:1,},},props.XSplitLine);//纵坐标分割线配置constYSplitLine=mergeConfig({//是否显示show:true,//样式lineStyle:{color:"rgba(46,59,86)",type:'dashed',//type:"solid",width:1,},},props.YSplitLine);//横坐标刻度配置constXAxisTick=mergeConfig({//是否显示show:false,//刻度长度length:5,//是否朝内inside:true,//刻度是否居中alignWithLabel:true,//样式lineStyle:{color:"#fff",type:"solid",width:1,},},props.XAxisTick);//纵坐标刻度配置constYAxisTick=mergeConfig({//是否显示show:false,//刻度长度length:5,//是否朝内inside:true,//刻度是否居中alignWithLabel:true,color:"#fff",//样式lineStyle:{color:"#fff",type:"solid",width:1,},},props.YAxisTick);//图例标记配置constlegend=mergeConfig({show:true,right:"0",top:"0",icon:"rect",itemHeight:10,itemWidth:10,textStyle:{color:"#fff",},//取消默认点击事件selectedMode:false,//距离itemGap:50,},props.legend);//指示器:consttooltip={show:false,trigger:"axis",axisPointer:{type:"shadow",},formatter:function(e:any){//console.log(e);varstr=e[4].axisValue+"<br>"+"<spanstyle='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+e[4].color.colorStops[0].color+";'></span>"+""+e[4].seriesName+":"+e[4].value+"<br>"+"<spanstyle='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+e[5].color.colorStops[0].color+";'></span>"+""+e[5].seriesName+":"+e[5].value;returnstr;},//提示框背景颜色backgroundColor:"#122843",//提示框边框颜色borderColor:"#42D1F1",//提示框文本样式textStyle:{color:"#fff",},};//汇总配置letoption:echarts.EChartsCoreOption={title,tooltip,legend,grid:{top:"12%",left:"2%",right:"2%",bottom:"5%",//height:"85%",containLabel:true,},xAxis:{type:"category",boundaryGap:true,data:props.xAxisData,axisLine:XAxisLine,splitLine:XSplitLine,axisTick:XAxisTick,axisLabel:{//textStyle:{color:"#fff",fontSize:16//},},},yAxis:{type:"value",//单位name:props.yUnit,axisLine:YAxisLine,splitLine:YSplitLine,axisTick:YAxisTick,axisLabel:{//textStyle:{color:"#fff",fontSize:16//},},min:0,//max:props.max,},series,};//合并配置生成最终配置option=Object.assign(option,props.config);returnoption;}//propsconstprops=defineProps({//父容器IDpid:{type:String,required:true,},title:{type:Object,default:{},},//数据series:{//type:Arrayas()=>Array<BarSeriesOption>,type:Arrayas()=>{data:number[]}[],required:true,},//横坐标xAxisData:{type:Array,required:true,},//图例标记legend:{type:Object,default:{},},//横坐标轴线XAxisLine:{type:Object,default:{},},//纵坐标轴线YAxisLine:{type:Object,default:{},},//y轴单位yUnit:{type:String,default:"",},//横坐标分割线XSplitLine:{type:Object,default:{},},//纵坐标分割线YSplitLine:{type:Object,default:{},},//横坐标刻度XAxisTick:{type:Object,default:{},},//纵坐标刻度YAxisTick:{type:Object,default:{},},//总配置，将与默认配置与用户传入的配置合并config:{type:Objectas()=>echarts.EChartsCoreOption,default:{},},//最值//max:{//type:Number,////requird:true,//default:5000,//},nameOne:{type:String,default:"昨日总量",},nameTow:{type:String,default:"今日总量",},});//optionletoption=initOption();//chart容器letcontainer:HTMLElement|null=null;//chart实例letmyChart:echarts.ECharts|null=null;//渲染方法constrenderChart=()=>{if(!myChart)myChart=echarts.init(containerasHTMLElement);myChart.setOption(option);};//DOM加载后渲染chartnextTick(()=>{//获取容器container=document.querySelector("#"+props.pid)asHTMLElement;//渲染chartrenderChart();//自适应chart//useResizeChart(container,myChartasecharts.ECharts);});//监听props变化watch(()=>props,()=>{//更新optionoption=initOption();//重新渲染chartrenderChart();},{deep:true,});//导出为图片functionexportImg(){//生成base64图片constsrc=(myChartasecharts.ECharts).getDataURL({pixelRatio:2,backgroundColor:"#08172A",});//下载consta=document.createElement("a");a.href=src;a.download=(option.titleas{text:string}).text||"chart-img";a.click();}//暴露出chart图片导出方法，父组件可以通过实例调用defineExpose({exportImg,});</script><stylelang="scss"scoped></style>

“echarts怎么实现3d柱状图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！