实现原理: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();