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",改成空格就可以了。