Echarts資料視覺化全解註釋
阿新 • • 發佈：2019-01-16
全棧工程師開發手冊 （作者：欒鵬）
學習了百度Echart官方教程，不得不說官方教程還是非常不錯了。這裡對Echart所有教程知識進行了總結。
自己喜歡邊學邊總結邊寫demo，所以寫了這篇文章，包含了大部分的Echarts程式設計知識。讓你一個demo掌握Echarts所有程式設計，如果有問題可以留言。
此demo除了必須的連結檔案外，主要包括17個檔案：index.html和index.js、coordinate-geo.js、coordinate-grid.js、coordinate-parallel.js、coordinate-polar.js、coordinate-radar.js、series.js、series-bar.js、series-effectscatter.js、series-graph.js、series-heatmap.js、series-lines.js、series-map.js、series-pie.js、series-radar.js、series-scatter.js檔案
index.html檔案
為一個簡單的演示頁面。包含了Echarts所必須的連結檔案，圖表的使用方法，但不包含配置方法。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="container" style="height: 100%" coordinate-geo.js檔案
為地理座標系的配置引數
mytextStyle={
color:"#333", //文字顏色
fontStyle:"normal", //italic斜體 oblique傾斜
fontWeight:"normal", //文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字體系列
fontSize:18, //字型大小
};
mylineStyle={
color:"#333", //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
type:"solid", //座標軸線線的型別，solid，dashed，dotted
width:1, //座標軸線線寬
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myitemStyle={
color:"red", //顏色
borderColor:"#000", //邊框顏色
borderWidth:0, //柱條的描邊寬度，預設不描邊。
borderType:"solid", //柱條的描邊型別，預設為實線，支援 'dashed', 'dotted'。
barBorderRadius:0, //柱形邊框圓角半徑，單位px，支援傳入陣列分別指定柱形4個圓角半徑。
shadowBlur:10, //圖形陰影的模糊大小。
shadowColor:"#000", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離。
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形。
};
geo=[{
show:true, //是否顯示
map:"china", //地圖型別。world世界地圖，china中國地圖
roam:false, //是否開啟滑鼠縮放和平移漫遊。預設不開啟。如果只想要開啟縮放或者平移，可以設定成 'scale' 或者 'move'。設定成 true 為都開啟
center:[115.97, 29.71], //當前視角的中心點，用經緯度表示
aspectScale:0.75, //這個引數用於 scale 地圖的長寬比。
boundingCoords: [[-180, 90], [180, -90]], //二維陣列，定義定位的左上角以及右下角分別所對應的經緯度
zoom:1, //當前視角的縮放比例
scaleLimit:{ //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
min:1, //最小的縮放值
max:1, //最大的縮放值
},
nameMap:{ //自定義地區的名稱對映
'China' : '中國'
},
selectedMode: false , //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'表示單選，或者'multiple'表示多選。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等
normal:{
show:false, //是否在普通狀態下顯示標籤。
textStyle:mytextStyle, //普通狀態下的標籤文字樣式。
},
emphasis:{
show:false, //是否在高亮狀態下顯示標籤。
textStyle:mytextStyle //高亮狀態下的標籤文字樣式。
}
},
itemStyle:{ //地圖區域的多邊形 圖形樣式
normal:myitemStyle,
emphasis:myitemStyle
},
zlevel:0, //所屬圖形的 zlevel 值。
z:2, //所屬圖形的 z 值。
left:"10%", //元件離容器左側的距離,百分比字串或整型數字
top:60, //元件離容器上側的距離，百分比字串或整型數字
right:"auto", //元件離容器右側的距離,百分比字串或整型數字
bottom:"auto", //元件離容器下側的距離,百分比字串或整型數字
layoutCenter:['30%', '30%'], //地圖中心在螢幕中的位置
layoutSize:100, //地圖的大小,支援相對於螢幕寬高的百分比或者絕對的畫素大小。
regions:[{ //在地圖中對特定的區域配置樣式。
name: '廣東',
itemStyle: {
normal: {
areaColor: 'red',
color: 'red'
}
}
}],
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
}];coordinate-grid.js檔案
為直角座標系的配置引數
mytextStyle={
color:"#333", //文字顏色
fontStyle:"normal", //italic斜體 oblique傾斜
fontWeight:"normal", //文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字體系列
fontSize:18, //字型大小
};
mylineStyle={
color:"#333", //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
type:"solid", //座標軸線線的型別，solid，dashed，dotted
width:1, //座標軸線線寬
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
grid=[{
show:true, //是否顯示
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"10%", //元件離容器左側的距離,百分比字串或整型數字
top:60, //元件離容器上側的距離，百分比字串或整型數字
right:"auto", //元件離容器右側的距離,百分比字串或整型數字
bottom:"auto", //元件離容器下側的距離,百分比字串或整型數字
width:"auto", //圖例寬度
height:"auto", //圖例高度
containLabel: true, //grid 區域是否包含座標軸的刻度標籤，
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //陰影的模糊大小
tooltip:{ //座標系特定的 tooltip 設定
show:true, //是否顯示提示框元件，包括提示框浮層和 axisPointer
trigger:"axis", //觸發型別 none不觸發 'item' 資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis' 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
position: ['50%', '50%'], //提示框浮層的位置，預設不設定時位置會跟隨滑鼠的位置,[10, 10],回掉函式，inside滑鼠所在圖形的內部中心位置，top、left、bottom、right滑鼠所在圖形上側，左側，下側，右側，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支援字串模板和回撥函式兩種形式,模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文字樣式
},
}];
xAxis=[
{
show:true, //是否顯示 x 軸
gridIndex:0, //x 軸所在的 grid 的索引，預設位於第一個 grid
position:"bottom", //x 軸的位置。"top"，"bottom"，預設 grid 中的第一個 x 軸在 grid 的下方（'bottom'），第二個 x 軸視第一個 x 軸的位置放在另一側
offset:0, //X 軸相對於預設位置的偏移，在相同的 position 上有多個 X 軸的時候有用
type:"category", //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
// 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
name:'時間', //座標軸名稱
nameLocation:"end", //座標軸名稱顯示位置。可選：'start','middle','end'
nameTextStyle:mytextStyle, //座標軸名稱的文字樣式
nameGap:15, //座標軸名稱與軸線之間的距離
nameRotate:0, //座標軸名字旋轉，角度值
inverse:false, //是否是反向座標軸
boundaryGap:true, //類目軸中 boundaryGap 可以配置為 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的陣列，分別表示資料最小值和最大值的延伸範圍，可以直接設定數值或者相對的百分比，在設定 min 和 max 後無效['20%', '20%']
min:null, //座標軸刻度最小值。可以設定成特殊值 'dataMin'，此時取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
max:null, //座標軸刻度最大值。可以設定成特殊值 'dataMax'，此時取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
scale:false, //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
splitNumber:5, //座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
minInterval:0, //自動計算的座標軸最小間隔大小,例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸中（type: 'value'）有效。
logBase:10, //對數軸的底數，只在對數軸中（type: 'log'）有效
silent:false, //座標軸是否是靜態無法互動
triggerEvent:false, //座標軸的標籤是否響應和觸發滑鼠事件
axisLine:{ //座標 軸線
show:true, //是否顯示座標軸軸線
onZero:true, //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效
lineStyle:mylineStyle
},
axisTick :{ //座標軸刻度相關設定
show:true, //是否顯示座標軸刻度。
alignWithLabel:false, //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊
interval:auto, //座標軸刻度的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //座標軸刻度是否朝內，預設朝外。
length:5, //座標軸刻度的長度。
lineStyle:mylineStyle
},
axisLabel:{ //座標軸刻度標籤的相關設定
show:true, //是否顯示
interval:"auto", //座標軸刻度標籤的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //刻度標籤是否朝內，預設朝外
rotate:0, //刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度
margin:8, //刻度標籤與軸線之間的距離
formatter: function (value, index) { //使用函式模板，函式引數分別為刻度數值（類目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否顯示最小 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最小 tick 的 label）
showMaxLabel:null, //是否顯示最大 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最大 tick 的 label）
textStyle:mytextStyle
},
splitLine:{ //座標軸在 grid 區域中的分隔線。
show:true, //是否顯示分隔線。預設數值軸顯示，類目軸不顯示。
interval:"auto", //座標軸分隔線的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，可以用數值表示間隔的資料，也可以通過回撥函式控制。回撥函式格式如下：
lineStyle:mylineStyle
},
splitArea:{ //座標軸在 grid 區域中的分隔區域，預設不顯示。
interval:"auto",
show:false, //是否顯示分隔區域
areaStyle:myareaStyle
},
data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], //類目資料，在類目軸（type: 'category'）中有效。
zlevel:0, //X 軸所有圖形的 zlevel 值。
z:0, //X 軸元件的所有圖形的z值
}
];
yAxis=xAxis; //y軸配置內容同x軸
coordinate-parallel.js檔案
為平行座標系的配置引數
mytextStyle={
color:"#333", //文字顏色
fontStyle:"normal", //italic斜體 oblique傾斜
fontWeight:"normal", //文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字體系列
fontSize:18, //字型大小
};
mylineStyle={
color:"#333", //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
type:"solid", //座標軸線線的型別，solid，dashed，dotted
width:1, //座標軸線線寬
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
parallel=[{
show:true, //是否顯示
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"10%", //元件離容器左側的距離,百分比字串或整型數字
top:60, //元件離容器上側的距離，百分比字串或整型數字
right:"auto", //元件離容器右側的距離,百分比字串或整型數字
bottom:"auto", //元件離容器下側的距離,百分比字串或整型數字
width:"auto", //圖例寬度
height:"auto", //圖例高度
layout: "horizontal", //佈局方式，可選值為：'horizontal'：水平排布各個座標軸。'vertical'：豎直排布各個座標軸。
axisExpandable:false, //是否允許點選展開摺疊 axis。
axisExpandCenter:null, //初始時，以哪個軸為中心展開，這裡給出軸的 index。沒有預設值，需要手動指定。
axisExpandCount:0, //初始時，有多少個軸會處於展開狀態。建議根據你的維度個數而手動指定。
axisExpandWidth:50, //在展開狀態，軸的間距是多少，單位為畫素。
axisExpandTriggerOn:"click", //'click'：滑鼠點選的時候 expand。'mousemove'：滑鼠懸浮的時候 expand。
parallelAxisDefault:{ //配置多個 parallelAxis 時，有些值一樣的屬性，如果書寫多遍則比較繁瑣，那麼可以放置在 parallel.parallelAxisDefault 裡
type:"category", //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
// 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
name:'時間', //座標軸名稱
nameLocation:"end", //座標軸名稱顯示位置。可選：'start','middle','end'
nameTextStyle:mytextStyle, //座標軸名稱的文字樣式
nameGap:15, //座標軸名稱與軸線之間的距離
nameRotate:0, //座標軸名字旋轉，角度值
inverse:false, //是否是反向座標軸
boundaryGap:true, //類目軸中 boundaryGap 可以配置為 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的陣列，分別表示資料最小值和最大值的延伸範圍，可以直接設定數值或者相對的百分比，在設定 min 和 max 後無效['20%', '20%']
min:null, //座標軸刻度最小值。可以設定成特殊值 'dataMin'，此時取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
max:null, //座標軸刻度最大值。可以設定成特殊值 'dataMax'，此時取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
scale:false, //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
splitNumber:5, //座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
minInterval:0, //自動計算的座標軸最小間隔大小,例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸中（type: 'value'）有效。
logBase:10, //對數軸的底數，只在對數軸中（type: 'log'）有效
silent:false, //座標軸是否是靜態無法互動
triggerEvent:false, //座標軸的標籤是否響應和觸發滑鼠事件
axisLine:{ //座標 軸線
show:true, //是否顯示座標軸軸線
onZero:true, //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效
lineStyle:mylineStyle
},
axisTick :{ //座標軸刻度相關設定
show:true, //是否顯示座標軸刻度。
alignWithLabel:false, //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊
interval:auto, //座標軸刻度的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //座標軸刻度是否朝內，預設朝外。
length:5, //座標軸刻度的長度。
lineStyle:mylineStyle //
},
axisLabel:{ //座標軸刻度標籤的相關設定
show:true, //是否顯示
interval:"auto", //座標軸刻度標籤的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //刻度標籤是否朝內，預設朝外
rotate:0, //刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度
margin:8, //刻度標籤與軸線之間的距離
formatter: function (value, index) { //使用函式模板，函式引數分別為刻度數值（類目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否顯示最小 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最小 tick 的 label）
showMaxLabel:null, //是否顯示最大 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最大 tick 的 label）
textStyle:mytextStyle
},
data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], //類目資料，在類目軸（type: 'category'）中有效。
},
}];
parallelAxis=[
{
dim:0, //座標軸的維度序號。
parallelIndex:0, //用於定義『座標軸』對應到哪個『座標系』中。
realtime:true, //是否座標軸刷選的時候，實時重新整理檢視。如果設為 false，則在刷選動作結束時候，才重新整理檢視。大資料量時，建議設定成 false，從而避免卡頓。
areaSelectStyle:{ //在座標軸上可以進行框選，這裡是一些框選的設定。
width:20, //框選範圍的寬度。
borderWidth:1, //選框的邊框寬度。
borderColor:'rgba(160,197,232)', //選框的邊框顏色。
color: 'rgba(160,197,232)', //選框的填充色。
opacity:0.3, //選框的透明度。
},
type:"category", //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
// 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
name:'時間', //座標軸名稱
nameLocation:"end", //座標軸名稱顯示位置。可選：'start','middle','end'
nameTextStyle:mytextStyle, //座標軸名稱的文字樣式
nameGap:15, //座標軸名稱與軸線之間的距離
nameRotate:0, //座標軸名字旋轉，角度值
inverse:false, //是否是反向座標軸
boundaryGap:true, //類目軸中 boundaryGap 可以配置為 true 和 false。非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的陣列，分別表示資料最小值和最大值的延伸範圍，可以直接設定數值或者相對的百分比，在設定 min 和 max 後無效['20%', '20%']
min:null, //座標軸刻度最小值。可以設定成特殊值 'dataMin'，此時取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
max:null, //座標軸刻度最大值。可以設定成特殊值 'dataMax'，此時取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分佈。在類目軸中，也可以設定為類目的序數
scale:false, //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
splitNumber:5, //座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
minInterval:0, //自動計算的座標軸最小間隔大小,例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸中（type: 'value'）有效。
logBase:10, //對數軸的底數，只在對數軸中（type: 'log'）有效
silent:false, //座標軸是否是靜態無法互動
triggerEvent:false, //座標軸的標籤是否響應和觸發滑鼠事件
axisLine:{ //座標 軸線
show:true, //是否顯示座標軸軸線
onZero:true, //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效
lineStyle:mylineStyle
},
axisTick :{ //座標軸刻度相關設定
show:true, //是否顯示座標軸刻度。
alignWithLabel:false, //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊
interval:auto, //座標軸刻度的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //座標軸刻度是否朝內，預設朝外。
length:5, //座標軸刻度的長度。
lineStyle:mylineStyle //
},
axisLabel:{ //座標軸刻度標籤的相關設定
show:true, //是否顯示
interval:"auto", //座標軸刻度標籤的顯示間隔，在類目軸中有效。預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推
inside:false, //刻度標籤是否朝內，預設朝外
rotate:0, //刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度
margin:8, //刻度標籤與軸線之間的距離
formatter: function (value, index) { //使用函式模板，函式引數分別為刻度數值（類目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否顯示最小 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最小 tick 的 label）
showMaxLabel:null, //是否顯示最大 tick 的 label。可取值 true, false, null。預設自動判定（即如果標籤重疊，不會顯示最大 tick 的 label）
textStyle:mytextStyle
},
data : ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], //類目資料，在類目軸（type: 'category'）中有效。
}
];
coordinate-polar.js檔案
為極座標系的配置引數
mytextStyle={
color:"#333", //文字顏色
fontStyle:"normal", //italic斜體 oblique傾斜
fontWeight:"normal", //文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字體系列
fontSize:18, //字型大小
};
mylineStyle={
color:"#333", //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
type:"solid", //座標軸線線的型別，solid，dashed，dotted
width:1, //座標軸線線寬
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離。
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //圖形陰影的模糊大小。
opacity:1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
polar=[{
show:true, //是否顯示
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
center:['50%', '50%'], //極座標系的中心（圓心）座標，畫素值或百分比均可。設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度
radius:['20%', '70%'], //陣列的第一項是內半徑，第二項是外半徑。支援設定成百分比，相對於容器高寬中較小的一項的一半。
tooltip:{ //座標系特定的 tooltip 設定
show:true, //是否顯示提示框元件，包括提示框浮層和 axisPointer
trigger:"axis", //觸發型別 none不觸發 'item' 資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis' 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
position: ['50%', '50%'], //提示框浮層的位置，預設不設定時位置會跟隨滑鼠的位置,[10, 10],回掉函式，inside滑鼠所在圖形的內部中心位置，top、left、bottom、right滑鼠所在圖形上側，左側，下側，右側，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支援字串模板和回撥函式兩種形式,模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文字樣式
},
}];
radiusAxis=[
{
show:true, //是否顯示 x 軸
polarIndex :0, //x 軸所在的 grid 的索引，預設位於第一個 grid
type:"category", //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
// 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
name:'時間',