echarts横向立体3D柱状图

实现原理：series中包含两个普通的柱状图bar，其宽度各占一半且设置间距barGap为0，再添加一个象形柱状图pictorialBar，symbol设为菱形diamond，调整其位置大小层级等数据以达到覆盖在柱状图顶部的立体效果。

运行效果：

在这里插入图片描述
代码：

function getEcharts3DBar () {let yAxisData = ['标题1', '标题2', '标题3', '标题4', '标题5', '标题6'];let seriesData = [5, 36, 10, 20, 15, 25];var barWidth = 30, constData = [], showData = [];seriesData.forEach(item => {if (item) {constData.push(1);showData.push(item);} else {constData.push(0);showData.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});return {xAxis: {type: 'value',splitLine: {lineStyle: {color: '#3AA8E2'}}},yAxis: {type: 'category',data: yAxisData,axisLine: { show: false },axisTick: { show: false }},series: [{name: '数据',type: "bar",barWidth: barWidth / 2,barGap: "0%",data: seriesData,color: '#57F1FF',label: {show: true,position: 'right',offset: [barWidth / 3, barWidth / 3]}},{name: '数据',type: "bar",barWidth: barWidth / 2,data: seriesData,color: '#0090B4',},{z: 3,name: '数据',type: "pictorialBar",symbolPosition: "end",data: showData,symbol: "diamond",symbolOffset: ["50%", "0%"],symbolSize: [barWidth / 2, barWidth],color: '#017592'},],};
}
option = getEcharts3DBar();