ECharts 各組件詳解
6大公共組件詳解:
一、Title標題：
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提示：
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工具框
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圖例：
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區域縮放：
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視覺映射組件：
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; // 範圍標籤顯示內容。
}
}
];複製代碼
5大座標系詳解：
一、地理座標系geo
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，即響應和觸發鼠標事件。
}];複製代碼
二、grid直角座標系（xAxis、yAxis）
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軸
複製代碼
三、parallel平行座標系
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'）中有效。
}
];複製代碼
四、polar極座標系
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值
}];複製代碼
五、radar雷達座標系
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值
}];複製代碼
19種圖表類型詳解:
一、series-bar柱形圖
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], // 表示維度 三、一、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4], // 表示維度 三、二、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,
},
];複製代碼
二、series-effectscatter特效散點圖
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], // 表示維度 三、一、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4], // 表示維度 三、二、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
},
];複製代碼
三、series-graph關係圖
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
},
];複製代碼
四、series-heatmap熱力圖
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
},
];複製代碼
五、series-line線圖
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
},
];複製代碼
六、series-map地圖
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
},
];複製代碼
七、series-pie餅圖
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雷達圖
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}，分別表示系列名，數據名，數據值。
};
mylabel = $.extend(mylabel, mytextStyle) //mylabel對象和mytextStyle對象合併成mylabel對象
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散點圖
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], // 表示維度 三、一、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4], // 表示維度 三、二、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
},
];複製代碼
圖表行爲和圖表事件:
action圖表行爲觸發的相關操做：
//觸發圖表行爲（更改變圖表顯示的相關動態），例如圖例開關legendToggleSelect, 數據區域縮放dataZoom，顯示提示框showTip等等
//經過不一樣的type觸發不一樣的行爲
myChart.dispatchAction({
type: 'highlight', //高亮指定的數據圖形。經過seriesName或者seriesIndex指定系列。若是要再指定某個數據能夠再指定dataIndex或者name。
type: 'downplay', //取消高亮指定的數據圖形。經過seriesName或者seriesIndex指定系列。若是要指定某個數據能夠再指定dataIndex或者name。
seriesIndex: number|Array, // 可選，系列 index，能夠是一個數組指定多個系列
seriesName: string|Array, // 可選，系列名稱，能夠是一個數組指定多個系列
dataIndex: number, // 可選，數據的 index
name: string // 可選，數據的 名稱
});
//=====================dataZoom的相關觸發=================
myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: number, // 可選，dataZoom 組件的 index，多個 dataZoom 組件時有用，默認爲 0
start: number, // 開始位置的百分比，0 - 100
end: number, // 結束位置的百分比，0 - 100
startValue: number, // 開始位置的數值
endValue: number // 結束位置的數值
});
//一次觸發多個開關
myChart.dispatchAction({
type: 'dataZoom',
batch: [{ // 第一個 dataZoom 組件
start: 20,
end: 30
}, {
dataZoomIndex: 1, // 第二個 dataZoom 組件
start: 10,
end: 20
}]
});
//=====================legend的相關觸發=================
myChart.dispatchAction({
type: 'legendSelect', //選中圖例。
type: 'legendUnSelect', //取消選中圖例。
type: 'legendToggleSelect', //切換圖例的選中狀態。
name: string // 圖例名稱
});
myChart.dispatchAction({
type: 'legendScroll', //控制圖例的滾動。當 legend.type 爲 'scroll' 時有效。
scrollDataIndex: number,
legendId: string
});
//=====================tooltip的相關觸發=================
myChart.dispatchAction({
type: 'showTip', //顯示提示框，指定在相對容器的位置處顯示提示框，若是指定的位置沒法顯示則無效。
x: number, // 屏幕上的 x 座標
y: number, // 屏幕上的 y 座標
// 本次顯示 tooltip 的位置。只在本次 action 中生效。
// 缺省則使用 option 中定義的 tooltip 位置。
position: Array.<number>|string|Function
});
myChart.dispatchAction({
type: 'showTip', //顯示提示框，指定數據圖形，根據 tooltip 的配置項顯示提示框。
seriesIndex: number, // 系列的 index，在 tooltip 的 trigger 爲 axis 的時候可選。
dataIndex: number, // 數據的 index，若是不指定也能夠經過 name 屬性根據名稱指定數據
name: string, // 可選，數據名稱，在有 dataIndex 的時候忽略
// 本次顯示 tooltip 的位置。只在本次 action 中生效。
// 缺省則使用 option 中定義的 tooltip 位置。
position: Array.<number>|string|Function,
});
myChart.dispatchAction({
type: 'hideTip' //隱藏提示框。
});
//=====================visualMap的相關觸發=================
myChart.dispatchAction({
type: 'selectDataRange', //選取映射的數值範圍。
visualMapIndex: number, // 可選，visualMap 組件的 index，多個 visualMap 組件時有用，默認爲 0
// 連續型 visualMap 和 離散型 visualMap 不同
// 連續型的是一個表示數值範圍的數組。selected: [20, 40],
// 離散型的是一個對象，鍵值是類目或者分段的索引。值是 `true`, `false`,例如：selected: { 1: false }// 取消選中第二段, selected: { '優': false }// 取消選中類目 `優`
selected: Object|Array
});
//=====================timeline的相關觸發=================
//時間軸組件相關的行爲，必須引入時間軸組件後才能使用
myChart.dispatchAction({
type: 'timelineChange', //設置當前的時間點。
currentIndex: number // 時間點的 index
});
myChart.dispatchAction({
type: 'timelinePlayChange', //切換時間軸的播放狀態。
playState: boolean // 播放狀態，true 爲自動播放
});
//=====================toolbox的相關觸發=================
myChart.dispatchAction({
type: 'restore' //重置 option。
});
//=====================pie的相關觸發=================
myChart.dispatchAction({
type: 'pieUnSelect', //取消選中指定的餅圖扇形。
type: 'pieToggleSelect', //切換指定的餅圖扇形選中狀態。
type: 'pieSelect', //選中指定的餅圖扇形。
seriesIndex: number|Array, // 可選，系列 index，能夠是一個數組指定多個系列
seriesName: string|Array, // 可選，系列名稱，能夠是一個數組指定多個系列
dataIndex: number, // 數據的 index，若是不指定也能夠經過 name 屬性根據名稱指定數據
name: string // 可選，數據名稱，在有 dataIndex 的時候忽略
});
//=====================geo的相關觸發=================
myChart.dispatchAction({
type: 'geoSelect', //選中指定的地圖區域。
type: 'geoUnSelect', //取消選中指定的地圖區域。
type: 'geoToggleSelect', //切換指定的地圖區域選中狀態。
seriesIndex: number|Array, // 可選，系列 index，能夠是一個數組指定多個系列
seriesName: string|Array, // 可選，系列名稱，能夠是一個數組指定多個系列
dataIndex: number, // 數據的 index，若是不指定也能夠經過 name 屬性根據名稱指定數據
name: string // 可選，數據名稱，在有 dataIndex 的時候忽略
});
//=====================map的相關觸發=================
myChart.dispatchAction({
type: 'mapSelect', //選中指定的地圖區域。
type: 'mapUnSelect', //取消選中指定的地圖區域。
type: 'mapToggleSelect', //切換指定的地圖區域選中狀態。
seriesIndex: number|Array, // 可選，系列 index，能夠是一個數組指定多個系列
seriesName: string|Array, // 可選，系列名稱，能夠是一個數組指定多個系列
dataIndex: number, // 數據的 index，若是不指定也能夠經過 name 屬性根據名稱指定數據
name: string // 可選，數據名稱，在有 dataIndex 的時候忽略
});
//=====================graph的相關觸發=================
myChart.dispatchAction({
type: 'focusNodeAdjacency', //將指定的節點以及其全部鄰接節點高亮。
type: 'unfocusNodeAdjacency', //將指定的節點以及其全部鄰接節點高亮。
// 使用 seriesId 或 seriesIndex 或 seriesName 來定位 series.
seriesId: 'xxx',
seriesIndex: 0,
seriesName: 'nnn',
dataIndex: 12 // 使用 dataIndex 來定位節點。
});
複製代碼
event圖表事件的相關操做：
//在 ECharts 中主要經過 on 方法添加事件處理函數，該文檔描述了全部 ECharts 的事件列表。
//ECharts 中的事件分爲兩種，一種是鼠標事件，在鼠標點擊某個圖形上會觸發，還有一種是 調用 dispatchAction 後觸發的事件。
//==========================鼠標事件==============================
//鼠標事件包括'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'，'contextmenu'。
//鼠標事件的事件參數是事件對象的數據的各個屬性，具體見各個圖表類型的 label formatter 回調函數的 params。
myChart.on('click', function (params) {
console.log(params);
});
//對於圖表的點擊事件，基本參數以下，其它圖表諸如餅圖可能會有部分附加參數。
params={
componentType: string, // 當前點擊的圖形元素所屬的組件名稱，// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
seriesType: string, // 系列類型。值可能爲：'line'、'bar'、'pie' 等。當 componentType 爲 'series' 時有意義。
seriesIndex: number, // 系列在傳入的 option.series 中的 index。當 componentType 爲 'series' 時有意義。
seriesName: string, // 系列名稱。當 componentType 爲 'series' 時有意義。
name: string, // 數據名，類目名
dataIndex: number, // 數據在傳入的 data 數組中的 index
data: Object, // 傳入的原始數據項
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 仍是 edge 上。
// 其餘大部分圖表中只有一種 data，dataType 無心義。
dataType: string,
value: number|Array // 傳入的數據值
color: string // 數據圖形的顏色。當 componentType 爲 'series' 時有意義。
};
//==========================action事件的響應函數==============================
//type就是action中的type，在action執行完畢後觸發響應函數，響應函數的params中包含的屬性就是觸發action時添加的屬性
myChart.on(type, function (params) {
console.log(params); //params中包含的屬性就是觸發action時添加的屬性
});
//例如觸發legendSelect選中圖例時，會添加name屬性，則使用如下函數設置回調函數
myChart.on('legendselectchanged', function (params) {
console.log(params.name); //讀取觸發時添加的屬性
});複製代碼
相關文章
- 1. spring cloud各組件詳解
- 2. scrapy各組件詳解
- 3. AWS SageMaker 各組件功能詳解
- 4. RHCS詳解與各組件說明
- 5. Hadoop各組件詳解（HDFS篇）
- 6. Hadoop各組件詳解（MapReduce篇）
- 7. Nagios各組件簡述及nrpe詳解
- 8. oauth2.0各組件講解
- 9. vue echarts vue-echarts組件使用
- 10. Hadoop on Yarn 各組件詳細原理
- 更多相關文章...
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • MyBatis配置文件詳解 - MyBatis教程
- • Flink 數據傳輸及反壓詳解
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
