echarts立体圆柱柱状图

### ECharts 创建立体圆柱柱状图

为了实现ECharts中的立体圆柱柱状图，可以利用`echarts-gl`库来增强三维效果。下面是一个具体的实例说明如何配置并展示这种图表。

#### 导入必要的资源文件
首先确保项目中已经引入了 `echarts` 和 `echarts-gl` 库[^1]：

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

#### 初始化容器与基本设置
定义一个HTML元素作为图表渲染的目标区域，并初始化ECharts实例:

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

#### 配置项详解
接下来是最重要的部分——配置项的设计。这里特别注意的是，在系列（series）选项里指定了类型为 `'cylinder'` 来表示我们要绘制的是圆柱形而不是默认的矩形条；同时通过调整视角参数 (`viewControl`) 可以让图形看起来更具有空间感。

option = {
    backgroundColor: '#fff',
    
    // 设置视点控制，默认俯仰角和旋转角度
    visualMap: false,
    viewControl: {
        projection: 'orthographic',  // 正交投影使物体显得更加真实
        alpha: 40,                   // 上下倾斜度数
        beta: 25                     // 左右旋转度数
    },
    
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},

    grid3D: {
        boxWidth: 200,
        boxDepth: 80,

        light: {
            main: {
                intensity: 1.2
            },
            ambient: {
                intensity: 0.3
            }
        },

        environment: 'auto'
    },

    series : [
        {
            type: 'cylinder',
            itemStyle: {
                color: function(params){
                    var value = params.value[2];
                    return value === 0 ? 'rgba(0,0,0,0)' : null;
                }
            },
            
            data:[
                [0, 0, 5], [0, 1, 7],
                [1, 0, 9], [1, 1, 6]
            ]
        }
    ]
};
myChart.setOption(option);

上述代码片段展示了如何自定义颜色逻辑，当数值等于零时返回透明色，从而达到隐藏无意义的数据的效果。