echartGL中option各3D配置属性配置详解
最近，接⼿⼀个项⽬需要实现echart中各种3D图表样式，我还是⼀如既往的从研究echart配置项中各属性含义开始⼊⼿，由于⾃⼰需要实现的是柱状图效果，类似地图3D 效果在这⾥不展⽰，直接进⼊⾃⼰所研究的内容
1、grid3D
替换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){
formatter:function(v){
// return;
},
textStyle:{
// color:'#000',//刻度标签样式，见图⿊⾊刻度标签
color: function (value, index) {
return value >= 6? 'green' : 'red';//根据范围显⽰颜⾊，主页为值有效
},
//  borderWidth:"",//⽂字的描边宽度。
//  borderColor:'',//⽂字的描边颜⾊。
fontSize:14,//刻度标签字体⼤⼩
fontWeight:'',//粗细
rotate属性}
},
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: aphic.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://组件所在的层。
// 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页⾯将下⾯代码复制⼊即可看到运结果，根据需要进⾏参数更改）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。