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
        },