下面前端入门建站教程为大家介绍一下百度echarts：轻轻松松了解3d柱状图

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

上面是“百度echarts：轻轻松松了解3d柱状图”的全面内容，想了解更多关于 js 文章，请继续关注前端入门建站教程。