1、html定义一个div,style设置大小
2、上干货,js代码如下:
var dep = ['A1', 'A2', 'A3', 'A4', A5', 'A6','A7','A8','A9'];
var year = ['2021', '2020','2019'];
var data = [[0,0,50000],[0,1,10000],[0,2,20011],[0,3,6540],[0,4,654],[0,5,10],[0,6,510],[0,7,140],[0,8,130],[1,0,2227],[1,1,210],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0]]
var bar3d = echarts.init(document.getElementById('bar3d'));
var bar3dChart = {
title: {
text: '标题名称',
top:'14%',
textStyle: {
color: '#fff',
fontSize: 17,
fontWeight:100
}
},
visualMap: {
show: false,
max: 10000,
inRange: {
color: ['#74e9fd', '#58b3f9', '#468df7', '#8d4bc9', '#ea6661']
}
},
xAxis3D: {
type: 'category',
data: dep,
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a2a6b2',
fontSize: 10,
fontWeight:0
}
},
axisLine: {
lineStyle: {
color: '#a2a6b2',
width: 1
}
},
},
yAxis3D: {
type: 'category',
data: year,
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#a2a6b2',
fontSize: 10,
fontWeight:0
}
},
axisLine: {
lineStyle: {
color: '#a2a6b2',
width: 1
}
}
},
zAxis3D: {
type: 'value',
axisLabel: {
formatter: function (value, index) {
if (value >= 100000000) {
return value / 100000000 + "亿";
} else if (value >= 10000000) {
return value / 10000000 + "千万";
} else if (value >= 1000000) {
return value / 1000000 + "百万";
} else if (value >= 10000) {
return value / 10000 + "万";
} else {
return value;
}
},
textStyle: {
color: '#a2a6b2',
fontSize: 10,
fontWeight:0
}
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#a2a6b2',
width: 1
}
}
},
grid3D: {
// show: false,//坐标隐藏
boxWidth: 80,
boxDepth: 100,
viewControl: {
beta:0,
autoRotate:true,
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 12,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 12,
color: '#000',
fontWeight:100
}
}
}
}]
};
bar3d.setOption(bar3dChart);
window.addEventListener("resize", function () {
bar3d.resize();
})
如果要把X、Y、Z文字去掉,可以直接在js里搜索name:"X",改成空格就可以了。