vue怎么使用echarts实现立体柱形图-mile米乐体育
vue怎么使用echarts实现立体柱形图
今天小编给大家分享一下vue怎么使用echarts实现立体柱形图的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘制为一个图形，然后在echats中注册，在option的series中renderitem中渲染
代码如下：
（1）注册绘制图形
registry(){letmycuberect=this.$echarts.graphic.extendshape({shape:{x:0,y:0,width:20,zwidth:8,zheight:4},buildpath:function(ctx,shape){constapi=shape.apiconstxaxispoint=api.coord([shape.xvalue,0])constp0=[shape.x,shape.y]constp1=[shape.x-shape.width/2,shape.y]constp4=[shape.x shape.width/2,shape.y]constp2=[shape.x-shape.width/2,xaxispoint[1]]constp3=[shape.x shape.width/2,xaxispoint[1]]ctx.moveto(p0[0],p0[1])ctx.lineto(p1[0],p1[1])ctx.lineto(p2[0],p2[1])ctx.lineto(p3[0],p3[1])ctx.lineto(p4[0],p4[1])ctx.lineto(p0[0],p0[1])ctx.closepath()}})letmycubeshadow=this.$echarts.graphic.extendshape({shape:{x:0,y:0,width:20,zwidth:8,zheight:4},buildpath:function(ctx,shape){constapi=shape.apiconstxaxispoint=api.coord([shape.xvalue,0])constp1=[shape.x-shape.width/2,shape.y]constp4=[shape.x shape.width/2,shape.y]constp6=[shape.x shape.width/2 shape.zwidth,shape.y-shape.zheight]constp7=[shape.x-shape.width/2 shape.zwidth,shape.y-shape.zheight]constp3=[shape.x shape.width/2,xaxispoint[1]]constp5=[shape.x shape.width/2 shape.zwidth,xaxispoint[1]-shape.zheight]ctx.moveto(p4[0],p4[1])ctx.lineto(p3[0],p3[1])ctx.lineto(p5[0],p5[1])ctx.lineto(p6[0],p6[1])ctx.lineto(p4[0],p4[1])ctx.moveto(p4[0],p4[1])ctx.lineto(p6[0],p6[1])ctx.lineto(p7[0],p7[1])ctx.lineto(p1[0],p1[1])ctx.lineto(p4[0],p4[1])ctx.closepath()}})this.$echarts.graphic.registershape('mycuberect',mycuberect)this.$echarts.graphic.registershape('mycubeshadow',mycubeshadow)}
（2）渲染图形
barchartoption:{tooltip:{trigger:'axis',axispointer:{type:'cross',label:{backgroundcolor:'#6a7985'}}},grid:{containlabel:true,top:'30px',bottom:'0px',left:'0px'},xaxis:{type:'category',axislabel:{interval:0,fontsize:fontsize(12)},axisline:{show:false,linestyle:{color:'#98b9c5'}},data:[]//通过后端传入数据js传入},yaxis:{type:'value',axislabel:{fontsize:fontsize(12)},axisline:{show:false,linestyle:{color:'#98b9c5'}},splitline:{linestyle:{color:'#3a586a',type:'dashed'}}},series:[{name:'单位面积能耗',type:'custom',renderitem:(params,api)=>{letlocation=api.coord([api.value(0),api.value(1)])return{type:'group',children:[{type:'mycuberect',shape:{api,xvalue:api.value(0)-0.5,yvalue:api.value(1),x:location[0],y:location[1]},style:api.style()},{type:'mycubeshadow',shape:{api,xvalue:api.value(0)-0.5,yvalue:api.value(1),x:location[0],y:location[1]},style:{fill:api.style(),text:''}}]}},stack:'单位面积能耗',label:{show:true,position:'top',formatter:'{c}',textstyle:{fontsize:fontsize(12),color:'#fff',align:'center'}},itemstyle:{color:newthis.$echarts.graphic.lineargradient(0,0,0,1,[{offset:0,color:'#b1950d'},{offset:0.5,color:'#aea20d'},{offset:1,color:'#a5aa12'}])},data:[]//后端传入数据}]}
注意事项：
1)、在注册图形时style：只能使用 style: api.style();
text: ''后面才能使用label在图形顶部放置value
2)、this.$echarts是经过统一封装之后的，具体情况还需具体考虑
（3）生成图形
generatebarchart(){letvm=thisif(this.$refs['uintenergyconsume']){//this.$refs是生成图形区域的ref值this.$echarts.graphic.registershape('mycuberect',this.mycuberect)this.$echarts.graphic.registershape('mycubeshadow',this.mycubeshadow)this.barchart=this.$echarts.init(this.$refs['uintenergyconsume'])this.barchart.setoption(this.barchartoption,false,true)$(window).resize(function(){//屏幕自适应vm.handleresize()})}}
（4）template中代码