echarts 柱状图 3d

ECharts 中的 3D 柱状图可以通过使用 echarts-gl 插件来实现。具体步骤如下：

1. 引入 echarts 和 echarts-gl 插件：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

2. 创建一个包含 3D 柱状图的 div 容器：

<div id="chart" style="width: 600px; height: 400px;"></div>

3. 初始化 ECharts 实例，并配置 3D 柱状图的相关参数：

var chart = echarts.init(document.getElementById('chart'));

var data = [
    [10, 52, 200],
    [20, 32, 190],
    [30, 72, 180],
    [40, 42, 170],
    [50, 82, 160],
    [60, 62, 150],    [70, 92, 140],
    [80, 72, 130],
    [90, 102, 120],
    [100, 82, 110]
];

var option = {
    tooltip: {},
    visualMap: {
        max: 100,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        viewControl: {
            // projection: 'orthographic'
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data.map(function (item) {
            return {
                value: [item[0], item[1], item[2]]
            };
        }),
        shading: 'lambert',
        label: {
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        itemStyle: {
            opacity: 0.8
        }
    }]
};

chart.setOption(option);

4. 调用 setOption 方法将配置项设置到 ECharts 实例中。