echartGL中option各3D配置属性配置详解

最近，接手一个项目需要实现echart中各种3D图表样式，我还是一如既往的从研究echart配置项中各属性含义开始入手，由于自己需要实现的是柱状图效果，类似地图3D 效果在这里不展示，直接进入自己所研究的内容

1、grid3D

希望上面的图片能够加深对grid3D各个属性的理解，本人直接采用echarts官网中的例子http://gallery.echartsjs.com/editor.html?c=xrJ5XyZ5px进行修改，只要把下面的option对应替换即可得到相应的效果，每个属性解释在下面option里面，这里就不解释

替换example里面的grid3D为下列代码

        grid3D: {
            show:true,//是否显示三维迪卡尔坐标
            boxWidth: 100,//三维场景高度
            // boxHeight:200,//三维场景高度
            boxDepth: 80,//三维笛卡尔坐标系组件在三维场景中的深度。
            axisLine:{//坐标轴轴线(线)控制
                show:true,//该参数需设为true
                // interval:200,//x,y坐标轴刻度标签的显示间隔，在类目轴中有效。
                lineStyle:{//坐标轴样式
                    color:'red',
                    opacity:1,//(单个刻度不会受影响)
                    width:2//线条宽度
                }
            },
            axisLabel:{
                show:true,//是否显示刻度  (刻度上的数字，或者类目)
                //   
                interval:5,//坐标轴刻度标签的显示间隔，在类目轴中有效。
                formatter:function(v){
                    // return;
                },

                textStyle:{
                    // color:'#000',//刻度标签样式，见图黑色刻度标签
                    color: function (value, index) {
                        return value >= 6? 'green' : 'red';//根据范围显示颜色，主页为值有效
                    },
                    //  borderWidth:"",//文字的描边宽度。
                    //  borderColor:'',//文字的描边颜色。
                    fontSize:14,//刻度标签字体大小
                    fontWeight:'',//粗细
                }
            },
            axisTick:{
                show:true,//是否显示出刻度
                // interval:100,//坐标轴刻度标签的显示间隔，在类目轴中有效
                length:5,//坐标轴刻度的长度
                lineStyle:{//举个例子，样式太丑将就
                    color:'#000',//颜色
                    opacity:1,
                    width:5//厚度（虽然为宽表现为高度），对应length*(宽)
                }
            },
            splitLine:{//平面上的分隔线。
                show:true,//立体网格线  
                // interval:100,//坐标轴刻度标签的显示间隔，在类目轴中有效
                splitArea:{
                    show:true,
                    // interval:100,//坐标轴刻度标签的显示间隔，在类目轴中有效
                    areaStyle:{
                        color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)','rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
                    }
                },
            },
            axisPointer:{//坐标轴指示线。
                show:true,//鼠标在chart上的显示线
                // lineStyle:{
                //     color:'#000',//颜色
                //     opacity:1,
                //     width:5//厚度（虽然为宽表现为高度），对应length*(宽)
                // }
            },
            //整个chart背景，可为自定义颜色或图片
            //         environment: 'asset/starfield.jpg'
            // // 配置为纯黑色的背景
            // environment: '#000'
            environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: '#00aaff' // 天空颜色
            }, {
                offset: 0.7, color: '#998866' // 地面颜色
            }, {
                offset: 1, color: '#998866' // 地面颜色
            }], false),
            viewControl: {//viewControl用于鼠标的旋转，缩放等视角控制。(以下适合用于地球自转等)
                // projection: 'orthographic'//默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                // autoRotate:true,//会有自动旋转查看动画出现,可查看每个维度信息
                // autoRotateDirection:'ccw',//物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                // autoRotateSpeed:12,//物体自传的速度
                // autoRotateAfterStill:2,//在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。
                // distance:300,//默认视角距离主体的距离(常用)
                // alpha:1,//视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                // beta:10,//视角绕 y 轴，即左右旋转的角度。
                // center:[]//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                // zlevel://组件所在的层。

                animation:true
            },
            light: {//光照相关的设置
                main: {
                    color:'#fff',//光照颜色会与所设置颜色发生混合
                    intensity:1.2,//主光源的强度(光的强度)
                    shadow: true,//主光源是否投射阴影。默认关闭。
                    // alpha:0//主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向(跟beta结合可确定太阳位置)
                    // beta:10//主光源绕 y 轴，即左右旋转的角度。
                },
                ambient: {//全局的环境光设置。
                    intensity: 0.3,
                    color:'#fff'//影响柱条颜色
                },
                // ambientCubemap: {//会使用纹理作为光源的环境光
                //  texture: 'pisa.hdr',
                // // 解析 hdr 时使用的曝光值
                // exposure: 1.0
                // }
            },
            // postEffect:{//后处理特效的相关配置，后处理特效可以为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果。可以让整个画面更富有质感。
            //     show:true,
            //     bloom:{
            //         enable:true//高光特效,适合地球仪
            //     }
            // }
            //调整位置(常用)
            top:0,//组件的视图离容器上侧的距离
            // right:10,
            //  bottom:0,
            //组件的视图宽度。
            // width:100,
            // height:200
        },

