最近，接手一個項目需要實現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
分別效果圖如下：
