Web數(shù)據(jù)可視化教程(基于ECharts)教案 電子活頁5-1 餅圖的主要屬性及其設(shè)置_第1頁
Web數(shù)據(jù)可視化教程(基于ECharts)教案 電子活頁5-1 餅圖的主要屬性及其設(shè)置_第2頁
Web數(shù)據(jù)可視化教程(基于ECharts)教案 電子活頁5-1 餅圖的主要屬性及其設(shè)置_第3頁
Web數(shù)據(jù)可視化教程(基于ECharts)教案 電子活頁5-1 餅圖的主要屬性及其設(shè)置_第4頁
Web數(shù)據(jù)可視化教程(基于ECharts)教案 電子活頁5-1 餅圖的主要屬性及其設(shè)置_第5頁
已閱讀5頁,還剩35頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Web數(shù)據(jù)可視化教程(基于ECharts)Web數(shù)據(jù)可視化教程(基于ECharts)Web數(shù)據(jù)可視化教程(基于ECharts)餅圖的主要屬性及其設(shè)置Web數(shù)據(jù)可視化教程(基于ECharts)(1)series-pie.type='pie'string類(2)series-pie.Idstring類型,用于設(shè)置組件ID,默認(rèn)不指定。指定則可用于在option或者API中引用組件。(3)series-pie.namestring類型,用于設(shè)置系列名稱,用于tooltip的顯示,legend的圖例篩選,在setOption更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。(4)series-pie.colorBy='data'string類型,從v5.2.0開始支持,用于設(shè)置從調(diào)色盤option.color中取色的策略,可取值為:①'series':按照系列分配調(diào)色盤中的顏色,同一系列中的所有數(shù)據(jù)都是用相同的顏色;②'data':按照數(shù)據(jù)項(xiàng)分配調(diào)色盤中的顏色,每個(gè)數(shù)據(jù)項(xiàng)都使用不同的顏色。(5)series-pie.legendHoverLink=trueboolean類型,用于設(shè)置是否啟用圖例hover時(shí)的聯(lián)動(dòng)高亮。(6)series-pie.coordinateSystemstring類型,從v5.4.0開始支持,用于設(shè)置該系列使用的坐標(biāo)系,其取值可選項(xiàng)為:①null或者'none':無坐標(biāo)系。②'geo':使用地理坐標(biāo)系,通過geoIndex指定相應(yīng)的地理坐標(biāo)系組件。③'calendar':使用日歷坐標(biāo)系,通過calendarIndex指定相應(yīng)的日歷坐標(biāo)系組件。④'none':不使用坐標(biāo)系。(7)series-pie.geoIndexnumber類型,從v5.4.0開始支持,用于設(shè)置使用的地理坐標(biāo)系的index,在單個(gè)圖表實(shí)例中存在多個(gè)地理坐標(biāo)系的時(shí)候有用。(8)series-pie.calendarIndexnumber類型,從v5.4.0開始支持,用于設(shè)置使用的日歷坐標(biāo)系的index,在單個(gè)圖表實(shí)例中存在多個(gè)日歷坐標(biāo)系的時(shí)候有用。(9)series-pie.selectedModeboolean或string類型,用于設(shè)置選中模式的配置,表示是否支持多個(gè)選中,默認(rèn)關(guān)閉,支持布爾值和字符串,字符串取值可選'single','multiple','series'分別表示單選,多選以及選擇整個(gè)系列。從v5.3.0開始支持'series'。(10)series-pie.selectedOffset=10number類型,用于設(shè)置選中扇區(qū)的偏移距離。(11)series-pie.clockwise=trueboolean類型,用于設(shè)置餅圖的扇區(qū)是否是順時(shí)針排布。(12)series-pie.startAngle=90number類型,用于設(shè)置起始角度,支持范圍[0,360]。(13)series-pie.endAngle='auto'number或string類型,從v5.5.0開始支持,用于設(shè)置結(jié)束角度,默認(rèn)值是'auto'。當(dāng)值為'auto'時(shí),根據(jù)startAngle自動(dòng)計(jì)算結(jié)束角度,以確保是一個(gè)完整的圓。(14)series-pie.minAnglenumber類型,用于設(shè)置最小的扇區(qū)角度(0~360),用于防止某個(gè)值過小導(dǎo)致扇區(qū)太小影響交互。(15)series-pie.padAnglenumber類型,從v5.5.0開始支持,用于設(shè)置餅圖扇區(qū)之間的間隔角度(0~360)。(16)series-pie.minShowLabelAnglenumber類型,用于設(shè)置小于這個(gè)角度(0~360)的扇區(qū),不顯示標(biāo)簽(label和labelLine)。(17)series-pie.roseTypeboolean或string類型,用于設(shè)置是否展示成南丁格爾圖,通過半徑區(qū)分?jǐn)?shù)據(jù)大小??蛇x擇兩種模式:①'radius'扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比,半徑展現(xiàn)數(shù)據(jù)的大小。②'area'所有扇區(qū)圓心角相同,僅通過半徑展現(xiàn)數(shù)據(jù)大小。(18)series-pie.avoidLabelOverlap=trueboolean類型,用于設(shè)置是否啟用防止標(biāo)簽重疊策略,默認(rèn)開啟,在標(biāo)簽擁擠重疊的情況下會(huì)挪動(dòng)各個(gè)標(biāo)簽的位置,防止標(biāo)簽間的重疊。如果不需要開啟該策略,例如圓環(huán)圖這個(gè)例子中需要強(qiáng)制所有標(biāo)簽放在中心位置,可以將該值設(shè)為false。(19)series-pie.stillShowZeroSum=trueboolean類型,用于設(shè)置是否在數(shù)據(jù)和為0(一般情況下所有數(shù)據(jù)為0)的時(shí)候仍顯示扇區(qū)。(20)series-pie.percentPrecision=2number類型,用于設(shè)置餅圖百分比數(shù)值的精度,默認(rèn)保留小數(shù)點(diǎn)后兩位。(21)series-pie.cursor='pointer'string類型,用于設(shè)置鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式是什么。同CSS的cursor。(22)series-pie.zlevelnumber類型,用于設(shè)置所有圖形的zlevel值。zlevel用于Canvas分層,不同zlevel值的圖形會(huì)放置在不同的Canvas中,Canvas分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動(dòng)畫)的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的Canvas會(huì)引起內(nèi)存開銷的增大,在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。zlevel大的Canvas會(huì)放在zlevel小的Canvas的上面。(23)series-pie.z=2number類型,用于設(shè)置組件的所有圖形的z值??刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。z相比zlevel優(yōu)先級(jí)更低,而且不會(huì)創(chuàng)建新的Canvas。(24)series-pie.leftstring或number類型,用于設(shè)置piechart組件離容器左側(cè)的距離。left的值可以是像20這樣的具體像素值,可以是像'20%'這樣相對(duì)于容器高寬的百分比,也可以是'left'、'center'、'right'。如果left的值為'left'、'center'、'right',組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。(25)series-pie.topstring或number類型,用于設(shè)置piechart組件離容器上側(cè)的距離。top的值可以是像20這樣的具體像素值,可以是像'20%'這樣相對(duì)于容器高寬的百分比,也可以是'top'、'middle'、'bottom'。如果top的值為'top'、'middle'、'bottom',組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。(26)series-pie.rightstring或number類型,用于設(shè)置piechart組件離容器右側(cè)的距離。right的值可以是像20這樣的具體像素值,可以是像'20%'這樣相對(duì)于容器高寬的百分比。默認(rèn)自適應(yīng)。(27)series-pie.bottomstring或number類型,用于設(shè)置piechart組件離容器下側(cè)的距離。bottom的值可以是像20這樣的具體像素值,可以是像'20%'這樣相對(duì)于容器高寬的百分比。默認(rèn)自適應(yīng)。(28)series-pie.width='auto'string或number類型,用于設(shè)置piechart組件的寬度。默認(rèn)自適應(yīng)。(29)series-pie.height='auto'string或number類型,用于設(shè)置piechart組件的高度。默認(rèn)自適應(yīng)。(30)series-pie.showEmptyCircle=trueboolean類型,從v5.2.0開始支持,用于設(shè)置是否在無數(shù)據(jù)的時(shí)候顯示一個(gè)占位圓。(31)series-pie.emptyCircleStyleObject類型,從v5.2.0開始支持,用于設(shè)置占位圓樣式?!魋eries-pie.emptyCircleStyle.color=lightgrayColor類型,用于設(shè)置圖形的顏色。支持使用rgb(255,255,255),rgba(255,255,255,1),#fff等方式設(shè)置為純色,也支持設(shè)置為漸變色和紋理填充。◆series-pie.emptyCircleStyle.borderColor='#000'Color類型,用于設(shè)置圖形的描邊顏色。支持的顏色格式同color,不支持回調(diào)函數(shù)?!魋eries-pie.emptyCircleStyle.borderWidthnumber類型,用于設(shè)置描邊線寬。為0時(shí)無描邊?!魋eries-pie.emptyCircleStyle.borderType='solid'string或number或Array類型,用于設(shè)置描邊類型。其取值可選項(xiàng)為:'solid'、'dashed'、'dotted'。自v5.0.0開始,也可以是number或者number數(shù)組,用以指定線條的dasharray,配合borderDashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如:{borderType:[5,10],borderDashOffset:5}◆series-pie.emptyCircleStyle.borderDashOffsetnumber類型,從v5.0.0開始支持,用于設(shè)置虛線的偏移量,可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果。◆series-pie.emptyCircleStyle.borderCap='butt'string類型,從v5.0.0開始支持,用于指定線段末端的繪制方式,其取值可選項(xiàng)為:①'butt':線段末端以方形結(jié)束。②'round':線段末端以圓形結(jié)束。③'square':線段末端以方形結(jié)束,但是增加了一個(gè)寬度和線段相同,高度是線段厚度一半的矩形區(qū)域。默認(rèn)值為'butt'?!魋eries-pie.emptyCircleStyle.borderJoin='bevel'string類型,從v5.0.0開始支持,用于設(shè)置2個(gè)長(zhǎng)度不為0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性(長(zhǎng)度為0的變形部分,其指定的末端和控制點(diǎn)在同一位置,會(huì)被忽略)。其取值可選項(xiàng)為:①'bevel':在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域,每個(gè)部分都有各自獨(dú)立的矩形拐角。②'round':通過填充一個(gè)額外的,圓心在相連部分末端的扇形,繪制拐角的形狀。圓角的半徑是線段的寬度。③'miter':通過延伸相連部分的外邊緣,使其相交于一點(diǎn),形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過borderMiterLimit屬性看到效果。默認(rèn)值為'bevel'?!魋eries-pie.emptyCircleStyle.borderMiterLimit=10number類型,從v5.0.0開始支持,用于設(shè)置斜接面限制比例。只有當(dāng)borderJoin為miter時(shí),borderMiterLimit才有效。默認(rèn)值為10。負(fù)數(shù)、0、Infinity和NaN均會(huì)被忽略?!魋eries-pie.emptyCircleStyle.shadowBlurnumber類型,用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor、shadowOffsetX、shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下:{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}◆series-pie.emptyCircleStyle.shadowColorColor類型,用于設(shè)置陰影顏色。支持的格式同color?!魋eries-pie.emptyCircleStyle.shadowOffsetXnumber類型,用于設(shè)置陰影水平方向上的偏移距離。◆series-pie.emptyCircleStyle.shadowOffsetYnumber類型,用于設(shè)置陰影垂直方向上的偏移距離?!魋eries-pie.emptyCircleStyle.opacity=1number類型,用于設(shè)置圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形。(32)series-pie.labelObject類型,用于設(shè)置餅圖圖形上的文本標(biāo)簽,可用于說明圖形的一些數(shù)據(jù)信息,例如值、名稱等?!魋eries-pie.label.showboolean類型。◆series-pie.label.position='outside'string類型,用于設(shè)置標(biāo)簽的位置。其取值可選項(xiàng)為:①'outside'餅圖扇區(qū)外側(cè),通過視覺引導(dǎo)線連到相應(yīng)的扇區(qū)。②'inside'餅圖扇區(qū)內(nèi)部。③'inner'同'inside'。④'center'在餅圖中心位置?!魋eries-pie.label.formatterstring或Function類型。用于設(shè)置標(biāo)簽內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式,字符串模板與回調(diào)函數(shù)返回的字符串均支持用\n換行。

