最近，接手一个项目需要实现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
分别效果图如下：
