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%"></div>
<!--所需js檔案-->
<script type="text/javascript" src="js/echarts-all-3.js"></script>
<script type="text/javascript" src="js/extension/dataTool.min.js"></script>
<script type="text/javascript" src="js/extension/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/map/js/china.js"></script>
<script type="text/javascript" src="js/map/js/world.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/extension/bmap.min.js"></script>
<script type="text/javascript" src="bar.js"></script> <!-- 自定義圖表配置option物件，只需要學習這個 -->
<!--程式碼-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom); /* 使用dom初始化echarts*/
myChart.hideLoading(); /* 載入緩衝圖 */
option={ /* 對應需要設定配置 */
title:title,
};
myChart.showLoading(); /* 去除載入緩衝圖 */
myChart.setOption(option); /* 應用配置選項 */
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
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:'時間', //座標軸名稱
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值
}
];
angleAxis=[{ //y軸配置內容同x軸
polarIndex:0, //角度軸所在的極座標系的索引，預設使用第一個極座標系
startAngle:90, //起始刻度的角度，預設為 90 度，即圓心的正上方。0 度為圓心的正右方。
clockwise:true, //刻度增長是否按順時針，預設順時針。
type:"category", //座標軸型別。'value' 數值軸，適用於連續資料。'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。
// 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。'log' 對數軸。適用於對數資料
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, //所屬圖形的 zlevel 值。
z:0, //元件的所屬圖形的z值
}];
coordinate-radar.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 時不繪製該圖形
};
radar=[{
center:['50%', '50%'], //中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。
radius:"75%", //陣列的第一項是內半徑，第二項是外半徑。支援設定成百分比，相對於容器高寬中較小的一項的一半。
startAngle:90, //起始刻度的角度，預設為 90 度，即圓心的正上方。0 度為圓心的正右方。
name:{ //雷達圖每個指示器名稱的配置項。
show:true, //是否顯示指示器名稱。
formatter:function (value, indicator) { //用回撥函式，第一個引數是指示器名稱，第二個引數是指示器配置項
return '【' + value + '】';
},
textStyle:mytextStyle
},
nameGap:15, //指示器名稱和指示器軸的距離
splitNumber:5, //指示器軸的分割段數
scale:false, //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設定成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設定 min 和 max 之後該配置項無效。
shape:"polygon", //雷達圖繪製型別，支援 'polygon' 和 'circle'。
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
},
indicator: [ //雷達圖的指示器，用來指定雷達圖中的多個變數（維度）
{ name: '銷售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '資訊科技（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研發（Development）', max: 52000},
{ name: '市場（Marketing）', max: 25000}
],
zlevel:0, //所屬圖形的 zlevel 值。
z:0, //元件的所屬圖形的z值
}];
index.js檔案
為圖表顏色、背景、標題、提示框、工具框、圖例、縮放設定、視覺對映等內容
/*chart 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表型別或由基本圖表組合而成的“混搭”圖表，可能包括座標軸、圖例等
axis 直角座標系中的一個座標軸，座標軸可分為類目軸和數值軸
xAxis 直角座標系中的橫軸，通常並預設為類目軸
yAxis 直角座標系中的縱軸，通常並預設為數值軸
grid 直角座標系中除座標軸外的繪圖網格
legend 圖例，表述資料和圖形的關聯
dataRange 值域選擇，常用於展現地域資料時選擇值域範圍
dataZoom 資料區域縮放，常用於展現大資料時選擇可視範圍
toolbox 輔助工具箱，輔助功能，如新增標線，框選縮放等
tooltip 氣泡提示框，常用於展現更詳細的資料
timeline 時間軸，常用於展現同一組資料在時間維度上的多份資料
series 資料系列，一個圖表可能包含多個系列，每一個系列可能包含多個資料
line 折線圖，堆積折線圖，區域圖，堆積區域圖。
bar 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter 散點圖，氣泡圖。散點圖至少需要橫縱兩個資料，更高維度資料加入時可以對映為顏色或大小，當對映到大小時則為氣泡圖
k K線圖，蠟燭圖。常用於展現股票交易資料。
pie 餅圖，圓環圖。餅圖支援兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar 雷達圖，填充雷達圖。高維度資料展現的常用圖表。
chord 和絃圖。常用於展現關係資料，外層為圓環圖，可體現資料佔比關係，內層為各個扇形間相互連線的弦，可體現關係資料
force 力導佈局圖。常用於展現複雜關係網路聚類佈局。
map 地圖。內建世界地圖、中國及中國34個省市自治區地圖資料、可通過標準GeoJson擴充套件地圖型別。支援svg擴充套件類地圖應用，如室內地圖、運動場、物件構造等。*/
color=['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];//調色盤顏色列表。如果系列沒有設定顏色，則會依次迴圈從該列表中取顏色作為系列顏色
backgroundColor="#000000"; //背景色，預設無背景。 'rgb(128, 128, 128)'， 'rgba(128, 128, 128, 0.5)'，除了純色之外顏色也支援漸變色和紋理填充
mytextStyle={
color:"#333", //文字顏色
fontStyle:"normal", //italic斜體 oblique傾斜
fontWeight:"normal", //文字粗細bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字型系列
fontSize:18, //字型大小
};
title={
show:true, //是否顯示
text:"大標題", //大標題
subtext:"小標題", //小標題
sublink:"http://www.baidu.com", //小標題連結
target:"blank", //'self' 當前視窗開啟，'blank' 新視窗開啟
subtarget:"blank", //小標題開啟連結的視窗
textAlign:"center", //文字水平對齊
textBaseline:"top", //文字垂直對齊
textStyle:mytextStyle, //標題樣式
subtextStyle:mytextStyle, //小標題樣式
padding:5, //標題內邊距 5 [5, 10] [5,10,5,10]
itemGap:10, //大小標題間距
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //陰影的模糊大小
};
tooltip ={ //提示框元件
trigger: 'item', //觸發型別,'item'資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
triggerOn:"mousemove", //提示框觸發的條件,'mousemove'滑鼠移動時觸發。'click'滑鼠點選時觸發。'mousemove|click'同時滑鼠移動和點選時觸發。'none'不在 'mousemove' 或 'click' 時觸發
showContent:true, //是否顯示提示框浮層
alwaysShowContent:true, //是否永遠顯示提示框內容
showDelay:0, //浮層顯示的延遲，單位為 ms
hideDelay:100, //浮層隱藏的延遲，單位為 ms
enterable:false, //滑鼠是否可進入提示框浮層中
confine:false, //是否將 tooltip 框限制在圖表的區域內
transitionDuration:0.4, //提示框浮層的移動動畫過渡時間，單位是 s,設定為 0 的時候會緊跟著滑鼠移動
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, //文字樣式
};
toolbox={
show : true, //是否顯示工具欄元件
orient:"horizontal", //工具欄 icon 的佈局朝向'horizontal' 'vertical'
itemSize:15, //工具欄 icon 的大小
itemGap:10, //工具欄 icon 每項之間的間隔
showTitle:true, //是否在滑鼠 hover 的時候顯示每個工具 icon 的標題
feature : {
mark : { // '輔助線開關'
show: true
},
dataView : { //資料檢視工具，可以展現當前圖表所用的資料，編輯後可以動態更新
show: true, //是否顯示該工具。
title:"資料檢視",
readOnly: false, //是否不可編輯（只讀）
lang: ['資料檢視', '關閉', '重新整理'], //資料檢視上有三個話術，預設是['資料檢視', '關閉', '重新整理']
backgroundColor:"#fff", //資料檢視浮層背景色。
textareaColor:"#fff", //資料檢視浮層文字輸入區背景色
textareaBorderColor:"#333", //資料檢視浮層文字輸入區邊框顏色
textColor:"#000", //文字顏色。
buttonColor:"#c23531", //按鈕顏色。
buttonTextColor:"#fff", //按鈕文字顏色。
},
magicType: { //動態型別切換
show: true,
title:"切換", //各個型別的標題文字，可以分別配置。
type: ['line', 'bar'], //啟用的動態型別，包括'line'（切換為折線圖）, 'bar'（切換為柱狀圖）, 'stack'（切換為堆疊模式）, 'tiled'（切換為平鋪模式）
},
restore : { //配置項還原。
show: true, //是否顯示該工具。
title:"還原",
},
saveAsImage : { //儲存為圖片。
show: true, //是否顯示該工具。
type:"png", //儲存的圖片格式。支援 'png' 和 'jpeg'。
name:"pic1", //儲存的檔名稱，預設使用 title.text 作為名稱
backgroundColor:"#ffffff", //儲存的圖片背景色，預設使用 backgroundColor，如果backgroundColor不存在的話會取白色
title:"儲存為圖片",
pixelRatio:1 //儲存圖片的解析度比例，預設跟容器相同大小，如果需要儲存更高解析度的，可以設定為大於 1 的值，例如 2
},
dataZoom :{ //資料區域縮放。目前只支援直角座標系的縮放
show: true, //是否顯示該工具。
title:"縮放", //縮放和還原的標題文字
xAxisIndex:0, //指定哪些 xAxis 被控制。如果預設則控制所有的x軸。如果設定為 false 則不控制任何x軸。如果設定成 3 則控制 axisIndex 為 3 的x軸。如果設定為 [0, 3] 則控制 axisIndex 為 0 和 3 的x軸
yAxisIndex:false, //指定哪些 yAxis 被控制。如果預設則控制所有的y軸。如果設定為 false 則不控制任何y軸。如果設定成 3 則控制 axisIndex 為 3 的y軸。如果設定為 [0, 3] 則控制 axisIndex 為 0 和 3 的y軸
},
},
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
width:"auto", //圖例寬度
height:"auto", //圖例高度
};
legend={
show:true, //是否顯示
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
width:"auto", //圖例寬度
height:"auto", //圖例高度
orient:"horizontal", //圖例排列方向
align:"auto", //圖例標記和文字的對齊,left,right
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
itemGap:10, //圖例每項之間的間隔
itemWidth:25, //圖例標記的圖形寬度
itemHeight:14, //圖例標記的圖形高度
formatter:function (name) { //用來格式化圖例文字，支援字串模板和回撥函式兩種形式。模板變數為圖例名稱 {name}
return 'Legend ' + name;
},
selectedMode:"single", //圖例選擇的模式,true開啟,false關閉,single單選,multiple多選
inactiveColor:"#ccc", //圖例關閉時的顏色
textStyle:mytextStyle, //文字樣式
data:['類別1', '類別2', '類別3'], //series中根據名稱區分
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
shadowColor:"red", //陰影顏色
shadowOffsetX:0, //陰影水平方向上的偏移距離
shadowOffsetY:0, //陰影垂直方向上的偏移距離
shadowBlur:10, //陰影的模糊大小
};
dataZoom=[ //區域縮放
{
id: 'dataZoomX',
show:true, //是否顯示 元件。如果設定為 false，不會顯示，但是資料過濾的功能還存在。
backgroundColor:"rgba(47,69,84,0)", //元件的背景顏色
type: 'slider', //slider表示有滑動塊的，inside表示內建的
dataBackground:{ //資料陰影的樣式。
lineStyle:mylineStyle, //陰影的線條樣式
areaStyle:myareaStyle, //陰影的填充樣式
},
fillerColor:"rgba(167,183,204,0.4)", //選中範圍的填充顏色。
borderColor:"#ddd", //邊框顏色。
filterMode: 'filter', //'filter'：當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只要有一個維度在資料視窗外，整個資料項就會被過濾掉。
//'weakFilter'：當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只有當全部維度都在資料視窗同側外部，整個資料項才會被過濾掉。
//'empty'：當前資料視窗外的資料，被 設定為空。即 不會 影響其他軸的資料範圍。
//'none': 不過濾資料，只改變數軸範圍。
xAxisIndex:0, //設定 dataZoom-inside 元件控制的 x軸,可以用陣列表示多個軸
yAxisIndex:[0,2], //設定 dataZoom-inside 元件控制的 y軸,可以用陣列表示多個軸
radiusAxisIndex:3, //設定 dataZoom-inside 元件控制的 radius 軸,可以用陣列表示多個軸
angleAxisIndex:[0,2], //設定 dataZoom-inside 元件控制的 angle 軸,可以用陣列表示多個軸
start: 30, //資料視窗範圍的起始百分比,表示30%
end: 70, //資料視窗範圍的結束百分比,表示70%
startValue:10, //資料視窗範圍的起始數值
endValue:100, //資料視窗範圍的結束數值。
orient:"horizontal", //佈局方式是橫還是豎。不僅是佈局方式，對於直角座標系而言，也決定了，預設情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。
zoomLock:false, //是否鎖定選擇區域（或叫做資料視窗）的大小。如果設定為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
throttle:100, //設定觸發檢視重新整理的頻率。單位為毫秒（ms）。
zoomOnMouseWheel:true, //如何觸發縮放。可選值為：true：表示不按任何功能鍵，滑鼠滾輪能觸發縮放。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt'：表示按住 alt 和滑鼠滾輪能觸發縮放。
moveOnMouseMove:true, //如何觸發資料視窗平移。true：表示不按任何功能鍵，滑鼠移動能觸發資料視窗平移。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl'：表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt'：表示按住 alt 和滑鼠移動能觸發資料視窗平移。
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止元件的功能。
xAxisIndex:0, //設定 dataZoom-inside 元件控制的 x軸,可以用陣列表示多個軸
yAxisIndex:[0,2], //設定 dataZoom-inside 元件控制的 y軸,可以用陣列表示多個軸
radiusAxisIndex:3, //設定 dataZoom-inside 元件控制的 radius 軸,可以用陣列表示多個軸
angleAxisIndex:[0,2], //設定 dataZoom-inside 元件控制的 angle 軸,可以用陣列表示多個軸
start: 30, //資料視窗範圍的起始百分比,表示30%
end: 70, //資料視窗範圍的結束百分比,表示70%
startValue:10, //資料視窗範圍的起始數值
endValue:100, //資料視窗範圍的結束數值。
orient:"horizontal", //佈局方式是橫還是豎。不僅是佈局方式，對於直角座標系而言，也決定了，預設情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。
zoomLock:false, //是否鎖定選擇區域（或叫做資料視窗）的大小。如果設定為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
throttle:100, //設定觸發檢視重新整理的頻率。單位為毫秒（ms）。
zoomOnMouseWheel:true, //如何觸發縮放。可選值為：true：表示不按任何功能鍵，滑鼠滾輪能觸發縮放。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt'：表示按住 alt 和滑鼠滾輪能觸發縮放。
moveOnMouseMove:true, //如何觸發資料視窗平移。true：表示不按任何功能鍵，滑鼠移動能觸發資料視窗平移。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl'：表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt'：表示按住 alt 和滑鼠移動能觸發資料視窗平移。
}
];
visualMap=[ //視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。
// colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標籤）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。
{
show:true, //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在
type: 'continuous', // 定義為連續型 viusalMap
min:10, //指定 visualMapContinuous 元件的允許的最小值
max:100, //指定 visualMapContinuous 元件的允許的最大值
range:[15, 40], //指定手柄對應數值的位置。range 應在 min max 範圍內
calculable:true, //是否顯示拖拽用的手柄（手柄能拖拽調整選中範圍）
realtime:true, //拖拽時，是否實時更新
inverse:false, //是否反轉 visualMap 元件
precision:0, //資料展示的小數精度，預設為0，無小數點
itemWidth:20, //圖形的寬度，即長條的寬度。
itemHeight:140, //圖形的高度，即長條的高度。
align:"auto", //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //兩端的文字
textGap:10, //兩端文字主體之間的距離，單位為px
dimension:2, //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度
seriesIndex:1, //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列
hoverLink:true, //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮
inRange:{ //定義 在選中範圍中 的視覺元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定義 在選中範圍外 的視覺元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
orient:"vertical", //圖例排列方向
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
textStyle:mytextStyle, //文字樣式
formatter: function (value) { //標籤的格式化工具。
return 'aaaa' + value; // 範圍標籤顯示內容。
}
},
{
show:true, //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在
type: 'piecewise', // 定義為分段型 visualMap
splitNumber:5, //對於連續型資料，自動平均切分成幾段。預設為5段
pieces: [ //自定義『分段式視覺對映元件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式
{min: 1500}, // 不指定 max，表示 max 為無限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定義label）'},
{value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的情況。
{max: 5} // 不指定 min，表示 min 為無限大（-Infinity）。
],
categories:['嚴重汙染', '重度汙染', '中度汙染', '輕度汙染', '良', '優'], //用於表示離散型資料（或可以稱為類別型資料、列舉型資料）的全集
min:10, //指定 visualMapContinuous 元件的允許的最小值
max:100, //指定 visualMapContinuous 元件的允許的最大值
minOpen:true, //介面上會額外多出一個『< min』的選塊
maxOpen:true, //介面上會額外多出一個『> max』的選塊。
selectedMode:"multiple", //選擇模式，可以是：'multiple'（多選）。'single'（單選）。
inverse:false, //是否反轉 visualMap 元件
precision:0, //資料展示的小數精度，預設為0，無小數點
itemWidth:20, //圖形的寬度，即長條的寬度。
itemHeight:140, //圖形的高度，即長條的高度。
align:"auto", //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text:['High', 'Low'], //兩端的文字
textGap:10, //兩端文字主體之間的距離，單位為px
showLabel:true, //是否顯示每項的文字標籤
itemGap:10, //每兩個圖元之間的間隔距離，單位為px
itemSymbol:"roundRect", //預設的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension:2, //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度
seriesIndex:1, //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列
hoverLink:true, //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮
inRange:{ //定義 在選中範圍中 的視覺元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange:{ //定義 在選中範圍外 的視覺元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
z:2, //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
left:"center", //元件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //元件離容器右側的距離,'20%'
bottom:"auto", //元件離容器下側的距離,'20%'
orient:"vertical", //圖例排列方向
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
textStyle:mytextStyle, //文字樣式
formatter: function (value) { //標籤的格式化工具。
return 'aaaa' + value; // 範圍標籤顯示內容。
}
}
];
series-bar.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"bar", //柱形
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
legendHoverLink:true, //是否啟用圖例 hover 時的聯動高亮。
coordinateSystem:"cartesian2d",////'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
stack:null, //資料堆疊，同個類目軸上系列配置相同的stack值可以堆疊放置。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
barGap:"30%", //柱間距離，可設固定值（如 20）或者百分比（如 '30%'，表示柱子寬度的 30%）。
barCategoryGap:"20%", //類目間柱形距離，預設為類目間距的20%，可設固定值
encode: { //可以定義 data 的哪個維度被編碼成什麼
x: [3, 1, 5], // 表示維度 3、1、5 對映到 x 軸。
y: 2, // 表示維度 2 對映到 y 軸。
tooltip: [3, 2, 4], // 表示維度 3、2、4 會在 tooltip 中顯示。
label: 3 // 表示 label 使用維度 3。
},
data: [ //每一列稱為一個『維度』。維度下標從0開始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
markPoint:mypoint.data=[
{name: '最大值', type: 'max'},
{name: '某個座標', coord: [10, 20]},
{name: '固定 x 畫素位置', yAxis: 10, x: '90%'},
{name: '某個螢幕座標', x: 100, y: 100}],
markLine:myline.data=[
{name: '平均線',type: 'average'}, // 支援 'average', 'min', 'max'
{name: 'Y 軸值為 100 的水平線',yAxis: 100},
[
{name: '最小值到最大值', type: 'min'}, // 起點和終點的項會共用一個 name
{type: 'max'}
],
[
{name: '兩個座標之間的標線',coord: [10, 20]},
{coord: [20, 30]}
],
[
{yAxis: 'max',x: '90%'}, // 固定起點的 x 畫素位置，用於模擬一條指向最大值的水平線
{type: 'max'}
],
[
{ name: '兩個螢幕座標之間的標線',x: 100,y: 100},
{x: 500,y: 200}
]
],
markArea:myarea.data=[
[
{name: '平均值到最大值',type: 'average'},
{type: 'max'}
],
[
{name: '兩個座標之間的標域',coord: [10, 20]},
{coord: [20, 30]}
],
[
{name: '60分到80分',yAxis: 60},
{yAxis: 80}
],
[
{name: '所有資料範圍區間',coord: ['min', 'min']},
{coord: ['max', 'max']}
],
[
{name: '兩個螢幕座標之間的標域',x: 100,y: 100},
{x: '90%',y: '10%'}
]
],
tooltip:tooltip, //index.js中定義的
},
];
series-effectscatter.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"effectScatter", //特效散點圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
legendHoverLink:true, //是否啟用圖例 hover 時的聯動高亮。
hoverAnimation:true, //是否開啟滑鼠 hover 的提示動畫效果。
effectType:"ripple", //特效型別，目前只支援漣漪特效'ripple'。
showEffectOn:"render", //配置何時顯示特效。可選：'render' 繪製完成後顯示特效。'emphasis' 高亮（hover）的時候顯示特效。
rippleEffect:{ //漣漪特效相關配置。
period:4, //動畫的時間。
scale:2.5, //動畫中波紋的最大縮放比例。
brushType:'fill', //波紋的繪製方式，可選 'stroke' 和 'fill'。
},
coordinateSystem:"geo", //'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
polarIndex:0, //使用的極座標系的 index，在單個圖表例項中存在多個極座標系的時候有用。
geoIndex:0, //使用的地理座標系的 index，在單個圖表例項中存在多個地理座標系的時候有用。
calendarIndex:0, //使用的日曆座標系的 index，在單個圖表例項中存在多個日曆座標系的時候有用。
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
large:false, //是否開啟大規模散點圖的優化，在資料圖形特別多的時候（>=5k）可以開啟。開啟後配合 largeThreshold 在資料量大於指定閾值的時候對繪製進行優化。缺點：優化後不能自定義設定單個資料項的樣式。
largeThreshold:2000, //開啟繪製優化的閾值。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
encode: { //可以定義 data 的哪個維度被編碼成什麼
x: [3, 1, 5], // 表示維度 3、1、5 對映到 x 軸。
y: 2, // 表示維度 2 對映到 y 軸。
tooltip: [3, 2, 4], // 表示維度 3、2、4 會在 tooltip 中顯示。
label: 3 // 表示 label 使用維度 3。
},
data: [ //每一列稱為一個『維度』。維度下標從0開始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index.js
},
];
series-graph.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"graph", //關係圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
left:"10%", //元件離容器左側的距離,百分比字串或整型數字
top:60, //元件離容器上側的距離，百分比字串或整型數字
right:"auto", //元件離容器右側的距離,百分比字串或整型數字
bottom:"auto", //元件離容器下側的距離,百分比字串或整型數字
width:"auto", //圖例寬度
height:"auto", //圖例高度
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
legendHoverLink:true, //是否啟用圖例 hover 時的聯動高亮。
hoverAnimation:true, //是否開啟滑鼠 hover 節點的提示動畫效果。
coordinateSystem:null, //null無座標系，'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系，'polar'使用極座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
polarIndex:0, //使用的極座標系的 index，在單個圖表例項中存在多個極座標系的時候有用。
geoIndex:0, //使用的地理座標系的 index，在單個圖表例項中存在多個地理座標系的時候有用。
calendarIndex:0, //使用的日曆座標系的 index，在單個圖表例項中存在多個日曆座標系的時候有用。
layout:'none', //'none' 不採用任何佈局，使用節點中提供的 x， y 作為節點的位置.'circular' 採用環形佈局，'force' 採用力引導佈局。
//circular:{}, //環形佈局相關配置
//force:{}, //力引導佈局相關的配置項
roam:false, //是否開啟滑鼠縮放和平移漫遊。預設不開啟。如果只想要開啟縮放或者平移，可以設定成 'scale' 或者 'move'。設定成 true 為都開啟
nodeScaleRatio:0.6, //滑鼠漫遊縮放時節點的相應縮放比例，當設為0時節點不隨著滑鼠的縮放而縮放
draggable:false, //節點是否可拖拽，只在使用力引導佈局的時候有用。
focusNodeAdjacency:true, //是否在滑鼠移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
edgeSymbol:['circle', 'arrow'],//邊兩端的標記型別，可以是一個陣列分別指定兩端，也可以是單個統一指定。預設不顯示標記，常見的可以設定為箭頭
edgeSymbolSize:[5,2], //邊兩端的標記大小，可以是一個陣列分別指定兩端，也可以是單個統一指定。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
edgeLabel:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
lineStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:mylineStyle,
emphasis:mylineStyle,
},
categories:[ //節點分類的類目，可選。
{
name:"類目名稱", //類目名稱
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
}
],
data: [ //data就是node
{
name: '1',
x: 10,
y: 10,
value: 10
}, {
name: '2',
x: 100,
y: 100,
value: 20,
symbolSize: 20,
itemStyle: {
normal: {
color: 'red'
}
}
}
],
links:[ //links就是edges
{
source: 'n1',
target: 'n2'
}, {
source: 'n2',
target: 'n3'
}
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index.js
},
];
series-heatmap.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"heatmap", //熱力圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
coordinateSystem:"geo", //'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
polarIndex:0, //使用的極座標系的 index，在單個圖表例項中存在多個極座標系的時候有用。
geoIndex:0, //使用的地理座標系的 index，在單個圖表例項中存在多個地理座標系的時候有用。
calendarIndex:0, //使用的日曆座標系的 index，在單個圖表例項中存在多個日曆座標系的時候有用。
blurSize:20, //每個點模糊的大小，在地理座標系(coordinateSystem: 'geo')上有效。
minOpacity:0, //最小的透明度，在地理座標系(coordinateSystem: 'geo')上有效。
maxOpacity:1, //最大的透明度，在地理座標系(coordinateSystem: 'geo')上有效。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
data: [ //每一列稱為一個『維度』。維度下標從0開始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index.js
},
];
series-lines.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"lines", //線圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
coordinateSystem:"geo", //'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
geoIndex:0, //使用的地理座標系的 index，在單個圖表例項中存在多個地理座標系的時候有用。
polyline:false, //是否是多段線。預設為 false，只能用於繪製只有兩個端點的線段，線段可以通過 lineStyle.normal.curveness 配置為曲線。
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
large:false, //是否開啟大規模散點圖的優化，在資料圖形特別多的時候（>=5k）可以開啟。開啟後配合 largeThreshold 在資料量大於指定閾值的時候對繪製進行優化。缺點：優化後不能自定義設定單個資料項的樣式。
largeThreshold:2000, //開啟繪製優化的閾值。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
lineStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:mylineStyle,
emphasis:mylineStyle,
},
data: [
{
coords: [[120, 66], [122, 67]],
lineStyle: {normal: {}}
}
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index.js
},
];
series-map.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"map", //地圖資料表
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, //地圖的大小,支援相對於螢幕寬高的百分比或者絕對的畫素大小。
mapValueCalculation:"sum", //多個擁有相同地圖型別的系列會使用同一個地圖展現，如果多個系列都在同一個區域有值，目前有：'sum' 取和。'average' 取平均值。'max' 取最大值。'min' 取最小值。
showLegendSymbol:true, //在圖例相應區域顯示圖例的顏色標識（系列標識的小圓點），存在 legend 元件時生效。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
data: [
{name: '資料1',value: 10},
{name: '資料2',value: 20}
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index,js
},
];
series-pie.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"pie", //餅圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
center:['50%', '50%'], //餅圖的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。
radius:[0, '75%'], //餅圖的半徑，陣列的第一項是內半徑，第二項是外半徑。支援設定成百分比，相對於容器高寬中較小的一項的一半。可以將內半徑設大顯示成圓環圖（Donut chart）。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
legendHoverLink:true, //是否啟用圖例 hover 時的聯動高亮。
hoverAnimation:true, //是否開啟 hover 在扇區上的放大動畫效果。
selectedMode:false, //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'，'multiple'，分別表示單選還是多選。
selectedOffset:10, //選中扇區的偏移距離。
clockwise:true, //餅圖的扇區是否是順時針排布。
startAngle:90, //起始角度，支援範圍[0, 360]。
minAngle:0, //最小的扇區角度（0 ~ 360），用於防止某個值過小導致扇區太小影響互動。
roseType:false, //是否展示成南丁格爾圖，通過半徑區分資料大小。可選擇兩種模式：'radius' 扇區圓心角展現資料的百分比，半徑展現資料的大小。'area' 所有扇區圓心角相同，僅通過半徑展現資料大小。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
data:[
{name: '資料1', value: 10},
{name: '資料2', value: 20}
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index,js
},
];
series-radar.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"radar", //雷達圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
radarIndex:0, //雷達圖所使用的 radar 元件的 index。
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle,
},
areaStyle:{
normal:myareaStyle,
emphasis:myareaStyle,
},
data: [ //每一列稱為一個『維度』。維度下標從0開始
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '預算分配（Allocated Budget）'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '實際開銷（Actual Spending）'
}
],
tooltip:tooltip
},
];
series-scatter.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 時不繪製該圖形。
};
mylabel={
show:false, //是否顯示標籤。
position:"inside", //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset:[30, 40], //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
formatter:'{b}: {c}', //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
textStyle:mytextStyle
};
mypoint={
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
myline={
symbol:["pin","circle"], //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
precision:2, //標線數值的精度，在顯示平均值線的時候有用。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
};
myarea={
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
};
series=[
{
type:"scatter", //散點圖
zlevel:0, //柱狀圖所有圖形的 zlevel 值。
z:2, //柱狀圖元件的所有圖形的z值。控制圖形的前後順序。z值小的圖形會被z值大的圖形覆蓋。
silent:false, //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
name:"資料名稱", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
legendHoverLink:true, //是否啟用圖例 hover 時的聯動高亮。
hoverAnimation:true, //是否開啟滑鼠 hover 的提示動畫效果。
coordinateSystem:"geo", //'cartesian2d'使用二維的直角座標系。'geo'使用地理座標系
xAxisIndex:0, //使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:0, //使用的 y 軸的 index，在單個圖表例項中存在多個 y軸的時候有用。
polarIndex:0, //使用的極座標系的 index，在單個圖表例項中存在多個極座標系的時候有用。
geoIndex:0, //使用的地理座標系的 index，在單個圖表例項中存在多個地理座標系的時候有用。
calendarIndex:0, //使用的日曆座標系的 index，在單個圖表例項中存在多個日曆座標系的時候有用。
symbol:"pin", //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
symbolRotate:0, //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
symbolOffset:[0,0], //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
large:false, //是否開啟大規模散點圖的優化，在資料圖形特別多的時候（>=5k）可以開啟。開啟後配合 largeThreshold 在資料量大於指定閾值的時候對繪製進行優化。缺點：優化後不能自定義設定單個資料項的樣式。
largeThreshold:2000, //開啟繪製優化的閾值。
cursor:"pointer", //滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。
label:{ //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //圖形樣式，normal 是圖形在預設狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在滑鼠懸浮或者圖例聯動高亮時。
normal:myitemStyle,
emphasis:myitemStyle,
},
encode: { //可以定義 data 的哪個維度被編碼成什麼
x: [3, 1, 5], // 表示維度 3、1、5 對映到 x 軸。
y: 2, // 表示維度 2 對映到 y 軸。
tooltip: [3, 2, 4], // 表示維度 3、2、4 會在 tooltip 中顯示。
label: 3 // 表示 label 使用維度 3。
},
data: [ //每一列稱為一個『維度』。維度下標從0開始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip //index.js
},
];複製程式碼