配置屬性
option = {
series: [
{
type: 'pie', //type為pie，表示圖表為餅圖
data: [
{
value: 335,
name: '直接訪問'
},
{
value: 234,
name: '聯盟廣告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
};
基本屬性
id：組件id，默認不指定
name：系列名稱
type：series圖表類型，常用值：bar（柱形圖）、line（折線圖）、pie（餅圖）、scatter（散點圖）
colorBy: series（同一系列顏色相同）、data（同一維度顏色相同）
legendHoverLink：鼠標滑過時legend（圖標）是否高亮，默認true
selectedMode：是否支持多個選中，可選值：true、false（默認）、single、multiple
selectedOffset：選中扇區(qū)的偏移距離
clockwise：餅圖的扇區(qū)是否是順時針排布，默認true
startAngle：起始角度，從0到360度，默認90度
minAngle：最小扇區(qū)角度，用于防止某個值過小導致扇區(qū)太小影響交互
minShowLabelAngle：小于這個角度的扇區(qū)，不顯示標簽（label、labelLine）
roseType：是否展示成南丁格爾圖，通過半徑區(qū)分數據大小，可選值：
radius：扇區(qū)圓心角展現數據的百分比，半徑展現數據的大小
area：所有扇區(qū)圓心角相同，僅通過半徑展現數據大小
avoidLabelOverlap：是否啟用防止標簽重疊策略，默認true（開啟）
stillShowZeroSum：是否在數據和為0的時候仍顯示扇區(qū)，默認true
cursor：鼠標懸浮時在圖形元素上時鼠標的樣式是什么，如：pointer
zlevel：圖形的zlevel值，用于canvas分層，數值大的展示在上面
z：圖形的z值，優(yōu)先級比zlevel低，用韻canvas分層，數值大的展示在上面
left：組件離容器左側的距離，可選值：10（像素）、10%、left、cneter、right
top：件離容器上側的距離，可選值：10（像素）、10%、top、middle、bottom
right：組件離容器右側的距離，可選值：10（像素）、10%
bottom：組件離容器下側的距離，可選值：10（像素）、10%
width：寬度，默認auto（自適應）
height：高度，默認auto（自適應）
center：餅圖的中心坐標，數組的第一項是橫坐標，第二項是縱坐標，如：[400, 300]、['50%', '50%']
radius：餅圖的半徑，如：10，10%，[0,10]（內半徑，外半徑）
seriesLayoutBy：數據集映射方式，可選值：column（默認）、row
datasetIndex：數據集index，如果series.data沒有指定，并且dataset存在，那么就會使用dataset
dimensions：數據維度
encode：自定義數據映射方式
dataGroupId：數據組id
data：series中使用的數據，一般使用dataset中的數據，實現數據與配置分離
silent：圖形是否不響應和觸發(fā)鼠標事件，默認為false
動畫屬性
animation：是否開啟動畫，默認true
animationType：初始動畫效果，可選值：expansion（沿圓弧展開，默認）、scale（縮放效果）
animationTypeUpdate：更新數據時的動畫效果，可選值：transition（從起始到終止角度過渡）、scale（數據整體重新沿圓弧展開）
animationThreshold：動畫閾值，動畫數量大于該值會關閉動畫，默認2000
animationDuration：動畫持續(xù)時間，默認1000ms
animationEasing：動畫緩動效果，如：cubicOut
animationDelay：動畫初始延時時間
animationDurationUpdate：動畫更新時長
animationEasingUpdate：動畫更新緩動時長
animationDelayUpdate：動畫延時更新時長
//universalTransition：全局過渡動畫配置
universalTransition.enabled：是否開啟全局延時動畫
universalTransition.seriesKey：如何關聯需要動畫的系列，默認取系列的id
universalTransition.divideShape：對多或者多對一的動畫中，當前系列的圖形如何分裂成多個圖形，可選值：
split：通過一定的算法將分割圖形成為多個（柱狀圖默認）
clone：從當前圖形克隆得到多個（散點圖默認）
universalTransition.delay：一對多或者多對一的動畫中每個圖形的動畫延時
占位圓樣式：emptyCircleStyle
showEmptyCircle：是否在無數據的時候顯示一個占位圓，默認true
emptyCircleStyle.color：顏色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff
emptyCircleStyle.borderColor：邊框顏色
emptyCircleStyle.borderWidth：邊框寬度，默認無邊框
emptyCircleStyle.borderType：邊框線型，可選值：solid（實線，默認）、dashed、dotted
emptyCircleStyle.borderDashOffset：虛線偏移量
emptyCircleStyle.borderCap：線段末端的繪制方式，可選值：butt（方形，默認）、round、square（矩形）
emptyCircleStyle.borderJoin：連接屬性，可選值：bevel（三角形，默認）、round、miter（菱形）
emptyCircleStyle.borderMiterLimit：菱形斜接面比例，默認為10，borderJoin為miter時有效
emptyCircleStyle.shadowBlur：陰影模糊大小
emptyCircleStyle.shadowColor：陰影顏色
emptyCircleStyle.shadowOffsetX：陰影水平偏移距離
emptyCircleStyle.shadowOffsetY：陰影垂直偏移距離
emptyCircleStyle.opacity：陰影透明度, 默認1, 支持從0到1的數字, 0表示不顯示
標簽屬性：label
label.show：是否顯示標簽,默認false
label.position：文本標簽位置，可選值：outside（outer）、inside（inner）、center
label.rotate：標簽旋轉,true（徑向排布）、數值（旋轉角度，從-90度到90度,正值是逆時針）
label.formatter：標簽內容格式器，支持字符串模板和回調函數兩種形式
模板字符串：formatter: ': {@score}'
{a}：系列名
：數據名
{c}：數據值
{@×××}：維度名對應的數據，如{@product}：表示維度名為product的值
{@[n]}：維度n對應的數據，如{@[2]}：表示維度2對應的數據，維度從0開始計數
回調函數：(params: Object|Array) => string
label.color：標簽顏色，如："#fff"
label.fontStyle：字體風格，可選值：normal、italic、oblique
label.fontWeight：字體粗細，可選值：normal、bold、bolder、lighter、100|200|300|400...
label.fontFamily：字體設置，可選值：sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei等
label.fontSize：字體大小，如：12
label.width：文本寬度
label.height：文本高度
label.lineHight：行高
label.backgroundColor：標簽背景色，如：'#123234', 'red', 'rgba(0,23,11,0.3)'
label.borderColor：邊框顏色
label.borderWidth：邊框寬度
label.borderType：邊框類型，可選值：solid、dashed、dotted、5、[5, 10]
label.borderDashOffset：虛線偏移量
label.borderRadius：文字塊的圓角，默認為0
label.padding：文字塊的內邊距，如：[3, 4, 5, 6]（上、右、下、左）、3,4、3（[3,3,3,3]）
label.shadowColor：陰影顏色
label.shadowBlur：陰影長度
label.shadowOffsetX：陰影水平偏移
label.shadowOffsetY：陰影垂直偏移
label.textBorderColor：文本邊框顏色
label.textBorderWidth：文本邊框寬度
label.textBorderType：文本邊框類型，可選值：solid、dashed、dotted、5、[5,10]等
label.textBorderDashOffset：文字虛線偏移量
label.textShadowColor：文字陰影顏色
label.textShadowBlur：文字陰影大小
label.textShadowOffsetX：陰影水平偏移
label.textShadowOffsetY：陰影垂直偏移
label.overflow：文本超出長度后，是否截斷或者換行
none：不截斷或者換行，默認
truncate：截斷
break：單詞間換行
breanAll：除單詞間換行，單詞內也換行
label.ellipsis：文本超出長度，截斷（truncate）后顯示的文本，如:...
label.lineOverflow：文本超過高度是否截斷，配置label.height生效
none：不截斷
truncate：截斷
label.rich：自定義富文本樣式
alignTo：標簽的對齊方式，position值為'outer'時有效，可選值：
none：label line的長度為固定值
labelLine：label line的末端對齊
edge：文字對齊
edgeDistance：文邊距離，僅當label.position為'outer'并且label.alignTo為'edge'時有效，如：20%
bleedMargin：文本長度，超出長度被裁剪為"..."
distanceToLabelLine:文字與 label line之間的距離,如：5
標簽視覺引導線：labelLine
labelLine.show：是否顯示視覺引導線
labelLine.showAbove：是否顯示在圖形上方
labelLine.length：視覺引導線第一段的長度
labelLine.length2：視覺引導項第二段的長度
labelLine.smooth：是否平滑視覺引導線，默認false
labelLine.minTurnAngle：視覺引導線的最小轉角，0-180度
labelLine.maxSurfaceAngle：引導線與扇區(qū)法線的最大夾角，0-180度
labelLine.lineStyle.color：顏色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff
labelLine.lineStyle.width：寬度
labelLine.lineStyle.type：線型，如：solid、dashed、dotted、[5,10]等
labelLine.lineStyle.dashOffset：虛線偏移量
labelLine.lineStyle.cap：線段末端繪制方式，可選值：butt（方形，默認）、round、square（矩形）
labelLine.lineStyle.join：連接屬性，可選值：bevel（三角形，默認）、round、miter（菱形）
labelLine.lineStyle.miterLimit：菱形斜接面比例，默認為10，負數、0、Infinity、NaN均會被忽略
labelLine.lineStyle.shadowBlur：陰影模糊大小
labelLine.lineStyle.shadowColor：陰影顏色
labelLine.lineStyle.shadowOffsetX：陰影水平偏移
labelLine.lineStyle.shadowOffsetY：陰影垂直偏移
labelLine.lineStyle.opacity：透明度，默認為1，數值為從0到1的數字（0不顯示）
標簽布局：labelLayout
labelLayout.hideOverlap：是否隱藏重疊的標簽
labelLayout.moveOverlap：在標簽重疊的時候是否挪動標簽位置以防止重疊
labelLayout.x：標簽的水平位置，如：2（像素值）、20%
labelLayout.y：標簽的垂直位置，如：2（像素值）、20%
labelLayout.dx：標簽在 x 方向上的像素偏移，可以和x一起使用
labelLayout.dy：標簽在 y 方向上的像素偏移，可以和y一起使用
labelLayout.rotate：標簽旋轉角度
labelLayout.width：標簽寬度
labelLayout.height：標簽高度
labelLayout.align：標簽水平對其方式，可選值：left、center、right
labelLayout.verticalAlign：標簽垂直對齊方式，可選值：top、middle、bottom
labelLayout.fontSize：標簽字體大小
labelLayout.draggable：標簽是否可以拖拽
labelLayout.labelLinePoints：標簽引導線三個點的位置，格式為：[[x, y], [x, y], [x, y]]
圖形樣式：itemStyle
itemStyle.color：顏色，默認為series.color，可設置：rgb(255,255,255)，rgba(255,255,255,1)，#fff
itemStyle.borderColor：邊框顏色
itemStyle.borderWidth：邊框寬度，默認無寬度
itemStyle.borderType：邊框線型，可選值：solid（默認）、dashed、dotted
itemStyle.borderDashOffset：虛線偏移量
itemStyle.borderCap：線段末端的繪制方式，可選值：butt（方形，默認）、round、square（矩形）
itemStyle.borderJoin：末端連接方式，可選值：bevel（三角形連接）、round、miter（菱形）
itemStyle.borderMiterLimit：斜截面限制比列，borderJoin為miter時有效
itemStyle.shadowBlur：陰影模糊大小
itemStyle.shadowColor：陰影顏色
itemStyle.shadowOffsetX：陰影水平偏移
itemStyle.shadowOffsetY：陰影垂直偏移
itemStyle.opacity：柱條透明度，默認為1，0表示不顯示
itemStyle.borderRadius：餅圖扇形區(qū)塊的內外圓角半徑，如：10、10%、[10,20]、[10%,20%]
itemStyle.decal：圖形貼花圖案，在aria.enabled、aria.decal.show都是true時生效，如果為none表示不使用貼花圖案
itemStyle.decal.symbol：貼花圖案，如：rect、circle、image: //url、path://等
itemStyle.decal.symbolSize：圖案占比大小，從0到1
itemStyle.decal.symbolKeepAspect：是否保持圖案長寬比，默認為true
itemStyle.decal.color：貼花圖案顏色
itemStyle.decal.backgroundColor：貼花圖案背景色
itemStyle.decal.dashArrayX：貼花圖案橫向模式
itemStyle.decal.dashArrayY：貼花圖案縱向模式
itemStyle.decal.rotation：圖案旋轉角度（弧度值），從-Math.PI到Math.PI
itemStyle.decal.maxTileWidth：生成的圖案在未重復之前的寬度上限，通常不需要設置
itemStyle.decal.maxTileHeight：生成的圖案在未重復之前的高度上限，通常不需要設置
高亮樣式：emphasis
emphasis.scale：是否開啟高亮后扇區(qū)的放大效果，默認true
emphasis.scaleSize：高亮后扇區(qū)的放大尺寸，默認10
emphasis.focus：高亮圖形時，是否淡出其它數據的圖形已達到聚焦的效果，可選值：
none：不淡出其他圖形，默認
self：只聚焦（不淡出）當前高亮的數據的圖形
series：聚焦當前高亮的數據所在的系列的所有圖形
emphasis.blurScope：配置淡出范圍，可選值：
coordinateSystem：淡出范圍為坐標系，默認
series：淡出范圍為系列
global：淡出范圍為全局
emphasis.label：文本標簽高亮配置，屬性同label
emphasis.labelLine：標簽視覺引導線高亮配置，屬性同labelLine
emphasis.itemStyle：圖形高亮配置，屬性同itemStyle
淡出樣式：blur
blur.label：標簽淡出配置，屬性同label
blur.labelLine：標簽視覺引導線淡出配置，屬性同labelLine
blur.itemStyle：圖形淡出配置，屬性同itemStyle
圖表標注：markPoint
markPoint.symbol：標記的圖形，可選值：circle、rect、round、pin、image://url、path://等
markPoint.symbolSize：標記的大小，默認50
markPoint.symbolRotate：標記的旋轉角度，正值表示逆時針
markPoint.symbolKeepAspect：如果symbol是path://的形式，是否在縮放時保持該圖形的長寬比
markPoint.symbolOffset：標記偏移，如[0,0]
markPoint.silent：圖形是否不響應和觸發(fā)鼠標事件，默認為 false
markPoint.data：標注的數據數組
markPoint.label：標注的文本，屬性同label
markPoint.itemStyle：標注的樣式，屬性同itemStyle
markPoint.emphasis：標注的高亮樣式，內含label、itemStyle
markPoint.blur：標注的淡出樣式，內含label、itemStyle
//標注的動畫屬性
markPoint.animation：是否開啟動畫，默認true
markPoint.animationThreshold：動畫閾值，動畫數量大于該值會關閉動畫，默認2000
markPoint.animationDuration：動畫持續(xù)時間，默認1000ms
markPoint.animationEasing：動畫緩動效果，如：cubicOut
markPoint.animationDelay：動畫初始延時時間
markPoint.animationDurationUpdate：動畫更新時長
markPoint.animationEasingUpdate：動畫更新緩動時長
markPoint.animationDelayUpdate：動畫延時更新時長
圖表標線：markLine
markLine.symbol：標線兩端的標記類型，可選值：circle、rect、round、pin、image://url、path://等
markLine.symbolSize：標線兩端的標記大小，默認50
markLine.silent：圖形是否不響應和觸發(fā)鼠標事件，默認為 false
markLine.precision：標線數值的精度，默認為2
markLine.data：標線的數據數組
markLine.label：標注的文本，屬性同label
markLine.lineStyle：標注的樣式，屬性同lineStyle
markLine.emphasis：標注的高亮樣式，內含label、lineStyle
markLine.blur：標注的淡出樣式，內含label、lineStyle
//標注線的動畫屬性
markLine.animation：是否開啟動畫，默認true
markLine.animationThreshold：動畫閾值，動畫數量大于該值會關閉動畫，默認2000
markLine.animationDuration：動畫持續(xù)時間，默認1000ms
markLine.animationEasing：動畫緩動效果，如：cubicOut
markLine.animationDelay：動畫初始延時時間
markLine.animationDurationUpdate：動畫更新時長
markLine.animationEasingUpdate：動畫更新緩動時長
markLine.animationDelayUpdate：動畫延時更新時長
圖表區(qū)域：markArea
markArea.silent：圖形是否不響應和觸發(fā)鼠標事件，默認為 false
markArea.data：標注的數據數組
markArea.label：標注區(qū)域的文本，屬性同label
markArea.itemStyle：標注區(qū)域的樣式，屬性同itemStyle
markArea.emphasis：標注區(qū)域的高亮樣式，內含label、itemStyle
markArea.blur：標注區(qū)域的淡出樣式，內含label、itemStyle
//標注區(qū)域的動畫屬性
markArea.animation：是否開啟動畫，默認true
markArea.animationThreshold：動畫閾值，動畫數量大于該值會關閉動畫，默認2000
markArea.animationDuration：動畫持續(xù)時間，默認1000ms
markArea.animationEasing：動畫緩動效果，如：cubicOut
markArea.animationDelay：動畫初始延時時間
markArea.animationDurationUpdate：動畫更新時長
markArea.animationEasingUpdate：動畫更新緩動時長
markArea.animationDelayUpdate：動畫延時更新時長
提示框：tooltip
tooltip.position：提示框位置，如：[10, 10]（左側10px、上側10px）、[10%,10%]
tooltip.formatter：提示框內容格式化器
tooltip.backgroundColor：提示框背景色
tooltip.borderColor：提示框邊框顏色
tooltip.borderWidth：提示框邊框寬度
tooltip.padding：提示框內邊距
padding: 5 // 設置內邊距為 5
padding: [5, 10] // 設置上下的內邊距為 5，左右的內邊距為 10
padding: [ // 分別設置四個方向的內邊距
5, // 上
10, // 右
5, // 下
10, // 左
]
tooltip.textStyle：提示框文本樣式
tooltip.textStyle.color：文字顏色
tooltip.textStyle.fontStyle：字體設置，可選值：normal、italic、oblique
tooltip.textStyle.fontWeight：字體粗細，可選值：normal、bold、bolder、lighter、100|200| 300|400...
tooltip.textStyle.fontFamily：字體，可選值：serif、sans-serif、monospace、Arial、Courier New、NewMicrosoft YaHei等
tooltip.textStyle.fontSize：字體大小
tooltip.textStyle.lineHeight：行高
tooltip.textStyle.width：文本寬度
tooltip.textStyle.height：文本高度
tooltip.textStyle.textBorderColor：邊框顏色
tooltip.textStyle.textBorderWidth：邊框寬度
tooltip.textStyle.textBorderType：邊框線性，可選值：solid、dashed、dotted、[5,10]
tooltip.textStyle.textBorderDashOffset：虛線偏移量
tooltip.textStyle.textShadowColor：字體陰影顏色
tooltip.textStyle.textShadowBlur：字體陰影長度
tooltip.textStyle.textShadowOffsetX：字體水平偏移
tooltip.textStyle.textShadowOffsetY：字體垂直偏移
tooltip.textStyle.overflow：文本超出寬度是否階段或者換行，可選值：
none：不截斷或者換行
truncate：截斷
break：單詞間換行
breakAll：單詞間、單詞內換行
tooltip.textStyle.ellipsis：overflow為truncate時，文末顯示文本
tooltip.textStyle.lineOverflow：文本超過高度后是否截斷，可選值：none、truncate
tooltip.extraCssText：額外附加到浮層的css樣式，如：box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
原文：https://blog.csdn.net/weixin_43931625/article/details/121068654