上面为grid3D各个属性及详细解释，效果图如下，为了显示各标签作用，图丑勿喷^_^

xAixs3D:

（复制前请重新刷新echart demo页面将下面代码复制入即可看到运结果，根据需要进行参数更改）   

    xAxis3D: {
        type: 'category',//value,category,time.log
        show:false,//是否显示 x 轴。\
        name:'x轴',//坐标轴名称
        grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
        nameTextStyle:{//‘x轴’样式设置
            color:'red'
        },
        nameGap:20,//坐标轴名称与轴线之间的距离，注意是三维空间的距离而非屏幕像素值。
        // min:-3,
        // min:0,//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。适用于值在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）
        // max:100,
        //scale:'',//只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
        data: hours,//如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
       //单个类目样式设置如下：data: [{
//     value: '周一',
//     // 突出周一
//     textStyle: {
//         fontSize: 20,
//         color: 'red'
//     }
// }, '周二', '周三', '周四', '周五', '周六', '周日']
        // minInterval:''//自动计算的坐标轴最小间隔大小。type为value
        // interval:''//类目中无效
        axisLine:{
            show:true,
            interval:2,//(此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            lineStyle:{
                color:'red'
            },
        },
        axisLabel:{
            show:true,
            margin:15,
            interval:3,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}%"//自定义x轴显示数据标签格式
        },
        axisTick:{},
        axisPointer:{
            // label:'',//标签
            show:true//是否显示坐标轴指示线。
        }
        
    },

series:此处只讨论series中type为bar3D的情况

 series: [{
        //三维柱状图
        type: 'bar3D',
        data: data.map(function (item) {
            return {
                value: [item[1], item[0], item[2]],
            }
        }),
        bevelSize:0.5,//柱子的倒角尺寸
        bevelSmoothness:39,//柱子倒角的光滑/圆润度，数值越大越光滑/圆润。
        shading: 'lambert',//color,lambert,realistic
        itemStyle:{//柱条样式
            color:'#000',
            // opacity:0.5
        },
        label: {
            show:true,//柱子的样式，包括颜色和不透明度。
            distance:10,//标签距离图形的距离
            // formatter:function(value){
            //   return value;  
            // },
            textStyle: {//标签的字体样式。
                fontSize: 16,
                borderWidth: 1
            }
        },

        emphasis: {//柱子高亮状态的标签和样式配置。
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]

最后，实现一个比较常见的柱状图效果如下：（下面链接为echart官方实例）

http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b

当有两个柱状图时候，同2d图一样，直接在series加入另外一组数据(也为echart官网实例)

http://gallery.echartsjs.com/editor.html?c=xSJsdlo2hb

分别效果图如下：