字符串模板字符串模板模板變量有:{a}:系列名。:數(shù)據(jù)名。{c}:數(shù)據(jù)值。z3jilz61osys:百分比。{@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'的維度的值。{@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}表示維度3的值,從0開始計(jì)數(shù)。示例代碼:formatter:':z3jilz61osys'

回調(diào)函數(shù)回調(diào)函數(shù)格式:(params:Object|Array)=>string參數(shù)params是formatter需要的單個(gè)數(shù)據(jù)集。格式如下:{componentType:'series',//系列類型seriesType:string,//系列在傳入的option.series中的indexseriesIndex:number,//系列名稱seriesName:string,//數(shù)據(jù)名,類目名name:string,//數(shù)據(jù)在傳入的data數(shù)組中的indexdataIndex:number,//傳入的原始數(shù)據(jù)項(xiàng)data:Object,//傳入的數(shù)據(jù)值。在多數(shù)系列下它和data相同。//在一些系列下是data中的分量(如map、radar中)value:number|Array|Object,//坐標(biāo)軸encode映射信息,//key為坐標(biāo)軸(如'x''y''radius''angle'等)//value必然為數(shù)組,不會(huì)為null/undefined,表示dimensionindex。//其內(nèi)容如://{//x:[2]//dimensionindex為2的數(shù)據(jù)映射到x軸//y:[0]//dimensionindex為0的數(shù)據(jù)映射到y(tǒng)軸//}encode:Object,//維度名列表dimensionNames:Array<String>,//數(shù)據(jù)的維度index,如0或1或2…//僅在雷達(dá)圖中使用。dimensionIndex:number,//數(shù)據(jù)圖形的顏色color:string,//百分比percent:number類型,用于設(shè)置}注:encode和dimensionNames的使用方式,例如:如果數(shù)據(jù)為:dataset:{source:[['蘋果',43.3,85.8,93.7],['梨子',83.1,73.4,55.1],['葡萄',86.4,65.2,82.5],['芒果',72.4,53.9,39.1]]}則可這樣得到y(tǒng)軸對(duì)應(yīng)的value:params.value[params.encode.y[0]]如果數(shù)據(jù)為:dataset:{dimensions:['product','7月','8月','9月'],source:[{product:'蘋果','7月':43.3,'8月':85.8,'9月':93.7},{product:'梨子','7月':83.1,'8月':73.4,'9月':55.1},{product:'葡萄','7月':86.4,'8月':65.2,'9月':82.5},{product:'芒果','7月':72.4,'8月':53.9,'9月':39.1}]}則可這樣得到y(tǒng)軸對(duì)應(yīng)的value:params.value[params.dimensionNames[params.encode.y[0]]]◆series-pie.label.rotateboolean或number或string類型,用于設(shè)置標(biāo)簽旋轉(zhuǎn):

如果為true或'radial',則為徑向排布。('radial'字面量從v5.2.0開始支持)。

如果為'tangential',則為切向排布。(從v5.2.0開始支持)。

如果為number,旋轉(zhuǎn)指定角度,從-90度到90度。正值是逆時(shí)針?!魋eries-pie.label.minMarginnumber類型,從v5.0.0開始支持,用于控制標(biāo)簽之間的最小距離,當(dāng)啟用labelLayout時(shí)可能會(huì)用到。◆series-pie.label.color='#fff'Color類型,用于設(shè)置文字的顏色。如果設(shè)置為'inherit',則為視覺映射得到的顏色,如系列色?!魋eries-pie.label.fontStyle='normal'string類型,用于設(shè)置文字字體的風(fēng)格。其取值可選項(xiàng)為:'normal'、'italic'、'oblique'◆series-pie.label.fontWeight='normal'string或number類型,用于設(shè)置文字字體的粗細(xì)。其取值可選項(xiàng)為:'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆series-pie.label.fontFamily='sans-serif'string類型,用于設(shè)置文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆series-pie.label.fontSize=12number類型,用于設(shè)置文字的字體大小。◆series-pie.label.lineHeightnumber類型,用于設(shè)置行高。rich中如果沒有設(shè)置lineHeight,則會(huì)取父層級(jí)的lineHeight。例如:{lineHeight:56,rich:{a:{//沒有設(shè)置`lineHeight`,則`lineHeight`為56}}}◆series-pie.label.backgroundColor='transparent'string或Object類型,用于設(shè)置文字塊背景色??梢允褂妙伾?,例如:'#123234','red','rgba(0,23,11,0.3)'。也可以直接使用圖片,例如:backgroundColor:{image:'xxx/xxx.png'//這里可以是圖片的URL,//或者圖片的dataURI,//或者HTMLImageElement對(duì)象,//或者HTMLCanvasElement對(duì)象。}當(dāng)使用圖片的時(shí)候,可以使用width或height指定高寬,也可以不指定自適應(yīng)。如果設(shè)置為'inherit',則為視覺映射得到的顏色,如系列色。◆series-pie.label.borderColorColor類型,用于設(shè)置文字塊邊框顏色。如果設(shè)置為'inherit',則為視覺映射得到的顏色,如系列色?!魋eries-pie.label.borderWidthnumber類型,用于設(shè)置文字塊邊框?qū)挾??!魋eries-pie.label.borderType='solid'string或number或Array類型,用于設(shè)置文字塊邊框描邊類型。其取值可選項(xiàng)為:'solid'、'dashed'、'dotted'。自v5.0.0開始,也可以是number或者number數(shù)組,用以指定線條的dasharray,配合borderDashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如:{borderType:[5,10],borderDashOffset:5}◆series-pie.label.borderDashOffsetnumber類型,從v5.0.0開始支持,用于設(shè)置虛線的偏移量,可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果。◆series-pie.label.borderRadiusnumber或Array類型,用于設(shè)置文字塊的圓角?!魋eries-pie.label.paddingnumber或Array類型,用于設(shè)置文字塊的內(nèi)邊距。例如:padding:[3,4,5,6]:表示[上,右,下,左]的邊距。padding:4:表示padding:[4,4,4,4]。padding:[3,4]:表示padding:[3,4,3,4]。注意,文字塊的width和height指定的是內(nèi)容高寬,不包含padding。◆series-pie.label.shadowColor='transparent'Color類型,用于設(shè)置文字塊的背景陰影顏色?!魋eries-pie.label.shadowBlurnumber類型,用于設(shè)置文字塊的背景陰影長(zhǎng)度?!魋eries-pie.label.shadowOffsetXnumber類型,用于設(shè)置文字塊的背景陰影X偏移?!魋eries-pie.label.shadowOffsetYnumber類型,用于設(shè)置文字塊的背景陰影Y偏移?!魋eries-pie.label.widthnumber類型,用于設(shè)置文本顯示寬度。◆series-pie.label.heightnumber類型,用于設(shè)置文本顯示高度。◆series-pie.label.textBorderColorColor類型,用于設(shè)置文字本身的描邊顏色。如果設(shè)置為'inherit',則為視覺映射得到的顏色,如系列色?!魋eries-pie.label.textBorderWidthnumber類型,用于設(shè)置文字本身的描邊寬度?!魋eries-pie.label.textBorderType='solid'string或number或Array類型,用于設(shè)置文字本身的描邊類型。其取值可選項(xiàng)為:'solid'、'dashed'、'dotted'。自v5.0.0開始,也可以是number或者number數(shù)組,用以指定線條的dasharray,配合textBorderDashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如:{textBorderType:[5,10],textBorderDashOffset:5}◆series-pie.label.textBorderDashOffsetnumber類型,從v5.0.0開始支持,用于設(shè)置虛線的偏移量,可搭配textBorderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?!魋eries-pie.label.textShadowColor='transparent'Color類型,用于設(shè)置文字本身的陰影顏色?!魋eries-pie.label.textShadowBlurnumber類型,用于設(shè)置文字本身的陰影長(zhǎng)度?!魋eries-pie.label.textShadowOffsetXnumber類型,用于設(shè)置文字本身的陰影X偏移?!魋eries-pie.label.textShadowOffsetYnumber類型,用于設(shè)置文字本身的陰影Y偏移?!魋eries-pie.label.overflow='none'string類型,用于設(shè)置文字超出寬度是否截?cái)嗷蛘邠Q行,配置width時(shí)有效。①'truncate'截?cái)啵⒃谀┪诧@示ellipsis配置的文本,默認(rèn)為…②'break'換行。③'breakAll'換行,跟'break'不同的是,在英語等拉丁文中,'breakAll'還會(huì)強(qiáng)制單詞內(nèi)換行?!魋eries-pie.label.ellipsis='…'string類型,用于設(shè)置在overflow配置為'truncate'的時(shí)候,可以通過該屬性配置末尾顯示的文本?!魋eries-pie.label.richObject類型。在rich里面,可以自定義富文本樣式。利用富文本樣式,可以在標(biāo)簽中做出非常豐富的效果?!魋eries-pie.label.alignTo='none'string類型,用于設(shè)置標(biāo)簽的對(duì)齊方式,僅當(dāng)position值為'outer'時(shí)有效。從EChartsv4.6.0版本起,我們提供了'labelLine'與'edge'兩種新的布局方式。①'none'(默認(rèn)值):labelline的長(zhǎng)度為固定值,分別為labelLine.length及l(fā)abelLine.length2。②'labelLine':labelline的末端對(duì)齊,其中最短的長(zhǎng)度由labelLine.length2決定。③'edge':文字對(duì)齊,文字的邊距由label.edgeDistance決定?!魋eries-pie.label.edgeDistance='25%'string或number類型,用于設(shè)置文字邊距,僅當(dāng)label.position為'outer'并且label.alignTo為'edge'時(shí)有效。通常來說,對(duì)于移動(dòng)端等分辨率較小的情況,edgeDistance值設(shè)為比較小的值(例如10)能在有限的空間內(nèi)顯示更多文字,而不是被裁剪為…。但是對(duì)于分辨率更大的場(chǎng)景,百分比的值可以避免labelline過長(zhǎng)。如果你需要在不同分辨率下使用,建議使用響應(yīng)式圖表設(shè)計(jì)為不同的分辨率設(shè)置不同的edgeDistance值?!魋eries-pie.label.bleedMargin=10number類型,用于設(shè)置文字的出血線大小,超過出血線的文字將被裁剪為'…'。僅當(dāng)label.position為'outer'并且label.alignTo為'none'或'labelLine'的情況有效?!魋eries-pie.label.distanceToLabelLine=5number類型,用于設(shè)置文字與labelline之間的距離?!魋eries-pie.labelLineObject類型,標(biāo)簽的視覺引導(dǎo)線配置。在label位置設(shè)置為'outside'的時(shí)候會(huì)顯示視覺引導(dǎo)線?!魋eries-pie.labelLine.showboolean類型,用于設(shè)置是否顯示視覺引導(dǎo)線?!魋eries-pie.labelLine.showAboveboolean類型,從v5.0.0開始支持,用于設(shè)置是否顯示在圖形上方?!魋eries-pie.labelLine.lengthnumber類型,用于設(shè)置視覺引導(dǎo)線第一段的長(zhǎng)度?!魋eries-pie.labelLine.length2number類型,用于設(shè)置視覺引導(dǎo)項(xiàng)第二段的長(zhǎng)度?!魋eries-pie.labelLine.smoothbooleannumber類型,用于設(shè)置是否平滑視覺引導(dǎo)線,默認(rèn)不平滑,可以設(shè)置成true平滑顯示,也可以設(shè)置為0到1的值,表示平滑程度?!魋eries-pie.labelLine.minTurnAngle=90number類型,從v5.0.0開始支持,用于通過調(diào)整第二段線的長(zhǎng)度,限制引導(dǎo)線兩端之間最小的夾角,以防止過小的夾角導(dǎo)致顯示不美觀??梢栽O(shè)置為0-180度?!魋eries-pie.labelLine.lineStyleObject類型?!魋eries-pie.labelLine.maxSurfaceAnglenumber類型,從v5.0.0開始支持,用于通過調(diào)整第二段線的長(zhǎng)度,限制引導(dǎo)線與扇區(qū)法線的最大夾角。設(shè)置為小于90度的值保證引導(dǎo)線不會(huì)和扇區(qū)交叉。可以設(shè)置為0-180度。◆series-pie.labelLayoutObject或Function類型,從v5.0.0開始支持,用于標(biāo)簽的統(tǒng)一布局配置。該配置項(xiàng)是在每個(gè)系列默認(rèn)的標(biāo)簽布局基礎(chǔ)上,統(tǒng)一調(diào)整標(biāo)簽的(x,y)位置,標(biāo)簽對(duì)齊等屬性以實(shí)現(xiàn)想要的標(biāo)簽布局效果。示例如下:將標(biāo)簽顯示在圖形右側(cè)10px的位置,并且垂直居中:labelLayout(params){return{x:params.rect.x+10,y:params.rect.y+params.rect.height/2,verticalAlign:'middle',align:'left'}}根據(jù)圖形的包圍盒尺寸決定文本尺寸labelLayout(params){return{fontSize:Math.max(params.rect.width/10,5)};}◆series-pie.labelLayout.hideOverlapboolean類型,用于設(shè)置是否隱藏重疊的標(biāo)簽?!魋eries-pie.labelLayout.moveOverlapstring類型,用于設(shè)置在標(biāo)簽重疊的時(shí)候是否挪動(dòng)標(biāo)簽位置以防止重疊。目前支持配置為:①'shiftX'水平方向依次位移,在水平方向?qū)R時(shí)使用。②'shiftY'垂直方向依次位移,在垂直方向?qū)R時(shí)使用。◆series-pie.labelLayout.xnumber或string類型,用于設(shè)置標(biāo)簽的x位置。支持絕對(duì)的像素值或者'20%'這樣的相對(duì)值?!魋eries-pie.labelLayout.ynumber或string類型,用于設(shè)置標(biāo)簽的y位置。支持絕對(duì)的像素值或者'20%'這樣的相對(duì)值。◆series-pie.labelLayout.dxnumber類型,用于設(shè)置標(biāo)簽在x方向上的像素偏移。可以和x一起使用?!魋eries-pie.labelLayout.dynumber類型,用于設(shè)置標(biāo)簽在y方向上的像素偏移??梢院蛓一起使用◆series-pie.labelLayout.rotatenumber類型,用于設(shè)置標(biāo)簽旋轉(zhuǎn)角度?!魋eries-pie.labelLayout.widthnumber類型,用于設(shè)置標(biāo)簽顯示的寬度??梢耘浜蟧verflow使用控制標(biāo)簽顯示在固定寬度內(nèi)◆series-pie.labelLayout.heightnumber類型,用于設(shè)置標(biāo)簽顯示的高度。◆series-pie.labelLayout.alignstring類型,用于設(shè)置標(biāo)簽水平對(duì)齊方式。可以設(shè)置'left'、'center'、'right'?!魋eries-pie.labelLayout.verticalAlignstring類型,用于設(shè)置標(biāo)簽垂直對(duì)齊方式??梢栽O(shè)置'top'、'middle'、'bottom'。◆series-pie.labelLayout.fontSizenumber類型,用于設(shè)置Thetextsizeofthelabel.◆series-pie.labelLayout.draggableboolean類型,用于設(shè)置標(biāo)簽是否可以允許用戶通過拖拽二次調(diào)整位置?!魋eries-pie.labelLayout.labelLinePointsArray類型,用于設(shè)置標(biāo)簽引導(dǎo)線三個(gè)點(diǎn)的位置。格式為:[[x,y],[x,y],[x,y]]在餅圖中常用來微調(diào)已經(jīng)計(jì)算好的引導(dǎo)線,其它情況一般不建議設(shè)置?!魋eries-pie.itemStyleObject圖形樣式?!魋eries-pie.itemStyle.color=自適應(yīng)Color或Function類型,圖形的顏色。默認(rèn)從全局調(diào)色盤option.color獲取顏色。支持使用rgb(255,255,255),rgba(255,255,255,1),#fff等方式設(shè)置為純色,也支持設(shè)置為漸變色和紋理填充,具體見option.Color類型,用于設(shè)置支持使用回調(diào)函數(shù)?;卣{(diào)函數(shù)格式如下:(params:Object)=>Color傳入的是數(shù)據(jù)項(xiàng)seriesIndex,dataIndex,data,value等各個(gè)參數(shù)?!魋eries-pie.itemStyle.borderColor='#000'Color類型,用于設(shè)置圖形的描邊顏色。支持的顏色格式同color,不支持回調(diào)函數(shù)?!魋eries-pie.itemStyle.borderWidthnumber類型,用于設(shè)置描邊線寬。為0時(shí)無描邊?!魋eries-pie.itemStyle.borderType='solid'string或number或Array類型,用于設(shè)置描邊類型。其取值可選項(xiàng)為:'solid'、'dashed'、'dotted'。自v5.0.0開始,也可以是number或者number數(shù)組,用以指定線條的dasharray,配合borderDashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如:{borderType:[5,10],borderDashOffset:5}◆series-pie.itemStyle.borderDashOffsetnumber類型,從v5.0.0開始支持,用于設(shè)置虛線的偏移量,可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?!魋eries-pie.itemStyle.borderCap='butt'string類型,從v5.0.0開始支持用于指定線段末端的繪制方式,其取值可選項(xiàng)為:①'butt':線段末端以方形結(jié)束。②'round':線段末端以圓形結(jié)束。③'square':線段末端以方形結(jié)束,但是增加了一個(gè)寬度和線段相同,高度是線段厚度一半的矩形區(qū)域。默認(rèn)值為'butt'?!魋eries-pie.itemStyle.borderJoin='bevel'string類型,從v5.0.0開始支持,用于設(shè)置2個(gè)長(zhǎng)度不為0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性(長(zhǎng)度為0的變形部分,其指定的末端和控制點(diǎn)在同一位置,會(huì)被忽略)。其取值可選項(xiàng)為:①'bevel':在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域,每個(gè)部分都有各自獨(dú)立的矩形拐角。②'round':通過填充一個(gè)額外的,圓心在相連部分末端的扇形,繪制拐角的形狀。圓角的半徑是線段的寬度。③'miter':通過延伸相連部分的外邊緣,使其相交于一點(diǎn),形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過borderMiterLimit屬性看到效果。默認(rèn)值為'bevel'?!魋eries-pie.itemStyle.borderMiterLimit=10number類型,從v5.0.0開始支持,用于設(shè)置斜接面限制比例。只有當(dāng)borderJoin為miter時(shí),borderMiterLimit才有效。默認(rèn)值為10。負(fù)數(shù)、0、Infinity和NaN均會(huì)被忽略?!魋eries-pie.itemStyle.shadowBlurnumber類型,用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼:{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}◆series-pie.itemStyle.shadowColorColor類型,用于設(shè)置陰影顏色。支持的格式同color。◆series-pie.itemStyle.shadowOffsetXnumber類型,用于設(shè)置陰影水平方向上的偏移距離。◆series-pie.itemStyle.shadowOffsetYnumber類型,用于設(shè)置陰影垂直方向上的偏移距離?!魋eries-pie.itemStyle.opacity=1number類型,用于設(shè)置圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形。◆series-pie.itemStyle.decalObject類型,用于設(shè)置圖形的貼花圖案,在aria.enabled與aria.decal.show都是true的情況下才生效。如果為'none'表示不使用貼花圖案?!魋eries-pie.itemStyle.borderRadiusnumber或string或Array類型,從v5.0.0開始支持,用于指定餅圖扇形區(qū)塊的內(nèi)外圓角半徑,支持設(shè)置固定數(shù)值或者相對(duì)于扇形區(qū)塊的半徑的百分比值。從v5.3.0開始,支持分別配置從內(nèi)到外順時(shí)針方向四個(gè)角的圓角半徑,百分比值從相對(duì)于內(nèi)外扇形的半徑更改為相對(duì)于內(nèi)外扇形的半徑差。例如:☆v5.3.0之前:

borderRadius:10:表示內(nèi)圓角半徑和外圓角半徑都是10px。

borderRadius:'20%':表示內(nèi)圓角半徑和外圓角半徑都是扇形區(qū)塊半徑的20%。

borderRadius:[10,20]:表示為環(huán)形圖時(shí),內(nèi)圓角半徑是10px、外圓角半徑是20px。

borderRadius:['20%','50%']:表示為環(huán)形圖時(shí),內(nèi)圓角半徑是內(nèi)圓半徑的20%、外圓角半徑是外圓半徑的50%?!顅5.3.0之后:

borderRadius:10:表示內(nèi)圓角半徑和外圓角半徑都是10px。

borderRadius:'20%':表示內(nèi)圓角半徑和外圓角半徑都是扇形區(qū)塊半徑的20%。

borderRadius:[10,20]:表示為環(huán)形圖時(shí),內(nèi)圓角半徑是10px、外圓角半徑是20px。

borderRadius:['20%','50%']:表示為環(huán)形圖時(shí),內(nèi)圓角半徑是內(nèi)外圓半徑差的20%、外圓角半徑是內(nèi)外圓半徑差的50%。

borderRadius:[5,10,15,20]:表示內(nèi)圓角半徑分別為5px和10px,外圓角半徑分別為15px和20px。(33)series-pie.emphasisObject類型,用于設(shè)置高亮狀態(tài)的扇區(qū)和標(biāo)簽樣式?!魋eries-pie.emphasis.disabledboolean類型,從v5.3.0開始支持,是否關(guān)閉高亮狀態(tài)。關(guān)閉高亮狀態(tài)可以在鼠標(biāo)移到圖形上,tooltip觸發(fā),或者圖例聯(lián)動(dòng)的時(shí)候不再觸發(fā)高亮效果。在圖形非常多的時(shí)候可以關(guān)閉以提升交互流暢性?!魋eries-pie.emphasis.scale=trueboolean類型,從v5.0.0開始支持,是否開啟高亮后扇區(qū)的放大效果?!魋eries-pie.emphasis.scaleSize=10number類型,從v5.0.0開始支持,高亮后扇區(qū)的放大尺寸,在開啟emphasis.scale后有效。◆series-pie.emphasis.focus='none'string類型,從v5.0.0開始支持,在高亮圖形時(shí),是否淡出其它數(shù)據(jù)的圖形已達(dá)到聚焦的效果。支持如下配置:①'none'不淡出其它圖形,默認(rèn)使用該配置。②'self'只聚焦(不淡出)當(dāng)前高亮的數(shù)據(jù)的圖形。③'series'聚焦當(dāng)前高亮的數(shù)據(jù)所在的系列的所有圖形。示例代碼:下面代碼配置了柱狀圖在高亮一個(gè)圖形的時(shí)候,淡出當(dāng)前直角坐標(biāo)系所有其它的系列。emphasis:{focus:'series',blurScope:'coordinateSystem'}◆series-pie.emphasis.blurScope='coordinateSystem'string類型,從v5.0.0開始支持,在開啟focus的時(shí)候,可以通過blurScope配置淡出的范圍。支持如下配置①'coordinateSystem'淡出范圍為坐標(biāo)系,默認(rèn)使用該配置。②'series'淡出范圍為系列。③'global'淡出范圍為全局?!魋eries-pie.emphasis.labelObject類型。◆series-pie.emphasis.labelLineObject類型。◆series-pie.emphasis.itemStyleObject類型。(34)series-pie.blurObject類型,從v5.0.0開始支持,淡出狀態(tài)的扇區(qū)和標(biāo)簽樣式。開啟emphasis.focus后有效?!魋eries-pie.blur.labelObject類型。◆series-pie.blur.labelLineObject類型。◆series-pie.blur.itemStyleObject類型。(35)series-pie.selectObject類型,從v5.0.0開始支持,用于設(shè)置選中狀態(tài)的扇區(qū)和標(biāo)簽樣式。開啟selectedMode后有效?!魋eries-pie.select.disabledboolean類型,從v5.3.0開始支持,是否可以被選中。在開啟selectedMode的時(shí)候有效,可以用于關(guān)閉部分?jǐn)?shù)據(jù)?!魋eries-pie.select.labelObject類型。◆series-pie.select.labelLineObject類型?!魋eries-pie.select.itemStyleObject類型。(36)series-pie.center=['50%','50%']Array類型,用于設(shè)置餅圖的中心(圓心)坐標(biāo),數(shù)組的第一項(xiàng)是橫坐標(biāo),第二項(xiàng)是縱坐標(biāo)。支持設(shè)置成百分比,設(shè)置成百分比時(shí)第一項(xiàng)是相對(duì)于容器寬度,第二項(xiàng)是相對(duì)于容器高度。示例代碼://設(shè)置成絕對(duì)的像素值center:[400,300]//設(shè)置成相對(duì)的百分比center:['50%','50%']◆series-pie.radius=[0,'75%']number或string或Array類型,用于設(shè)置餅圖的半徑??梢詾槿缦骂愋停孩賜umber:直接指定外半徑值。②string:例如,'20%',表示外半徑為可視區(qū)尺寸(容器高寬中較小一項(xiàng))的20%長(zhǎng)度。③Array.<number|string>:數(shù)組的第一項(xiàng)是內(nèi)半徑,第二項(xiàng)是外半徑。每一項(xiàng)遵從上述numberstring的描述??梢詫?nèi)半徑設(shè)大顯示成圓環(huán)圖(Donutchart)。(37)series-pie.seriesLayoutBy='column'string類型,用于設(shè)置當(dāng)使用dataset時(shí),seriesLayoutBy指定了dataset中用行還是列對(duì)應(yīng)到系列上,也就是說,系列“排布”到dataset的行還是列上。其取值可選項(xiàng)為:①'column':默認(rèn),dataset的列對(duì)應(yīng)于系列,從而dataset中每一列是一個(gè)維度(dimension)。②'row':dataset的行對(duì)應(yīng)于系列,從而dataset中每一行是一個(gè)維度(dimension)。(38)series-pie.datasetIndexnumber類型,用于設(shè)置如果series.data沒有指定,并且dataset存在,那么就會(huì)使用dataset。datasetIndex指定本系列使用哪個(gè)dataset。(39)series-pie.dimensionsArray類型,用于設(shè)置使用dimensions定義series.data或者dataset.source的每個(gè)維度的信息。注意:如果使用了dataset,那么可以在dataset.dimensions中定義dimension,或者在dataset.source的第一行/列中給出dimension名稱。于是就不用在這里指定dimension。但如果在這里指定了dimensions,那么優(yōu)先使用這里的。例如:option={dataset:{source:[//有了上面dimensions定義后,下面這五個(gè)維度的名稱分別為://'date','open','close','highest','lowest'[12,44,55,66,2],[23,6,16,23,1],…]},series:{type:'xxx',//定義了每個(gè)維度的名稱。這個(gè)名稱會(huì)被顯示到默認(rèn)的tooltip中。dimensions:['date','open','close','highest','lowest']}}series:{type:'xxx',dimensions:[null,//如果此維度不想給出定義,則使用null即可{type:'ordinal'},//只定義此維度的類型。//'ordinal'表示離散型,一般文本使用這種類型。//如果類型沒有被定義,會(huì)自動(dòng)猜測(cè)類型。{name:'good',type:'number'},'bad'//等同于{name:'bad'}]}dimensions數(shù)組中的每一項(xiàng)其取值可選項(xiàng)為:☆string,如'someName',等同于{name:'someName'}☆Object,屬性可以有:

name:string。

type:string,支持△number,默認(rèn),表示普通數(shù)據(jù)?!鱫rdinal,對(duì)于類目、文本這些string類型的數(shù)據(jù),如果需要能在數(shù)軸上使用,須是'ordinal'類型。ECharts默認(rèn)會(huì)自動(dòng)判斷這個(gè)類型。但是自動(dòng)判斷也是不可能很完備的,所以使用者也可以手動(dòng)強(qiáng)制指定?!鱢loat,即Float64Array?!鱥nt,即Int32Array?!鱰ime,表示時(shí)間類型。設(shè)置成'time'則能支持自動(dòng)解析數(shù)據(jù)成時(shí)間戳(timestamp),例如該維度的數(shù)據(jù)是'9月-05-10',會(huì)自動(dòng)被解析。時(shí)間類型的支持參見data。

displayName:一般用于tooltip中維度名的展示。string如果沒有指定,默認(rèn)使用name來展示。值得一提的是,當(dāng)定義了dimensions后,默認(rèn)tooltip中對(duì)個(gè)維度的顯示,會(huì)變?yōu)椤贺Q排』,從而方便顯示每個(gè)維度的名稱。如果沒有定義dimensions,則默認(rèn)tooltip會(huì)橫排顯示,且只顯示數(shù)值沒有維度名稱可顯示。(40)series-pie.encodeObject類型,可以定義data的哪個(gè)維度被編碼成什么。例如:option={dataset:{source:[//每一列稱為一個(gè)『維度』。//這里分別是維度0、1、2、3、4。[12,44,55,66,2],[23,6,16,23,1],…]},series:{type:'xxx',encode:{x:[3,1,5],//表示維度3、1、5映射到x軸。y:2,//表示維度2映射到y(tǒng)軸。tooltip:[3,2,4]//表示維度3、2、4會(huì)在tooltip中顯示。}}}當(dāng)使用dimensions給維度定義名稱后,encode中可直接引用名稱,例如:series:{type:'xxx',dimensions:['date','open','close','highest','lowest'],encode:{x:'date',y:['open','close','highest','lowest']}}encode聲明的基本結(jié)構(gòu)如下,其中冒號(hào)左邊是坐標(biāo)系、標(biāo)簽等特定名稱,如'x','y','tooltip'等,冒號(hào)右邊是數(shù)據(jù)中的維度名(string格式)或者維度的序號(hào)(number格式,從0開始計(jì)數(shù)),可以指定一個(gè)或多個(gè)維度(使用數(shù)組)。通常情況下,下面各種信息不需要所有的都寫,按需寫即可。特殊地,在自定義系列(customseries)中,encode中軸可以不指定或設(shè)置為null/undefined,從而使系列免于受這個(gè)軸控制,也就是說,軸的范圍(extent)不會(huì)受此系列數(shù)值的影響,軸被dataZoom控制時(shí)也不會(huì)過濾掉這個(gè)系列:varoption={xAxis:{},yAxis:{},dataZoom:[{xAxisIndex:0},{yAxisIndex:0}],series:{type:'custom',renderItem:function(params,api){return{type:'circle',shape:{cx:100,//x位置永遠(yuǎn)為100cy:api.coord([0,api.value(0)])[1],r:30},style:{fill:'blue'}};},encode:{//這樣這個(gè)系列就不會(huì)被x軸以及x//軸上的dataZoom控制了。x:-1,y:1},data:[…]}};(41)series-pie.dataGroupIdstring類型,用于設(shè)置該系列所有數(shù)據(jù)項(xiàng)的組ID,優(yōu)先級(jí)低于groupId。詳見series.data.groupId。(42)series-pie.dataArray類型,用于設(shè)置系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值,如:[12,34,56,10,23]如果需要在數(shù)據(jù)中加入其它維度給visualMap組件用來映射到顏色等其它圖形屬性。每個(gè)數(shù)據(jù)項(xiàng)也可以是數(shù)組,如:[[12,14],[34,50],[56,30],[10,15],[23,10]]這時(shí)候可以將每項(xiàng)數(shù)組中的第2個(gè)值指定給visualMap組件。更多時(shí)候我們需要指定每個(gè)數(shù)據(jù)項(xiàng)的名稱,這時(shí)候需要每個(gè)項(xiàng)為一個(gè)對(duì)象:[{//數(shù)據(jù)項(xiàng)的名稱name:'數(shù)據(jù)1',//數(shù)據(jù)項(xiàng)值8value:10},{name:'數(shù)據(jù)2',value:20}]需要對(duì)個(gè)別內(nèi)容指定進(jìn)行個(gè)性化定義時(shí):[{name:'數(shù)據(jù)1',value:10},{//數(shù)據(jù)項(xiàng)名稱name:'數(shù)據(jù)2',value:56,//自定義特殊tooltip,僅對(duì)該數(shù)據(jù)項(xiàng)有效tooltip:{},//自定義特殊itemStyle,僅對(duì)該item有效itemStyle:{}}](43)series-pie.markPointObject類型,用于設(shè)置圖表標(biāo)注。(44)series-pie.markLineObject類型,用于設(shè)置圖表標(biāo)線。(45)series-pie.markAreaObject類型,用于設(shè)置圖表標(biāo)域,常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù),例如標(biāo)出某段時(shí)間(46)series-pie.silentboo

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論