Echarts 3D立體柱狀圖，3D長方體柱狀圖，直接cope源碼可用(源碼+例圖)

廢話不多說，直接上代碼！！！?

// HTML 代碼 <div id="litiBar" style="width:100%;height:400px" ></div>// JS 代碼 data(){return {chart:null} }; mounted(){// 3D立體柱狀圖this.litiBar(); }, methods:{litiBar() {this.chart = echarts.init(document.getElementById('litiBar'));// 創(chuàng)建立方體正面圖形const cubeShape1 = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 110, // 長方體寬度zWidth: 8, // 陰影折角高zHeight: 4 // 陰影折角寬},buildPath: (ctx, shape) => {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p0 = [shape.x, shape.y];const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]];const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];// 繪制正面ctx.moveTo(p0[0], p0[1]); //0ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p2[0], p2[1]); //2ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p4[0], p4[1]); //4ctx.lineTo(p0[0], p0[1]); //0ctx.closePath();}})// 創(chuàng)建立方體的頂和側(cè)面const cubeShape2 = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 110,zWidth: 8,zHeight: 4},buildPath: (ctx, shape) => {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];// 繪制側(cè)面ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p5[0]+6, p5[1]-6); //5ctx.lineTo(p6[0]+7, p6[1]-8); //6ctx.lineTo(p4[0], p4[1]); //4// 繪制頂部ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p6[0]+7, p6[1]-8); //6ctx.lineTo(p7[0]+7, p7[1]-8); //7ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p4[0], p4[1]); //4ctx.closePath();}})echarts.graphic.registerShape('cubeShape1', cubeShape1)echarts.graphic.registerShape('cubeShape2', cubeShape2)this.initECharts()},initECharts() {const option = {title: {left: 20,top: 20},textStyle:{fontSize:15,color: '#10D5DF'},tooltip: {},xAxis: {type: 'category',// max: 'dataMax',// 柱狀圖以數(shù)據(jù)最大的為頂點(diǎn)data: this.xAxisText,interval: 0,axisLabel: {color: '#44f0ff'},axisTick: {show: false,},// 隱藏X刻度線axisLine: {show: true,lineStyle: {color: 'rgba(28, 180, 215,0.5)'}}},yAxis: {type: 'value',splitLine: {lineStyle:{color: 'rgba(224,224,224,0.1)'// 分割軸線的顏色}},axisLine: {show: true,lineStyle: {color: 'rgba(28, 180, 215,0.5)'}}},grid: {top: 80,bottom: 30},series: [{// name: '銷量統(tǒng)計(jì)',type: 'custom',label: {show: true,position: 'top',},// barWidth:20,renderItem: (params, api) => {let location = api.coord([api.value(0), api.value(1)])return {type: 'group',children: [{type: 'cubeShape1', // 正方體正面shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1, [{offset: 0.1,color: 'rgba(27, 202, 242, 1)'},{offset: 1,color: 'rgba(29, 111, 130, 1)'}])}}, {type: 'cubeShape2', // 正方體側(cè)面和頂shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1, [{offset: 0.1,color: 'rgba(29, 111, 130, 1)'},{offset: 1,color: 'rgba(27, 202, 242, 1)'}])}}]}},data: this.yAxisData}]}this.chart.setOption(option)}, }

總結(jié)

以上是生活随笔為你收集整理的Echarts 3D立体柱状图(源码+例图)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。