echarts 3d柱状图

您好！要创建 Echarts 中的 3D 柱状图，您可以按照以下步骤进行操作：

1. 首先，确保您已经引入了 Echarts 库。您可以在页面的头部添加以下代码：

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

2. 创建一个具有足够容器大小的 `<div>` 元素，用于显示图表，例如：

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

3. 编写 JavaScript 代码来配置和渲染 3D 柱状图。以下是一个简单的示例：

   // 获取容器元素
   const chartContainer = document.getElementById('chartContainer');

   // 创建图表实例
   const chart = echarts.init(chartContainer);

   // 配置图表
   const options = {
     tooltip: {},
     visualMap: {
       max: 100,
       inRange: {
         color: ['#e0ffff', '#006edd'],
       },
     },
     xAxis3D: {
       type: 'category',
       data: ['柱1', '柱2', '柱3', '柱4', '柱5'],
     },
     yAxis3D: {
       type: 'value',
     },
     zAxis3D: {
       type: 'category',
       data: ['类别1', '类别2', '类别3'],
     },
     grid3D: {
       boxWidth: 200,
       boxDepth: 80,
       viewControl: {
         projection: 'orthographic',
       },
       light: {
         main: {
           intensity: 1.2,
         },
       },
     },
     series: [{
       type: 'bar3D',
       data: [
         [0, 0, 0, 55],   // [x, y, z, value]
         [1, 0, 0, 70],
         [2, 0, 0, 40],
         [3, 0, 0, 90],
         [4, 0, 0, 60],
         [0, 1, 0, 50],
         [1, 1, 0, 80],
         [2, 1, 0, 75],
         [3, 1, 0, 45],
         [4, 1, 0, 95],
         [0, 2, 0, 30],
         [1, 2, 0, 85],
         [2, 2, 0, 70],
         [3, 2, 0, 55],
         [4, 2, 0, 60],
       ],
     }],
   };

   // 渲染图表
   chart.setOption(options);

4. 运行代码，您应该能够在页面上看到一个简单的3D柱状图。

请注意，上述示例中的数据和配置仅用于演示目的。您可以根据自己的需求修改数据和其他图表配置。

希望对您有帮助！如有任何问题，请随时提问。