Web數(shù)據(jù)可視化教程(基于ECharts)教案匯 電子活頁(yè)3-1 柱狀圖的主要屬性及其設(shè)置 -任務(wù)3-6 的對(duì)應(yīng)代碼_第1頁(yè)
Web數(shù)據(jù)可視化教程(基于ECharts)教案匯 電子活頁(yè)3-1 柱狀圖的主要屬性及其設(shè)置 -任務(wù)3-6 的對(duì)應(yīng)代碼_第2頁(yè)
Web數(shù)據(jù)可視化教程(基于ECharts)教案匯 電子活頁(yè)3-1 柱狀圖的主要屬性及其設(shè)置 -任務(wù)3-6 的對(duì)應(yīng)代碼_第3頁(yè)
Web數(shù)據(jù)可視化教程(基于ECharts)教案匯 電子活頁(yè)3-1 柱狀圖的主要屬性及其設(shè)置 -任務(wù)3-6 的對(duì)應(yīng)代碼_第4頁(yè)
Web數(shù)據(jù)可視化教程(基于ECharts)教案匯 電子活頁(yè)3-1 柱狀圖的主要屬性及其設(shè)置 -任務(wù)3-6 的對(duì)應(yīng)代碼_第5頁(yè)
已閱讀5頁(yè),還剩57頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(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-bar.type='bar'string類型。(2)series-bar.idstring類型,用于設(shè)置組件ID,默認(rèn)不指定。指定則可用于在option或者API中引用組件。(3)series-bar.namestring類型,用于設(shè)置系列名稱,用于tooltip的顯示,legend的圖例篩選,在setOption更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。(4)series-bar.colorBy='series'string類型,從v5.2.0開始支持,從調(diào)色盤option.color中取色的策略,可取值為:①'series':按照系列分配調(diào)色盤中的顏色,同一系列中的所有數(shù)據(jù)都是用相同的顏色;②'data':按照數(shù)據(jù)項(xiàng)分配調(diào)色盤中的顏色,每個(gè)數(shù)據(jù)項(xiàng)都使用不同的顏色。(5)series-bar.legendHoverLink=trueboolean類型,用于設(shè)置是否啟用圖例hover時(shí)的聯(lián)動(dòng)高亮。(6)series-bar.coordinateSystem='cartesian2d'string類型,用于設(shè)置該系列使用的坐標(biāo)系,其取值可選項(xiàng)為:①'cartesian2d'使用二維的直角坐標(biāo)系(也稱笛卡爾坐標(biāo)系),通過(guò)xAxisIndex,yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。②'polar'使用極坐標(biāo)系,通過(guò)polarIndex指定相應(yīng)的極坐標(biāo)組件(7)series-bar.xAxisIndexnumber類型,用于設(shè)置使用的x軸的index,在單個(gè)圖表實(shí)例中存在多個(gè)x軸的時(shí)候有用。(8)series-bar.yAxisIndexnumber類型,用于設(shè)置使用的y軸的index,在單個(gè)圖表實(shí)例中存在多個(gè)y軸的時(shí)候有用。(9)series-bar.polarIndexnumber類型,用于設(shè)置使用的極坐標(biāo)系的index,在單個(gè)圖表實(shí)例中存在多個(gè)極坐標(biāo)系的時(shí)候有用。(10)series-bar.roundCapboolean類型,從v4.5.0開始支持,用于設(shè)置是否在環(huán)形柱條兩側(cè)使用圓弧效果。僅對(duì)極坐標(biāo)系柱狀圖有效。(11)series-bar.realtimeSortboolean類型,用于設(shè)置是否開啟實(shí)時(shí)排序,用來(lái)實(shí)現(xiàn)動(dòng)態(tài)排序圖效果。(12)series-bar.showBackgroundboolean類型,從v4.7.0開始支持,用于設(shè)置是否顯示柱條的背景色。通過(guò)backgroundStyle配置背景樣式。(13)series-bar.backgroundStyleObject類型,從v4.7.0開始支持,用于設(shè)置每一個(gè)柱條的背景樣式。需要將showBackground設(shè)置為true時(shí)才有效?!魋eries-bar.backgroundStyle.color='rgba(180,180,180,0.2)'Color類型,用于設(shè)置柱條的顏色。支持使用rgb(255,255,255),rgba(255,255,255,1),#fff等方式設(shè)置為純色,也支持設(shè)置為漸變色和紋理填充,具體見(jiàn)option.Color類型?!魋eries-bar.backgroundStyle.borderColor='#000'Color類型,用于設(shè)置柱條的描邊顏色?!魋eries-bar.backgroundStyle.borderWidthnumber類型,用于設(shè)置柱條的描邊寬度,默認(rèn)不描邊。◆series-bar.backgroundStyle.borderType='solid'string類型,用于設(shè)置柱條的描邊類型,默認(rèn)為實(shí)線,支持'dashed','dotted'?!魋eries-bar.backgroundStyle.borderRadiusnumber或Array類型,用于設(shè)置圓角半徑,單位px,支持傳入數(shù)組分別指定4個(gè)圓角半徑。例如:borderRadius:5,//統(tǒng)一設(shè)置四個(gè)角的圓角大小borderRadius:[5,5,0,0]//(順時(shí)針左上,右上,右下,左下)◆series-bar.backgroundStyle.shadowBlurnumber類型,用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下:{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}◆series-bar.backgroundStyle.shadowColorColor類型,用于設(shè)置陰影顏色。支持的格式同color?!魋eries-bar.backgroundStyle.shadowOffsetXnumber類型,用于設(shè)置陰影水平方向上的偏移距離。◆series-bar.backgroundStyle.shadowOffsetYnumber類型,用于設(shè)置陰影垂直方向上的偏移距離?!魋eries-bar.backgroundStyle.opacity=1number類型,用于設(shè)置圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形?!魋eries-bar.labelObject類型,用于設(shè)置圖形上的文本標(biāo)簽,可用于說(shuō)明圖形的一些數(shù)據(jù)信息,例如值,名稱等?!魋eries-bar.label.showboolean類型,用于設(shè)置是否顯示標(biāo)簽?!魋eries-bar.label.distance=5number類型,用于設(shè)置距離圖形元素的距離。◆series-bar.label.rotatenumber類型,用于設(shè)置標(biāo)簽旋轉(zhuǎn)。從-90度到90度。正值是逆時(shí)針?!魋eries-bar.label.offsetArray類型,用于設(shè)置是否對(duì)文字進(jìn)行偏移。默認(rèn)不偏移。例如:[30,40]表示文字在橫向上偏移30,縱向上偏移40?!魋eries-bar.label.minMarginnumber類型,從v5.0.0開始支持,用于控制標(biāo)簽之間的最小距離,當(dāng)啟用labelLayout時(shí)可能會(huì)用到?!魋eries-bar.label.formatterstring或Function類型。用于設(shè)置標(biāo)簽內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式,字符串模板與回調(diào)函數(shù)返回的字符串均支持用\n換行。字符串模板模板變量有:①{a}:系列名。②:數(shù)據(jù)名。③{c}:數(shù)據(jù)值。④{@xxx}:數(shù)據(jù)中名為'xxx'的維度的值,如{@product}表示名為'product'的維度的值。⑤{@[n]}:數(shù)據(jù)中維度n的值,如{@[3]}表示維度3的值,從0開始計(jì)數(shù)。示例代碼如下:formatter:':{@score}'◆回調(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類型,用于設(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-bar.label.color='#fff'Color類型,用于設(shè)置文字的顏色。如果設(shè)置為'inherit',則為視覺(jué)映射得到的顏色,如系列色。◆series-bar.label.fontStyle='normal'string類型,用于設(shè)置文字字體的風(fēng)格。其取值可選項(xiàng)為:'normal'、'italic'、'oblique'?!魋eries-bar.label.fontWeight='normal'string或number類型,用于設(shè)置文字字體的粗細(xì)。其取值可選項(xiàng)為:'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆series-bar.label.fontFamily='sans-serif'string類型,用于設(shè)置文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆series-bar.label.fontSize=12number類型,用于設(shè)置文字的字體大小。◆series-bar.label.alignstring類型,用于設(shè)置文字水平對(duì)齊方式,默認(rèn)自動(dòng)。其取值可選項(xiàng)為:'left'、'center'、'right'。rich中如果沒(méi)有設(shè)置align,則會(huì)取父層級(jí)的align。例如:{align:right,rich:{a:{//沒(méi)有設(shè)置`align`,則`align`為right}}}◆series-bar.label.verticalAlignstring類型,用于設(shè)置文字垂直對(duì)齊方式,默認(rèn)自動(dòng)。其取值可選項(xiàng)為:'top'、'middle'、'bottom'。rich中如果沒(méi)有設(shè)置verticalAlign,則會(huì)取父層級(jí)的verticalAlign。例如:{verticalAlign:bottom,rich:{a:{//沒(méi)有設(shè)置`verticalAlign`,則`verticalAlign`為bottom}}}◆series-bar.label.lineHeightnumber類型,用于設(shè)置行高。rich中如果沒(méi)有設(shè)置lineHeight,則會(huì)取父層級(jí)的lineHeight。例如:{lineHeight:56,rich:{a:{//沒(méi)有設(shè)置`lineHeight`,則`lineHeight`為56}}}◆series-bar.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',則為視覺(jué)映射得到的顏色,如系列色?!魋eries-bar.label.borderColorColor類型,用于設(shè)置文字塊邊框顏色。如果設(shè)置為'inherit',則為視覺(jué)映射得到的顏色,如系列色。◆series-bar.label.borderWidthnumber類型,用于設(shè)置文字塊邊框?qū)挾取!魋eries-bar.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-bar.label.borderDashOffsetnumber類型,從v5.0.0開始支持。用于設(shè)置虛線的偏移量,可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果。◆series-bar.label.borderRadiusnumber或Array類型,用于設(shè)置文字塊的圓角?!魋eries-bar.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?!魋eries-bar.label.shadowColor='transparent'Color類型,用于設(shè)置文字塊的背景陰影顏色?!魋eries-bar.label.shadowBlurnumber類型,用于設(shè)置文字塊的背景陰影長(zhǎng)度?!魋eries-bar.label.shadowOffsetXnumber類型,用于設(shè)置文字塊的背景陰影X偏移?!魋eries-bar.label.shadowOffsetYnumber類型,用于設(shè)置文字塊的背景陰影Y偏移?!魋eries-bar.label.widthnumber類型,用于設(shè)置文本顯示寬度?!魋eries-bar.label.heightnumber類型,用于設(shè)置文本顯示高度?!魋eries-bar.label.textBorderColorColor類型,用于設(shè)置文字本身的描邊顏色。如果設(shè)置為'inherit',則為視覺(jué)映射得到的顏色,如系列色?!魋eries-bar.label.textBorderWidthnumber類型,用于設(shè)置文字本身的描邊寬度。◆series-bar.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-bar.label.textBorderDashOffsetnumber類型,從v5.0.0開始支持,用于設(shè)置虛線的偏移量,可搭配textBorderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?!魋eries-bar.label.textShadowColor='transparent'Color類型,用于設(shè)置文字本身的陰影顏色?!魋eries-bar.label.textShadowBlurnumber類型,用于設(shè)置文字本身的陰影長(zhǎng)度?!魋eries-bar.label.textShadowOffsetXnumber類型,用于設(shè)置文字本身的陰影X偏移。◆series-bar.label.textShadowOffsetYnumber類型,用于設(shè)置文字本身的陰影Y偏移?!魋eries-bar.label.overflow='none'string類型,用于設(shè)置文字超出寬度是否截?cái)嗷蛘邠Q行,配置width時(shí)有效。①'truncate'截?cái)?,并在末尾顯示ellipsis配置的文本,默認(rèn)為…②'break'換行。③'breakAll'換行,跟'break'不同的是,在英語(yǔ)等拉丁文中,'breakAll'還會(huì)強(qiáng)制單詞內(nèi)換行?!魋eries-bar.label.ellipsis='…'string類型,用于設(shè)置在overflow配置為'truncate'的時(shí)候,可以通過(guò)該屬性配置末尾顯示的文本?!魋eries-bar.label.richObject類型。在rich里面,可以自定義富文本樣式。利用富文本樣式,可以在標(biāo)簽中做出非常豐富的效果?!魋eries-bar.label.position='inside'string或Array類型,用于設(shè)置標(biāo)簽的位置。可以通過(guò)內(nèi)置的語(yǔ)義聲明位置:示例代碼如下:position:'top'支持:top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight。也可以用一個(gè)數(shù)組表示相對(duì)的百分比或者絕對(duì)像素值表示標(biāo)簽相對(duì)于圖形包圍盒左上角的位置。示例代碼如下://絕對(duì)的像素值position:[10,10],//相對(duì)的百分比position:['50%','50%']極坐標(biāo)系柱狀圖除了上述取值之外,還支持:start/insideStart/middle/insideEnd/end。從v5.2.0開始支持◆series-bar.labelLineObject類型,從v5.0.0開始支持,用于標(biāo)簽的視覺(jué)引導(dǎo)線配置。◆series-bar.labelLine.showboolean類型,用于設(shè)置是否顯示視覺(jué)引導(dǎo)線?!魋eries-bar.labelLine.lineStyleObject(13)series-bar.itemStyleObject類型,用于設(shè)置圖形樣式。◆series-bar.itemStyle.color='auto'Color或Function類型,用于設(shè)置柱條的顏色。默認(rèn)從全局調(diào)色盤option.color獲取顏色。支持使用rgb(255,255,255),rgba(255,255,255,1),#fff等方式設(shè)置為純色,也支持設(shè)置為漸變色和紋理填充,支持使用回調(diào)函數(shù)?;卣{(diào)函數(shù)格式如下:(params:Object)=>Color傳入的是數(shù)據(jù)項(xiàng)seriesIndex,dataIndex,data,value等各個(gè)參數(shù)?!魋eries-bar.itemStyle.borderColor='#000'Color類型,用于設(shè)置柱條的描邊顏色?!魋eries-bar.itemStyle.borderWidthnumber類型,用于設(shè)置柱條的描邊寬度,默認(rèn)不描邊?!魋eries-bar.itemStyle.borderType='solid'string類型,用于設(shè)置柱條的描邊類型,默認(rèn)為實(shí)線,支持'dashed','dotted'?!魋eries-bar.itemStyle.borderRadiusnumber或Array類型,用于設(shè)置圓角半徑,單位px,支持傳入數(shù)組分別指定4個(gè)圓角半徑。例如:borderRadius:5,//統(tǒng)一設(shè)置四個(gè)角的圓角大小borderRadius:[5,5,0,0]//(順時(shí)針左上,右上,右下,左下)◆series-bar.itemStyle.shadowBlurnumber類型,用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下:{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}◆series-bar.itemStyle.shadowColorColor類型,用于設(shè)置陰影顏色。支持的格式同color。◆series-bar.itemStyle.shadowOffsetXnumber類型,用于設(shè)置陰影水平方向上的偏移距離?!魋eries-bar.itemStyle.shadowOffsetYnumber類型,用于設(shè)置陰影垂直方向上的偏移距離。◆series-bar.itemStyle.opacity=1number類型,用于設(shè)置圖形透明度。支持從0到1的數(shù)字,為0時(shí)不繪制該圖形。◆series-bar.itemStyle.decalObject類型,用于設(shè)置圖形的貼花圖案,在aria.enabled與aria.decal.show都是true的情況下才生效。如果為'none'表示不使用貼花圖案。(14)series-bar.labelLayoutObject或Function類型,從v5.0.0開始支持,用于設(shè)置標(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)簽布局效果。該配置項(xiàng)也可以是一個(gè)有如下參數(shù)的回調(diào)函數(shù)//標(biāo)簽對(duì)應(yīng)數(shù)據(jù)的dataIndexdataIndex:number//標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)類型,只在關(guān)系圖中會(huì)有node和edge數(shù)據(jù)類型的區(qū)分dataType?:string//標(biāo)簽對(duì)應(yīng)的系列的indexseriesIndex:number//標(biāo)簽顯示的文本text:string//默認(rèn)的標(biāo)簽的包圍盒,由系列默認(rèn)的標(biāo)簽布局決定labelRect:{x:number,y:number,width:number,height:number}//默認(rèn)的標(biāo)簽水平對(duì)齊align:'left'|'center'|'right'//默認(rèn)的標(biāo)簽垂直對(duì)齊verticalAlign:'top'|'middle'|'bottom'//標(biāo)簽所對(duì)應(yīng)的數(shù)據(jù)圖形的包圍盒,可用于定位標(biāo)簽位置rect:{x:number,y:number,width:number,height:number}//默認(rèn)引導(dǎo)線的位置,目前只有餅圖(pie)和漏斗圖(funnel)有默認(rèn)標(biāo)簽位置//如果沒(méi)有該值則為nulllabelLinePoints?:number[][]示例代碼如下:代碼1:將標(biāo)簽顯示在圖形右側(cè)10px的位置,并且垂直居中。labelLayout(params){return{x:params.rect.x+10,y:params.rect.y+params.rect.height/2,verticalAlign:'middle',align:'left'}}代碼2:根據(jù)圖形的包圍盒尺寸決定文本尺寸。labelLayout(params){return{fontSize:Math.max(params.rect.width/10,5)};}◆series-bar.labelLayout.hideOverlapboolean類型,用于設(shè)置是否隱藏重疊的標(biāo)簽?!魋eries-bar.labelLayout.moveOverlapstring類型,用于設(shè)置在標(biāo)簽重疊的時(shí)候是否挪動(dòng)標(biāo)簽位置以防止重疊。目前支持配置為:①'shiftX'水平方向依次位移,在水平方向?qū)R時(shí)使用。②'shiftY'垂直方向依次位移,在垂直方向?qū)R時(shí)使用。◆series-bar.labelLayout.xnumber或string類型,用于設(shè)置標(biāo)簽的x位置。支持絕對(duì)的像素值或者'20%'這樣的相對(duì)值?!魋eries-bar.labelLayout.ynumber或string類型,用于設(shè)置標(biāo)簽的y位置。支持絕對(duì)的像素值或者'20%'這樣的相對(duì)值?!魋eries-bar.labelLayout.dxnumber類型,用于設(shè)置標(biāo)簽在x方向上的像素偏移。可以和x一起使用。◆series-bar.labelLayout.dynumber類型,用于設(shè)置標(biāo)簽在y方向上的像素偏移。可以和y一起使用◆series-bar.labelLayout.rotatenumber類型,用于設(shè)置標(biāo)簽旋轉(zhuǎn)角度?!魋eries-bar.labelLayout.widthnumber類型,用于設(shè)置標(biāo)簽顯示的寬度。可以配合overflow使用控制標(biāo)簽顯示在固定寬度內(nèi)◆series-bar.labelLayout.heightnumber類型,用于設(shè)置標(biāo)簽顯示的高度?!魋eries-bar.labelLayout.alignstring類型,用于設(shè)置標(biāo)簽水平對(duì)齊方式??梢栽O(shè)置'left'、'center'、'right'?!魋eries-bar.labelLayout.verticalAlignstring類型,用于設(shè)置標(biāo)簽垂直對(duì)齊方式??梢栽O(shè)置'top'、'middle'、'bottom'?!魋eries-bar.labelLayout.fontSizenumber類型,用于設(shè)置Thetextsizeofthelabel.◆series-bar.labelLayout.draggableboolean類型,用于設(shè)置標(biāo)簽是否可以允許用戶通過(guò)拖拽二次調(diào)整位置?!魋eries-bar.labelLayout.labelLinePointsArray類型,用于設(shè)置標(biāo)簽引導(dǎo)線三個(gè)點(diǎn)的位置。格式為:[[x,y],[x,y],[x,y]]在餅圖中常用來(lái)微調(diào)已經(jīng)計(jì)算好的引導(dǎo)線,其它情況一般不建議設(shè)置。(15)series-bar.emphasisObject類型,用于設(shè)置高亮的圖形樣式和標(biāo)簽樣式?!魋eries-bar.emphasis.disabledboolean類型,從v5.3.0開始支持,用于設(shè)置是否關(guān)閉高亮狀態(tài)。關(guān)閉高亮狀態(tài)可以在鼠標(biāo)移到圖形上,tooltip觸發(fā),或者圖例聯(lián)動(dòng)的時(shí)候不再觸發(fā)高亮效果。在圖形非常多的時(shí)候可以關(guān)閉以提升交互流暢性。◆series-bar.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-bar.emphasis.blurScope='coordinateSystem'string類型,從v5.0.0開始支持。在開啟focus的時(shí)候,可以通過(guò)blurScope配置淡出的范圍。支持如下配置:①'coordinateSystem'淡出范圍為坐標(biāo)系,默認(rèn)使用該配置。②'series'淡出范圍為系列。③'global'淡出范圍為全局?!魋eries-bar.emphasis.labelObject類型,用于設(shè)置圖形上的文本標(biāo)簽,可用于說(shuō)明圖形的一些數(shù)據(jù)信息,例如值、名稱等?!魋eries-bar.emphasis.labelLineObject類型,從v5.0.0開始支持。用于標(biāo)簽的視覺(jué)引導(dǎo)線配置。◆series-bar.emphasis.itemStyleObject類型,用于設(shè)置圖形樣式?!魋eries-bar.blurObject類型,用于設(shè)置淡出時(shí)的圖形樣式和標(biāo)簽樣式,開啟emphasis.focus后有效?!魋eries-bar.blur.labelObject類型,用于設(shè)置圖形上的文本標(biāo)簽,可用于說(shuō)明圖形的一些數(shù)據(jù)信息,例如值、名稱等?!魋eries-bar.blur.labelLineObject類型,從v5.0.0開始支持,用于標(biāo)簽的視覺(jué)引導(dǎo)線配置?!魋eries-bar.blur.itemStyleObject類型,用于設(shè)置圖形樣式?!魋eries-bar.selectObject類型,從v5.0.0開始支持,用于設(shè)置數(shù)據(jù)選中時(shí)的圖形樣式和標(biāo)簽樣式,開啟selectedMode后有效?!魋eries-bar.select.disabledboolean類型,從v5.3.0開始支持,用于設(shè)置是否可以被選中。在開啟selectedMode的時(shí)候有效,可以用于關(guān)閉部分?jǐn)?shù)據(jù)?!魋eries-bar.select.labelObject類型,用于設(shè)置圖形上的文本標(biāo)簽,可用于說(shuō)明圖形的一些數(shù)據(jù)信息,例如值、名稱等?!魋eries-bar.select.labelLineObject類型,從v5.0.0開始支持,用于標(biāo)簽的視覺(jué)引導(dǎo)線配置。◆series-bar.select.itemStyleObject類型,用于設(shè)置圖形樣式。(16)series-bar.selectedModeboolean或string類型,從v5.0.0開始支持。用于選中模式的配置,表示是否支持多個(gè)選中,默認(rèn)關(guān)閉。支持布爾值和字符串,字符串取值可選項(xiàng)為:'single'、'multiple'、'series'分別表示單選,多選以及選擇整個(gè)系列。從v5.3.0開始支持'series'。(17)series-bar.stackstring類型,用于設(shè)置數(shù)據(jù)堆疊,同個(gè)類目軸上系列配置相同的stack值可以堆疊放置。注:目前stack只支持堆疊于'value'和'log'類型的類目軸上,不支持'time'和'category'類型的類目軸。(18)series-bar.stackStrategy='samesign'string類型,從v5.3.3開始支持,用于設(shè)置堆積數(shù)值的策略,前提是stack屬性已被設(shè)置。其值其取值可選項(xiàng)為:①'samesign':只在要堆疊的值與當(dāng)前累積的堆疊值具有相同的正負(fù)符號(hào)時(shí)才堆疊。②'all':堆疊所有的值,不管當(dāng)前或累積的堆疊值的正負(fù)符號(hào)是什么。③'positive':只堆積正值。④'negative':只堆疊負(fù)值。(19)series-bar.samplingstring類型,用于設(shè)置柱狀圖在數(shù)據(jù)量遠(yuǎn)大于像素點(diǎn)時(shí)候的降采樣策略,開啟后可以有效的優(yōu)化圖表的繪制效率,默認(rèn)關(guān)閉,也就是全部繪制不過(guò)濾數(shù)據(jù)點(diǎn)。其取值可選項(xiàng)為:①'lttb':采用Largest-Triangle-Three-Bucket算法,可以最大程度保證采樣后線條的趨勢(shì),形狀和極值。②'average':取過(guò)濾點(diǎn)的平均值。③'min':取過(guò)濾點(diǎn)的最小值。④'max':取過(guò)濾點(diǎn)的最大值。⑤'minmax':取過(guò)濾點(diǎn)絕對(duì)值的最大極值(從v5.5.0開始支持)。⑥'sum':取過(guò)濾點(diǎn)的和。(20)series-bar.cursor='pointer'string類型,用于設(shè)置鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式,同CSS的cursor。(21)series-bar.barWidth=自適應(yīng)number或string類型,用于設(shè)置柱條的寬度,不設(shè)時(shí)自適應(yīng)??梢允墙^對(duì)值例如40或者百分?jǐn)?shù)例如'60%'。百分?jǐn)?shù)基于自動(dòng)計(jì)算出的每一類目的寬度。在同一坐標(biāo)系上,此屬性會(huì)被多個(gè)'bar'系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè)'bar'系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有'bar'系列生效。(22)series-bar.barMaxWidthnumber或string類型,用于設(shè)置柱條的最大寬度。比barWidth優(yōu)先級(jí)高??梢允墙^對(duì)值例如40或者百分?jǐn)?shù)例如'60%'。百分?jǐn)?shù)基于自動(dòng)計(jì)算出的每一類目的寬度。在同一坐標(biāo)系上,此屬性會(huì)被多個(gè)'bar'系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè)'bar'系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有'bar'系列生效。(23)series-bar.barMinWidthnumber或string類型,用于設(shè)置柱條的最小寬度。在直角坐標(biāo)系中,默認(rèn)值是1。否則默認(rèn)值是null。比barWidth優(yōu)先級(jí)高??梢允墙^對(duì)值例如40或者百分?jǐn)?shù)例如'60%'。百分?jǐn)?shù)基于自動(dòng)計(jì)算出的每一類目的寬度。在同一坐標(biāo)系上,此屬性會(huì)被多個(gè)'bar'系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè)'bar'系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有'bar'系列生效。(24)series-bar.barMinHeightnumber類型,用于設(shè)置柱條最小高度,可用于防止某數(shù)據(jù)項(xiàng)的值過(guò)小而影響交互。(25)series-bar.barMinAnglenumber類型,用于設(shè)置柱條最小角度,可用于防止某數(shù)據(jù)項(xiàng)的值過(guò)小而影響交互。僅對(duì)極坐標(biāo)系柱狀圖有效。(26)series-bar.barGap=20%string類型,用于設(shè)置不同系列的柱間距離,為百分比(如'20%',表示柱子寬度的20%)。如果想要兩個(gè)系列的柱子重疊,可以設(shè)置barGap為'-100%'。這在用柱子做背景的時(shí)候有用。在同一坐標(biāo)系上,此屬性會(huì)被多個(gè)'bar'系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè)'bar'系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有'bar'系列生效。(27)series-bar.barCategoryGapnumber或string類型,用于設(shè)置同一系列的柱間距離,默認(rèn)情況下根據(jù)柱狀圖的系列數(shù)量計(jì)算得到合適的間距,系列較多時(shí)間距會(huì)適當(dāng)調(diào)小,可設(shè)固定值。在同一坐標(biāo)系上,此屬性會(huì)被多個(gè)'bar'系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè)'bar'系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有'bar'系列生效。(28)series-bar.largeboolean類型,用于設(shè)置是否開啟大數(shù)據(jù)量?jī)?yōu)化,在數(shù)據(jù)圖形特別多而出現(xiàn)卡頓時(shí)候可以開啟。開啟后配合largeThreshold在數(shù)據(jù)量大于指定閾值的時(shí)候?qū)L制進(jìn)行優(yōu)化。缺點(diǎn)是優(yōu)化后不能自定義設(shè)置單個(gè)數(shù)據(jù)項(xiàng)的樣式。(29)series-bar.largeThreshold=400number類型,用于設(shè)置開啟繪制優(yōu)化的閾值。(30)series-bar.progressive=5000number類型,用于設(shè)置漸進(jìn)式渲染時(shí)每一幀繪制圖形的數(shù)量,設(shè)為0時(shí)不啟用漸進(jìn)式渲染,支持每個(gè)系列單獨(dú)配置。在圖中有數(shù)千到幾千萬(wàn)圖形元素的時(shí)候,一下子把圖形繪制出來(lái),或者交互重繪的時(shí)候可能會(huì)造成界面的卡頓甚至假死。ECharts4開始全流程支持漸進(jìn)渲染(progressiverendering),渲染的時(shí)候會(huì)把創(chuàng)建好的圖形分到數(shù)幀中渲染,每一幀渲染只渲染指定數(shù)量的圖形。該配置項(xiàng)就是用于配置該系列每一幀渲染的圖形數(shù),可以根據(jù)圖表圖形復(fù)雜度的需要適當(dāng)調(diào)整這個(gè)數(shù)字使得在不影響交互流暢性的前提下達(dá)到繪制速度的最大化。例如在lines圖或者平行坐標(biāo)中線寬大于1的polyline繪制會(huì)很慢,這個(gè)數(shù)字就可以設(shè)置小一點(diǎn),而線寬小于等于1的polyline繪制非??欤撆渲庙?xiàng)就可以相對(duì)調(diào)得比較大。(31)series-bar.progressiveThreshold=3000number類型,用于設(shè)置啟用漸進(jìn)式渲染的圖形數(shù)量閾值,在單個(gè)系列的圖形數(shù)量超過(guò)該閾值時(shí)啟用漸進(jìn)式渲染。(32)series-bar.progressiveChunkMode=modstring類型,用于設(shè)置分片的方式。其取值可選項(xiàng)為:①'sequential':按照數(shù)據(jù)的順序分片,其缺點(diǎn)是渲染過(guò)程不自然。②'mod':取模分片,即每個(gè)片段中的點(diǎn)會(huì)遍布于整個(gè)數(shù)據(jù),從而能夠視覺(jué)上均勻得渲染。(33)series-bar.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'表示離散型,一般文本使用這種類型。//如果類型沒(méi)有被定義,會(huì)自動(dòng)猜測(cè)類型。{name:'good',type:'number'},'bad'//等同于{name:'bad'}]}dimensions數(shù)組中的每一項(xiàng)其取值可選項(xiàng)為:①string,如'someName',等同于{name:'someName'}②Object,屬性可以有:◎name:string?!騮ype:string,支持以下類型:☆number,默認(rèn),表示普通數(shù)據(jù)。☆ordinal,對(duì)于類目、文本這些string類型的數(shù)據(jù),如果需要能在數(shù)軸上使用,須是'ordinal'類型。ECharts默認(rèn)會(huì)自動(dòng)判斷這個(gè)類型。但是自動(dòng)判斷也是不可能很完備的,所以使用者也可以手動(dòng)強(qiáng)制指定?!頵loat,即Float64Array。☆int,即Int32Array?!顃ime,表示時(shí)間類型。設(shè)置成'time'則能支持自動(dòng)解析數(shù)據(jù)成時(shí)間戳(timestamp),例如該維度的數(shù)據(jù)是'2025-05-10',會(huì)自動(dòng)被解析。時(shí)間類型的支持參見(jiàn)data。③displayName:一般用于tooltip中維度名的展示。string如果沒(méi)有指定,默認(rèn)使用name來(lái)展示。值得一提的是,當(dāng)定義了dimensions后,默認(rèn)tooltip中每個(gè)維度的顯示,會(huì)變?yōu)椤贺Q排』,從而方便顯示每個(gè)維度的名稱。如果沒(méi)有定義dimensions,則默認(rèn)tooltip會(huì)橫排顯示,且只顯示數(shù)值沒(méi)有維度名稱可顯示。(34)series-bar.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ù)組)。通常情況下,下面各種信息不需要所有的都寫,按需寫即可。下面是encode支持的屬性設(shè)置://在任何坐標(biāo)系和系列中,都支持:encode:{//使用“名為product的維度”和“名為score的維度”的值在tooltip中顯示tooltip:['product','score']//使用第1個(gè)維度和第3個(gè)維度的維度名連起來(lái)作為系列名。//(有時(shí)候名字比較長(zhǎng),這可以避免在重復(fù)輸入這些名字)seriesName:[1,3],//表示使用第2個(gè)維度中的值作為id。//這在使用setOption動(dòng)態(tài)更新數(shù)據(jù)時(shí)有用處,//可以使新老數(shù)據(jù)用id對(duì)應(yīng)起來(lái),從而能夠產(chǎn)生合適的數(shù)據(jù)更新動(dòng)畫。itemId:2,//指定數(shù)據(jù)項(xiàng)的名稱使用第3個(gè)維度在餅圖等圖表中有用,//可以使這個(gè)名字顯示在圖例(legend)中。itemName:3,//指定數(shù)據(jù)項(xiàng)的組ID(groupId)。當(dāng)全局過(guò)渡動(dòng)畫功能開啟時(shí),//setOption前后擁有相同groupId的數(shù)據(jù)項(xiàng)會(huì)進(jìn)行動(dòng)畫過(guò)渡。itemGroupId:4,//指定數(shù)據(jù)項(xiàng)對(duì)應(yīng)的子數(shù)據(jù)組ID(childGroupId),用于實(shí)現(xiàn)多層下鉆和聚合。//從v5.5.0開始支持itemChildGroupId:5}//直角坐標(biāo)系(grid/cartesian)特有的屬性:encode:{//把“維度1”、“維度5”、“名為score的維度”映射到X軸:x:[1,5,'score'],//把“維度0”映射到Y(jié)軸。y:0}//單軸(singleAxis)特有的屬性:encode:{single:3}//極坐標(biāo)系(polar)特有的屬性:encode:{radius:3,angle:2}//地理坐標(biāo)系(geo)特有的屬性:encode:{lng:3,lat:2}//對(duì)于一些沒(méi)有坐標(biāo)系的圖表,例如餅圖、漏斗圖等,其取值可選項(xiàng)為:encode:{value:3}特殊地,在自定義系列(customseries)中,encode中軸可以不指定或設(shè)置為null/undefined,從而使系列免于受這個(gè)軸控制,也就是說(shuō),軸的范圍(extent)不會(huì)受此系列數(shù)值的影響,軸被dataZoom控制時(shí)也不會(huì)過(guò)濾掉這個(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:[…]}};(35)series-bar.seriesLayoutBy='column'string類型,用于設(shè)置當(dāng)使用dataset時(shí),seriesLayoutBy指定了dataset中用行還是列對(duì)應(yīng)到系列上,也就是說(shuō),系列“排布”到dataset的行還是列上。其取值可選項(xiàng)為:①'column':默認(rèn)值,dataset的列對(duì)應(yīng)于系列,從而dataset中每一列是一個(gè)維度(dimension)。②'row':dataset的行對(duì)應(yīng)于系列,從而dataset中每一行是一個(gè)維度(dimension)。(36)series-bar.datasetIndexnumber類型,用于設(shè)置如果series.data沒(méi)有指定,并且dataset存在,那么就會(huì)使用dataset。datasetIndex指定本系列使用哪個(gè)dataset。(37)series-bar.dataGroupIdstring類型,用于設(shè)置該系列所有數(shù)據(jù)項(xiàng)的組ID,優(yōu)先級(jí)低于groupId。(38)series-bar.dataArray類型,用于設(shè)置系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。注意,如果系列沒(méi)有指定data,并且option有dataset,那么默認(rèn)使用第1個(gè)dataset。如果指定了data,則不會(huì)再使用dataset??梢允褂胹eries.datasetIndex指定其他的dataset。通常來(lái)說(shuō),數(shù)據(jù)用一個(gè)二維數(shù)組表示。如下,每一列被稱為一個(gè)『維度』。series:[{data:[//維度X維度Y其他維度…[3.4,4.5,15,43],[4.2,2.3,20,91],[10.8,9.5,30,18],[7.2,8.8,18,57]]}]☆在直角坐標(biāo)系(grid)中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于xAxis和yAxis。☆在極坐標(biāo)系(polar)中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于radiusAxis和angleAxis。后面的其他維度是可選的,可以在別處被使用,例如:◎在visualMap中可以將一個(gè)或多個(gè)維度映射到顏色,大小等多個(gè)圖形屬性上。◎在series.symbolSize中可以使用回調(diào)函數(shù),基于某個(gè)維度得到symbolSize值?!蚴褂胻ooltip.formatter或series.label.formatter可以把其他維度的值展示出來(lái)。特別地,當(dāng)只有一個(gè)軸為類目軸(axis.type為'category')的時(shí)候,數(shù)據(jù)可以簡(jiǎn)化用一個(gè)一維數(shù)組表示。例如:xAxis:{data:['a','b','m','n']},series:[{//與xAxis.data一一對(duì)應(yīng)。data:[23,44,55,19]//它其實(shí)是下面這種形式的簡(jiǎn)化://data:[[0,23],[1,44],[2,55],[3,19]]}]◆『值』與軸類型的關(guān)系:☆當(dāng)某維度對(duì)應(yīng)于數(shù)值軸(axis.type為'value'或者'log')的時(shí)候:其值可以為number(例如12)。(也可以兼容string形式的number,例如'12')☆當(dāng)某維度對(duì)應(yīng)于類目軸(axis.type為'category')的時(shí)候:其值須為類目的『序數(shù)』(從0開始)或者類目的『字符串值』。例如:xAxis:{type:'category',data:['星期一','星期二','星期三','星期四']},yAxis:{type:'category',data:['a','b','m','n','p','q']},series:[{data:[//xAxisyAxis[0,0,2],//意思是此點(diǎn)位于xAxis:'星期一',yAxis:'a'。['星期四',2,1],//意思是此點(diǎn)位于xAxis:'星期四',yAxis:'m'。[2,'p',2],//意思是此點(diǎn)位于xAxis:'星期三',yAxis:'p'。[3,3,5]]}]☆當(dāng)某維度對(duì)應(yīng)于時(shí)間軸(type為'time')的時(shí)候,值可以為:◎一個(gè)時(shí)間戳,如1484141700832,表示UTC時(shí)間。◎或者字符串形式的時(shí)間描述:

ISO8601的子集,只包含這些形式(這幾種格式,除非指明時(shí)區(qū),否則均表示本地時(shí)間,與moment一致):△部分年月日時(shí)間:'2024-03','2024-03-01','2024-03-0105','2024-03-0105:06'.△使用'T'或空格分割:'2024-03-01T12:22:33.123','2024-03-0112:22:33.123'.△時(shí)區(qū)設(shè)定:'2024-03-01T12:22:33Z','2024-03-01T12:22:33+8000','2024-03-01T12:22:33-05:00'.

其他的時(shí)間字符串,包括(均表示本地時(shí)間):'2024','2024-3-1','2024/3/1','2024/03/01','2023/6/122:00','2023/6/122:05:08','2023/6/122:05:08.123'☆或者用戶自行初始化的Date實(shí)例:◎注意,用戶自行初始化Date實(shí)例的時(shí)候,瀏覽器的行為有差異,不同字符串的表示也不同?!蚶纾涸赾hrome中,newDate('2024-01-01')表示UTC時(shí)間的2024年1月1日,而newDate('2024-1-1')和newDate('2024/01/01')表示本地時(shí)間的2024年1月1日。在safari中,不支持newDate('2024-1-1')這種表示方法?!蛩?,使用newDate(dataString)時(shí),可使用第三方庫(kù)解析(如moment),或者使用ECharts.time.parse。◆當(dāng)需要對(duì)個(gè)別數(shù)據(jù)進(jìn)行個(gè)性化定義時(shí):數(shù)組項(xiàng)可用對(duì)象,其中的value像表示具體的數(shù)值,如:[12,34,{value:56,//自定義標(biāo)簽樣式,僅對(duì)該數(shù)據(jù)項(xiàng)有效label:{},//自定義特殊itemStyle,僅對(duì)該數(shù)據(jù)項(xiàng)有效itemStyle:{}},10]//或[[12,33],[34,313],{value:[56,44],label:{},itemStyle:{}},[10,33]]◆空值:當(dāng)某數(shù)據(jù)不存在時(shí)(ps:不存在不代表值為0),可以用'-'或者null或者undefined或者NaN表示。例如,無(wú)數(shù)據(jù)在折線圖中可表現(xiàn)為該點(diǎn)是斷開的,在其它圖中可表示為圖形不存在。(39)series-bar.clip=trueboolean類型,從v4.4.0開始支持,用于設(shè)置是否裁剪超出坐標(biāo)系部分的圖形,具體裁剪效果根據(jù)系列決定:①散點(diǎn)圖/帶有漣漪特效動(dòng)畫的散點(diǎn)(氣泡)圖:忽略中心點(diǎn)超出坐標(biāo)系的圖形,但是不裁剪單個(gè)圖形。②柱狀圖:裁掉完全超出的柱子,但是不會(huì)裁剪只超出部分的柱子。③折線圖:裁掉所有超出坐標(biāo)系的折線部分,拐點(diǎn)圖形的邏輯按照散點(diǎn)圖處理。④路徑圖:裁掉所有超出坐標(biāo)系的部分。⑤K線圖:忽略整體都超出坐標(biāo)系的圖形,但是不裁剪單個(gè)圖形。⑥象形柱圖:裁掉所有超出坐標(biāo)系的部分(從v5.5.0開始支持)。⑦自定義系列:裁掉所有超出坐標(biāo)系的部分。除了象形柱圖和自定義系列,其它系列的默認(rèn)值都為true,及開啟裁剪,如果你覺(jué)得不想要裁剪的話,可以設(shè)置成false關(guān)閉。(40)series-bar.markPointObject類型,用于設(shè)置圖表標(biāo)注。(41)series-bar.markLineObject類型,用于設(shè)置圖表標(biāo)線。(42)series-bar.markAreaObject類型,用于設(shè)置圖表標(biāo)域,常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù),例如標(biāo)出某段時(shí)間投放了廣告。(43)series-bar.zlevelnumber類型,用于設(shè)置柱狀圖所有圖形的zlevel值。zlevel用于Canvas分層,不同zlevel值的圖形會(huì)放置在不同的Canvas中,Canvas分層是一種常見(jiàn)的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動(dòng)畫)的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過(guò)多的Canvas會(huì)引起內(nèi)存開銷的增大,在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。zlevel大的Canvas會(huì)放在zlevel小的Canvas的上面。(44)series-bar.z=2number類型,用于設(shè)置柱狀圖組件的所有圖形的z值??刂茍D形的前后順序,z值小的圖形會(huì)被z值大的圖形覆蓋。z相比zlevel優(yōu)先級(jí)更低,而且不會(huì)創(chuàng)建新的Canvas。(45)series-bar.silentboolean類型,用于設(shè)置圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件,默認(rèn)為false,即響應(yīng)和觸發(fā)鼠標(biāo)事件。(46)series-bar.animation=trueboolean類型,用于設(shè)置是否開啟動(dòng)畫。(47)series-bar.animationThreshold=2000number類型,用于設(shè)置是否開啟動(dòng)畫的閾值,當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫。(48)series-bar.animationDuration=1000number或Function類型,用于設(shè)置初始動(dòng)畫的時(shí)長(zhǎng),支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的時(shí)長(zhǎng)實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果,示例代碼如下:animationDuration:function(idx){//越往后的數(shù)據(jù)時(shí)長(zhǎng)越大returnidx*100;}(49)series-bar.animationEasing='cubicOut'string類型,用于設(shè)置初始動(dòng)畫的緩動(dòng)效果。(50)series-bar.animationDelaynumber或Function類型,用于設(shè)置初始動(dòng)畫的延遲,支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的delay時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。示例代碼如下:animationDelay:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}(51)series-bar.animationDurationUpdate=300number或Function類型,用于設(shè)置數(shù)據(jù)更新動(dòng)畫的時(shí)長(zhǎng)。支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的時(shí)長(zhǎng)實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果,示例代碼如下:animationDurationUpdate:function(idx){//越往后的數(shù)據(jù)時(shí)長(zhǎng)越大returnidx*100;}(52)series-bar.animationEasingUpdate='cubicInOut'string類型,用于設(shè)置數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果。(53)series-bar.animationDelayUpdatenumber或Function類型,用于設(shè)置數(shù)據(jù)更新動(dòng)畫的延遲,支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的delay時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。示例代碼如下:animationDelayUpdate:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}(54)series-bar.universalTransitionobject類型,從v5.2.0開始支持。用于全局過(guò)渡動(dòng)畫相關(guān)的配置。全局過(guò)渡動(dòng)畫(UniversalTransition)提供了任意系列之間進(jìn)行變形動(dòng)畫的功能。開啟該功能后,每次setOption,相同id的系列之間會(huì)自動(dòng)關(guān)聯(lián)進(jìn)行動(dòng)畫的過(guò)渡。通過(guò)配置數(shù)據(jù)項(xiàng)的groupId和childGroupId,還可以實(shí)現(xiàn)諸如下鉆、聚合等一對(duì)多或者多對(duì)一的動(dòng)畫。可以直接在系列中配置universalTransition:true開啟該功能。也可以提供一個(gè)對(duì)象進(jìn)行更多屬性的配置?!魋eries-bar.universalTransition.enabledboolean類型,用于設(shè)置是否開啟全局過(guò)渡動(dòng)畫?!魋eries-bar.universalTransition.seriesKeystring或Array類型,用于設(shè)置seriesKey決定了如何關(guān)聯(lián)需要?jiǎng)赢嫷南盗?,未配置時(shí)會(huì)默認(rèn)取系列的id。通常該配置為一個(gè)字符串,配置為相同seriesKey的系列之間會(huì)進(jìn)行動(dòng)畫的過(guò)渡。也可以像下面配置為一個(gè)數(shù)組:seriesKey:['male','female']配置為數(shù)組意味著在動(dòng)畫的時(shí)候所有數(shù)組項(xiàng)指定的系列會(huì)合并為當(dāng)前系列。例如該配置是指id或者seriesKey為'male'和'female'的系列會(huì)合并成當(dāng)前系列?!魋eries-bar.universalTransition.divideShapestring類型,用于設(shè)置divideShape決定在一對(duì)多或者多對(duì)一的動(dòng)畫中,當(dāng)前系列的圖形如何分裂成多個(gè)圖形。目前支持以下選項(xiàng):

'split'通過(guò)一定的算法將分割圖形成為多個(gè)。

'clone'從當(dāng)前圖形克隆得到多個(gè)。為了較好的效果,不同的系列會(huì)默認(rèn)有不同的配置,例如散點(diǎn)圖這種圖形比較小且復(fù)雜的默認(rèn)采用了'clone',而柱狀圖這種更加規(guī)則的則默認(rèn)是'split'。你可以根據(jù)你自己的場(chǎng)景需求設(shè)置為需要的分裂策略?!魋eries-bar.universalTransition.delayFuncti

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論