效果圖：

實現(xiàn)代碼：

// 立體多柱狀圖 function getSolidOption(data1, data2, data3) {// 月份坐標(biāo)軸var nowMonth = new Date().getMonth() + 1;var lineXAxisData = [];for (var i = 5; i >= 0; i--) {var month = nowMonth - i;if (month < 1) {lineXAxisData.push(month + 12 + "月");} else {lineXAxisData.push(month + "月");}}var colors = [{type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#27afc7",},{offset: 0.5,color: "#27afc7",},{offset: 0.5,color: "#50d9cf",},{offset: 1,color: "#50d9cf",},],},{type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#41affa",},{offset: 0.5,color: "#41affa",},{offset: 0.5,color: "#80d2fa",},{offset: 1,color: "#80d2fa",},],},{type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#a6a0fa",},{offset: 0.5,color: "#a6a0fa",},{offset: 0.5,color: "#bbbbf9",},{offset: 1,color: "#bbbbf9",},],},];var barWidth = 15;var constData1 = [];var showData1 = [];data1.filter(function (item) {if (item) {constData1.push(1);showData1.push(item);} else {constData1.push(0);showData1.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});var constData2 = [];var showData2 = [];data2.filter(function (item) {if (item) {constData2.push(1);showData2.push(item);} else {constData2.push(0);showData2.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});var constData3 = [];var showData3 = [];data3.filter(function (item) {if (item) {constData3.push(1);showData3.push(item);} else {constData3.push(0);showData3.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});return {tooltip: {trigger: "axis",formatter: function (params) {var str = params[0].axisValue + "：";params.filter(function (item) {if (item.componentSubType == "bar") {str += "<br/>" + item.seriesName + "：" + item.value;}});return str;},},legend: {selectedMode: false,data: ["新增", "刪除", "修改"],},grid: {left: "3%", //圖表距邊框的距離right: "3%",top: "15%",bottom: "5%",containLabel: true,},xAxis: {data: lineXAxisData,axisTick: {show: false,},axisLine: {show: false,},},yAxis: {axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},},series: [{z: 1,name: "新增",type: "bar",barWidth: barWidth,barGap: "0%",data: data1,itemStyle: {normal: {color: colors[0],},},},{z: 2,name: "新增",type: "pictorialBar",data: constData1,symbol: "diamond",symbolOffset: ["-100%", "50%"],symbolSize: [barWidth, 10],itemStyle: {normal: {color: colors[0],},},tooltip: {show: false,},},{z: 3,name: "新增",type: "pictorialBar",symbolPosition: "end",data: showData1,symbol: "diamond",symbolOffset: ["-135%", "-50%"],symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],itemStyle: {normal: {borderColor: "#8bead4",borderWidth: 2,color: "#8bead4",},},tooltip: {show: false,},},{z: 1,name: "刪除",type: "bar",barWidth: barWidth,data: data2,itemStyle: {normal: {color: colors[1],},},},{z: 2,name: "刪除",type: "pictorialBar",data: constData2,symbol: "diamond",symbolOffset: ["0%", "50%"],symbolSize: [barWidth, 10],itemStyle: {normal: {color: colors[1],},},tooltip: {show: false,},},{z: 3,name: "刪除",type: "pictorialBar",symbolPosition: "end",data: showData2,symbol: "diamond",symbolOffset: ["0%", "-50%"],symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],itemStyle: {normal: {borderColor: "#96dfff",borderWidth: 2,color: "#96dfff",},},tooltip: {show: false,},},{z: 1,type: "bar",name: "修改",barWidth: barWidth,data: data3,itemStyle: {normal: {color: colors[2],},},},{z: 2,name: "修改",type: "pictorialBar",data: constData3,symbol: "diamond",symbolOffset: ["100%", "50%"],symbolSize: [barWidth, 10],itemStyle: {normal: {color: colors[2],},},tooltip: {show: false,},},{z: 3,name: "修改",type: "pictorialBar",symbolPosition: "end",data: showData3,symbol: "diamond",symbolOffset: ["135%", "-50%"],symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],itemStyle: {normal: {borderColor: "#d5d2ff",borderWidth: 2,color: "#d5d2ff",},},tooltip: {show: false,},},],}; } 調(diào)用： var changeBar = echarts.init(document.getElementById("changeBar")); changeBar.setOption(getSolidOption([0, 0, 260, 30, 30, 30],[0, 182, 191, 30, 0, 30],[0, 182, 191, 0, 40, 40]) );

注：getSolidOption方法中柱狀圖的柱寬barWidth給了一個固定的值，若改變這個值時圖形可能會有些變形，此時只需要調(diào)整series[1]、series[2]、series[4]、series[5]、series[7]、series[8]中symbolOffset的值即可。此案例中列舉了三種柱狀圖，其中series數(shù)組中前3個元素為新增柱狀圖，中間三個為刪除柱狀圖，最后三個為修改柱狀圖，由于每個柱子都由上中下三部分組成，因此series需要定義的元素較多。對于新增柱狀圖來說series[0]為柱子的主體部分，series[1]為柱子的底部，series[2]為柱子的頂部，以此類推。為了達(dá)到整體性的效果，每個柱狀圖的三部分顏色需要達(dá)到統(tǒng)一。

此處介紹的是多3D立體柱狀圖，若想要了解單個柱子的3D柱狀圖，請參考《echarts實現(xiàn)單3D立體柱狀圖》，文章地址：https://blog.csdn.net/Dalin0929/article/details/110188346

總結(jié)

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

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