立体柱状图

引入echarts-gl

myChart.setOption({
title: {
text: '2024年全国降雨量统计',
show: true
},
tooltip: {},
xAxis3D: {
type: 'category',
data: ['0-100', '100-500', '500-1000', '1000-2000', '2000-5000', '5000以上']
},
yAxis3D: {
type: 'category',
data: ['降雨量']
},
zAxis3D: {
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
alpha: 40,
beta: 40
}
},
series: [
{
name: '降雨量',
type: 'bar3D',
data: [
['0-100', '降雨量', Math.floor(Math.random() * 30)],
['100-500', '降雨量', Math.floor(Math.random() * 30)],
['500-1000', '降雨量', Math.floor(Math.random() * 30)],
['1000-2000', '降雨量', Math.floor(Math.random() * 30)],
['2000-5000', '降雨量', Math.floor(Math.random() * 30)],
['5000以上', '降雨量', Math.floor(Math.random() * 30)]
],
shading: 'color',
itemStyle: {
opacity: 0.8,
color: function(params: any) {
const colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83'];
return colorList[params.dataIndex];
}
},
label: {
show: true,
formatter: '{b0}: {c2}'
}
}
]
})