Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）時(shí)間軸組件的主要屬性及其設(shè)置Web數(shù)據(jù)可視化教程（基于ECharts）（1）timeline.show=trueboolean類型，用于設(shè)置是否顯示timeline組件。如果設(shè)置為false，不會(huì)顯示，但是功能還存在。（2）timeline.type='slider'string類型，用于設(shè)置這個(gè)屬性目前只支持為slider，不需要更改。（3）timeline.axisType='time'string類型，用于設(shè)置軸的類型。其取值可選項(xiàng)為：①'value'數(shù)值軸，適用于連續(xù)數(shù)據(jù)。②'category'類目軸，適用于離散的類目數(shù)據(jù)。③'time'時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來決定使用月，星期，日還是小時(shí)范圍的刻度。（4）timeline.currentIndexnumber類型，用于設(shè)置表示當(dāng)前選中項(xiàng)是哪項(xiàng)。例如，currentIndex為0時(shí)，表示當(dāng)前選中項(xiàng)為timeline.data[0]（即使用options[0]）。（5）timeline.autoPlayboolean類型，用于設(shè)置表示是否自動(dòng)播放。（6）timeline.rewindboolean類型，用于設(shè)置表示是否反向播放。（7）timeline.loop=trueboolean類型，用于設(shè)置表示是否循環(huán)播放。（8）timeline.playInterval=2000number類型，用于設(shè)置表示播放的速度（跳動(dòng)的間隔），單位毫秒（ms）。（9）timeline.realtime=trueboolean類型，用于設(shè)置拖動(dòng)圓點(diǎn)的時(shí)候，是否實(shí)時(shí)更新視圖。（10）timeline.replaceMerge=undefinedArray或string類型，用于設(shè)置初始化的時(shí)候，對(duì)應(yīng)于當(dāng)前時(shí)間的那個(gè)switchableOption會(huì)被合并（merge）到baseOption，形成finalOption。而每當(dāng)時(shí)間變化時(shí)，對(duì)應(yīng)于新時(shí)間的switchableOption會(huì)被合并（merge）到finalOption。有兩種合并（merge）策略：◆默認(rèn)使用NORMAL_MERGE?！羧绻鹴imeline.replaceMerge被指定了，則使用REPLACE_MERGE。replaceMerge的值可以是一個(gè)組件的mainType，例如replaceMerge:'xAxis'。也可以是mainType數(shù)組，例如replaceMerge:['xAxis','series']。常見需要使用replaceMerge的地方是，如果需要下一個(gè)時(shí)間刻度的series完全替換上一個(gè)時(shí)間刻度的series而不進(jìn)行任何merge，可以設(shè)置replaceMerge:'series'，并且兩個(gè)時(shí)間刻度的seriesid不相同或者沒有id。（11）timeline.controlPosition='left'string類型，用于設(shè)置表示『播放』按鈕的位置?？蛇x值：'left'、'right'。（12）timeline.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的上面。（13）timeline.z=2number類型，用于設(shè)置組件的所有圖形的z值?？刂茍D形的前后順序，z值小的圖形會(huì)被z值大的圖形覆蓋。z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的Canvas。（14）timeline.left='auto'string或number類型，用于設(shè)置timeline組件離容器左側(cè)的距離。left的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對(duì)于容器高寬的百分比，也可以是'left','center','right'。如果left的值為'left','center','right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。（15）timeline.top='auto'string或number類型，用于設(shè)置timeline組件離容器上側(cè)的距離。top的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對(duì)于容器高寬的百分比，也可以是'top','middle','bottom'。如果top的值為'top','middle','bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。（16）timeline.right='auto'string或number類型，用于設(shè)置timeline組件離容器右側(cè)的距離。right的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對(duì)于容器高寬的百分比。默認(rèn)自適應(yīng)。（17）timeline.bottom='auto'string或number類型，用于設(shè)置timeline組件離容器下側(cè)的距離。bottom的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對(duì)于容器高寬的百分比。默認(rèn)自適應(yīng)。（18）timeline.padding=5number或Array類型，用于設(shè)置timeline內(nèi)邊距，單位為px，默認(rèn)各方向內(nèi)邊距為5px，接受數(shù)組分別設(shè)定上右下左邊距。示例代碼如下：//設(shè)置內(nèi)邊距為5padding:5//設(shè)置上下的內(nèi)邊距為5，左右的內(nèi)邊距為10padding:[5,10]//分別設(shè)置四個(gè)方向的內(nèi)邊距padding:[5,//上10,//右5,//下10,//左]（19）timeline.orient='horizontal'string類型，用于設(shè)置擺放方式，其取值可選項(xiàng)為：①'vertical'：豎直放置。②'horizontal'：水平放置。（20）timeline.inverseboolean類型，用于設(shè)置是否反向放置timeline，反向則首位顛倒過來。（21）timeline.symbol='emptyCircle'string類型，用于設(shè)置timeline標(biāo)記的圖形。ECharts提供的標(biāo)記類型包括'circle'、'rect','roundRect'、'triangle'、'diamond'、'pin'、'arrow'、'none'?？梢酝ㄟ^'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8zM27.8,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'（22）timeline.symbolSize=10number或Array類型，用于設(shè)置timeline標(biāo)記的大小，可以設(shè)置成諸如10這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如[20,10]表示標(biāo)記寬為20，高為10。（23）timeline.symbolRotatenumber類型，用于設(shè)置timeline標(biāo)記的旋轉(zhuǎn)角度（而非弧度）。正值表示逆時(shí)針旋轉(zhuǎn)。注意在markLine中當(dāng)symbol為'arrow'時(shí)會(huì)忽略symbolRotate強(qiáng)制設(shè)置為切線的角度。（24）timeline.symbolKeepAspectboolean類型，用于設(shè)置如果symbol是path://的形式，是否在縮放時(shí)保持該圖形的長寬比。（25）timeline.symbolOffset=[0,0]Array類型，用于設(shè)置timeline標(biāo)記相對(duì)于原本位置的偏移。默認(rèn)情況下，標(biāo)記會(huì)居中置放在數(shù)據(jù)對(duì)應(yīng)的位置，但是如果symbol是自定義的矢量路徑或者圖片，就有可能不希望symbol居中。這時(shí)候可以使用該配置項(xiàng)配置symbol相對(duì)于原本居中的偏移，可以是絕對(duì)的像素值，也可以是相對(duì)的百分比。例如[0,'-50%']就是把自己向上移動(dòng)了一半的位置，在symbol圖形是氣泡的時(shí)候可以讓圖形下端的箭頭對(duì)準(zhǔn)數(shù)據(jù)點(diǎn)。（26）timeline.lineStyleObject類型?！魌imeline.lineStyle.show=trueboolean類型，用于設(shè)置是否顯示軸線?？梢栽O(shè)置為false不顯示軸線，則可以做出不同的樣式效果。◆timeline.lineStyle.color='#DAE1F5'Color類型，用于設(shè)置timeline線的顏色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式設(shè)置為純色，也支持設(shè)置為漸變色和紋理填充?！魌imeline.lineStyle.width=2number類型，用于設(shè)置timeline線寬?！魌imeline.lineStyle.type='solid'string或number或Array類型，用于設(shè)置線的類型。其取值可選項(xiàng)為：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number或者number數(shù)組，用以指定線條的dasharray，配合dashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如：{type:[5,10],dashOffset:5}◆timeline.lineStyle.dashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配type指定dasharray實(shí)現(xiàn)靈活的虛線效果?！魌imeline.lineStyle.cap='butt'string類型，從v5.0.0開始支持，用于指定線段末端的繪制方式，其取值可選項(xiàng)為：①'butt'：線段末端以方形結(jié)束。②'round'：線段末端以圓形結(jié)束。③'square'：線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。默認(rèn)值為'butt'。◆timeline.lineStyle.join='bevel'string類型，從v5.0.0開始支持。用于設(shè)置2個(gè)長度不為0的相連部分（線段，圓弧，曲線）如何連接在一起的屬性（長度為0的變形部分，其指定的末端和控制點(diǎn)在同一位置，會(huì)被忽略）。其取值可選項(xiàng)為：①'bevel'：在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域，每個(gè)部分都有各自獨(dú)立的矩形拐角。②'round'：通過填充一個(gè)額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。③'miter'：通過延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過miterLimit屬性看到效果。默認(rèn)值為'bevel'?！魌imeline.lineStyle.miterLimit=10number類型，從v5.0.0開始支持，用于設(shè)置斜接面限制比例。只有當(dāng)join為miter時(shí)，miterLimit才有效。默認(rèn)值為10。負(fù)數(shù)、0、Infinity和NaN均會(huì)被忽略?！魌imeline.lineStyle.shadowBlurnumber類型，用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆timeline.lineStyle.shadowColorColor類型，用于設(shè)置陰影顏色，支持的格式同color?！魌imeline.lineStyle.shadowOffsetXnumber類型，用于設(shè)置陰影水平方向上的偏移距離?！魌imeline.lineStyle.shadowOffsetYnumber類型，用于設(shè)置陰影垂直方向上的偏移距離?！魌imeline.lineStyle.opacity=1number類型，用于設(shè)置圖形透明度。支持從0到1的數(shù)字，為0時(shí)不繪制該圖形。◆timeline.labelObject類型，用于設(shè)置軸的文本標(biāo)簽。emphasis是文本高亮的樣式，例如鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮的時(shí)候會(huì)使用emphasis作為文本的樣式?！魌imeline.label.position='auto'string或number類型，可選的配置方式：①'auto'：完全自動(dòng)決定。②'left'：貼左邊界放置。當(dāng)timline.orient為'vertical'時(shí)有效。③'right'：當(dāng)timline.orient為'vertical'時(shí)有效。貼右邊界放置。④'top'：貼上邊界放置。當(dāng)timline.orient為'horizontal'時(shí)有效。⑤'bottom'：貼下邊界放置。當(dāng)timline.orient為'horizontal'時(shí)有效。⑥number：指定某個(gè)數(shù)值時(shí)，表示label和軸的距離。為0時(shí)則和坐標(biāo)軸重合，可以為正負(fù)值，決定label在坐標(biāo)軸的哪一邊。◆timeline.label.show=trueboolean類型，用于設(shè)置是否顯示label?！魌imeline.label.interval='auto'string或number類型，用于設(shè)置label的間隔。當(dāng)指定為數(shù)值時(shí)，例如指定為2，則每隔兩個(gè)顯示一個(gè)label?！魌imeline.label.rotateprefixlabel的旋轉(zhuǎn)角度。正值表示逆時(shí)針旋轉(zhuǎn)?！魌imeline.label.formatterstring或Function類型，用于設(shè)置刻度標(biāo)簽的內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。示例代碼如下：//使用字符串模板，模板變量為刻度默認(rèn)標(biāo)簽{value}formatter:'{value}kg'//使用函數(shù)模板，函數(shù)參數(shù)分別為刻度數(shù)值（類目），刻度的索引formatter:function(value,index){returnvalue+'kg';}對(duì)于時(shí)間軸（type:'time'），formatter的字符串模板支持多種形式：①字符串模板：簡單快速實(shí)現(xiàn)常用日期時(shí)間模板，string類型②回調(diào)函數(shù)：自定義formatter，可以用來實(shí)現(xiàn)復(fù)雜高級(jí)的格式，F(xiàn)unction類型③分級(jí)模板：為不同時(shí)間粒度的標(biāo)簽使用不同的formatter，object類型◆timeline.label.color='#A4B1D7'Color類型，用于設(shè)置timeline.lable文字的顏色?！魌imeline.label.fontStyle='normal'string類型，用于設(shè)置timeline.lable文字字體的風(fēng)格。其取值可選項(xiàng)為：'normal'、'italic'、'oblique'?！魌imeline.label.fontWeight='normal'string或number類型，用于設(shè)置timeline.lable文字字體的粗細(xì)。其取值可選項(xiàng)為：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆timeline.label.fontFamily='sans-serif'string類型，用于設(shè)置timeline.lable文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆timeline.label.fontSize=12number類型，用于設(shè)置timeline.lable文字的字體大小?！魌imeline.label.alignstring類型，用于設(shè)置文字水平對(duì)齊方式，默認(rèn)自動(dòng)。其取值可選項(xiàng)為：'left'、'center'、'right'。rich中如果沒有設(shè)置align，則會(huì)取父層級(jí)的align。示例代碼如下：{align:right,rich:{a:{//沒有設(shè)置`align`，則`align`為right}}}◆timeline.label.verticalAlignstring類型，用于設(shè)置文字垂直對(duì)齊方式，默認(rèn)自動(dòng)。其取值可選項(xiàng)為：'top'、'middle'、'bottom'。rich中如果沒有設(shè)置verticalAlign，則會(huì)取父層級(jí)的verticalAlign。示例代碼如下：{verticalAlign:bottom,rich:{a:{//沒有設(shè)置`verticalAlign`，則`verticalAlign`為bottom}}}◆timeline.label.lineHeightnumber類型，用于設(shè)置行高。rich中如果沒有設(shè)置lineHeight，則會(huì)取父層級(jí)的lineHeight。示例代碼如下：{lineHeight:56,rich:{a:{//沒有設(shè)置`lineHeight`，則`lineHeight`為56}}}◆timeline.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)?！魌imeline.label.borderColorColor類型，用于設(shè)置文字塊邊框顏色?！魌imeline.label.borderWidthnumber類型，用于設(shè)置文字塊邊框?qū)挾??！魌imeline.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}◆timeline.label.borderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?！魌imeline.label.borderRadiusnumber或Array類型，用于設(shè)置文字塊的圓角。◆timeline.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。◆timeline.label.shadowColor='transparent'Color類型，用于設(shè)置文字塊的背景陰影顏色?！魌imeline.label.shadowBlurnumber類型，用于設(shè)置文字塊的背景陰影長度。◆timeline.label.shadowOffsetXnumber類型，用于設(shè)置文字塊的背景陰影X偏移?！魌imeline.label.shadowOffsetYnumber類型，用于設(shè)置文字塊的背景陰影Y偏移?！魌imeline.label.widthnumber類型，用于設(shè)置文本顯示寬度?！魌imeline.label.heightnumber類型，用于設(shè)置文本顯示高度?！魌imeline.label.textBorderColorColor類型，用于設(shè)置文字本身的描邊顏色?！魌imeline.label.textBorderWidthnumber類型，用于設(shè)置文字本身的描邊寬度。◆timeline.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}◆timeline.label.textBorderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配textBorderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?！魌imeline.label.textShadowColor='transparent'Color類型，用于設(shè)置文字本身的陰影顏色。timeline.label.textShadowBlurnumber類型，用于設(shè)置文字本身的陰影長度?！魌imeline.label.textShadowOffsetXnumber類型，用于設(shè)置文字本身的陰影X偏移。◆timeline.label.textShadowOffsetYnumber類型，用于設(shè)置文字本身的陰影Y偏移?！魌imeline.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)換行?！魌imeline.label.ellipsis='…'string類型，用于設(shè)置在overflow配置為'truncate'的時(shí)候，可以通過該屬性配置末尾顯示的文本?！魌imeline.label.richObject類型。在rich里面，可以自定義富文本樣式。利用富文本樣式，可以在標(biāo)簽中做出非常豐富的效果。（27）timeline.itemStyleObject類型，用于設(shè)置timeline圖形樣式?！魌imeline.itemStyle.color='#A4B1D7'Color類型，用于設(shè)置timeline圖形的顏色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式設(shè)置為純色，也支持設(shè)置為漸變色和紋理填充?！魌imeline.itemStyle.borderColor='#000'Color類型，用于設(shè)置timeline圖形的描邊顏色。支持的顏色格式同color，不支持回調(diào)函數(shù)?！魌imeline.itemStyle.borderWidth=1number類型，用于設(shè)置timeline描邊線寬。為0時(shí)無描邊?！魌imeline.itemStyle.borderType='solid'string或number或Array類型，用于設(shè)置timeline描邊類型。其取值可選項(xiàng)為：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number或者number數(shù)組，用以指定線條的dasharray，配合borderDashOffset可實(shí)現(xiàn)更靈活的虛線效果。例如：{borderType:[5,10],borderDashOffset:5}◆timeline.itemStyle.borderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?！魌imeline.itemStyle.borderCap='butt'string類型，從v5.0.0開始支持，用于指定線段末端的繪制方式，其取值可選項(xiàng)為：①'butt'：線段末端以方形結(jié)束。②'round'：線段末端以圓形結(jié)束。③'square'：線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。默認(rèn)值為'butt'?！魌imeline.itemStyle.borderJoin='bevel'string類型，從v5.0.0開始支持，用于設(shè)置2個(gè)長度不為0的相連部分（線段，圓弧，曲線）如何連接在一起的屬性（長度為0的變形部分，其指定的末端和控制點(diǎn)在同一位置，會(huì)被忽略）。其取值可選項(xiàng)為：'bevel'：在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域，每個(gè)部分都有各自獨(dú)立的矩形拐角。'round'：通過填充一個(gè)額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。'miter'：通過延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過borderMiterLimit屬性看到效果。默認(rèn)值為'bevel'。◆timeline.itemStyle.borderMiterLimit=10number類型，從v5.0.0開始支持，用于設(shè)置斜接面限制比例。只有當(dāng)borderJoin為miter時(shí)，borderMiterLimit才有效。默認(rèn)值為10。負(fù)數(shù)、0、Infinity和NaN均會(huì)被忽略?！魌imeline.itemStyle.shadowBlurnumber類型，用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆timeline.itemStyle.shadowColorColor類型，用于設(shè)置陰影顏色。支持的格式同color?！魌imeline.itemStyle.shadowOffsetXnumber類型，用于設(shè)置陰影水平方向上的偏移距離。◆timeline.itemStyle.shadowOffsetYnumber類型，用于設(shè)置陰影垂直方向上的偏移距離。◆timeline.itemStyle.opacity=1number類型，用于設(shè)置圖形透明度。支持從0到1的數(shù)字，為0時(shí)不繪制該圖形?！魌imeline.checkpointStyleObject『當(dāng)前項(xiàng)』（checkpoint）的圖形樣式?！魌imeline.checkpointStyle.symbol='circle'string類型，用于設(shè)置timeline.checkpointStyle標(biāo)記的圖形。ECharts提供的標(biāo)記類型包括'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'、'none'。可以通過'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8zM27.8,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'◆timeline.checkpointStyle.symbolSize=13number或Array類型，用于設(shè)置timeline.checkpointStyle標(biāo)記的大小，可以設(shè)置成諸如10這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如[20,10]表示標(biāo)記寬為20，高為10?！魌imeline.checkpointStyle.symbolRotatenumber類型，用于設(shè)置timeline.checkpointStyle標(biāo)記的旋轉(zhuǎn)角度（而非弧度）。正值表示逆時(shí)針旋轉(zhuǎn)。注意在markLine中當(dāng)symbol為'arrow'時(shí)會(huì)忽略symbolRotate強(qiáng)制設(shè)置為切線的角度?！魌imeline.checkpointStyle.symbolKeepAspectboolean類型，用于設(shè)置如果symbol是path://的形式，是否在縮放時(shí)保持該圖形的長寬比。◆timeline.checkpointStyle.symbolOffset=[0,0]Array類型，用于設(shè)置timeline.checkpointStyle標(biāo)記相對(duì)于原本位置的偏移。默認(rèn)情況下，標(biāo)記會(huì)居中置放在數(shù)據(jù)對(duì)應(yīng)的位置，但是如果symbol是自定義的矢量路徑或者圖片，就有可能不希望symbol居中。這時(shí)候可以使用該配置項(xiàng)配置symbol相對(duì)于原本居中的偏移，可以是絕對(duì)的像素值，也可以是相對(duì)的百分比。例如[0,'-50%']就是把自己向上移動(dòng)了一半的位置，在symbol圖形是氣泡的時(shí)候可以讓圖形下端的箭頭對(duì)準(zhǔn)數(shù)據(jù)點(diǎn)?！魌imeline.checkpointStyle.color='#316bf3'Color類型，用于設(shè)置圖形的顏色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式設(shè)置為純色，也支持設(shè)置為漸變色和紋理填充?！魌imeline.checkpointStyle.borderColor='#fff'Color類型，用于設(shè)置圖形的描邊顏色。支持的顏色格式同color，不支持回調(diào)函數(shù)?！魌imeline.checkpointStyle.borderWidth=2number類型，用于設(shè)置描邊線寬，為0時(shí)無描邊?！魌imeline.checkpointStyle.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}◆timeline.checkpointStyle.borderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配borderType指定dasharray實(shí)現(xiàn)靈活的虛線效果?！魌imeline.checkpointStyle.borderCap='butt'string類型，從v5.0.0開始支持。用于指定線段末端的繪制方式，其取值可選項(xiàng)為：①'butt'：線段末端以方形結(jié)束。②'round'：線段末端以圓形結(jié)束。③'square'：線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。默認(rèn)值為'butt'?！魌imeline.checkpointStyle.borderJoin='bevel'string類型，從v5.0.0開始支持，用于設(shè)置2個(gè)長度不為0的相連部分（線段，圓弧，曲線）如何連接在一起的屬性（長度為0的變形部分，其指定的末端和控制點(diǎn)在同一位置，會(huì)被忽略）。其取值可選項(xiàng)為：①'bevel'：在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域，每個(gè)部分都有各自獨(dú)立的矩形拐角。②'round'：通過填充一個(gè)額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。③'miter'：通過延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個(gè)額外的菱形區(qū)域。這個(gè)設(shè)置可以通過borderMiterLimit屬性看到效果。默認(rèn)值為'bevel'?！魌imeline.checkpointStyle.borderMiterLimit=10number類型，從v5.0.0開始支持，用于設(shè)置斜接面限制比例。只有當(dāng)borderJoin為miter時(shí)，borderMiterLimit才有效。默認(rèn)值為10。負(fù)數(shù)、0、Infinity和NaN均會(huì)被忽略?！魌imeline.checkpointStyle.shadowBlur=2number類型，用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆timeline.checkpointStyle.shadowColor='rgba(0,0,0,0.3)'Color類型，用于設(shè)置陰影顏色。支持的格式同color?！魌imeline.checkpointStyle.shadowOffsetX=1number類型，用于設(shè)置陰影水平方向上的偏移距離。◆timeline.checkpointStyle.shadowOffsetY=1number類型，用于設(shè)置陰影垂直方向上的偏移距離?！魌imeline.checkpointStyle.opacity=1number類型，用于設(shè)置圖形透明度。支持從0到1的數(shù)字，為0時(shí)不繪制該圖形?！魌imeline.checkpointStyle.animation=trueboolean類型，用于設(shè)置timeline組件中『當(dāng)前項(xiàng)』（checkpoint）在timeline播放切換中的移動(dòng)，是否有動(dòng)畫。◆timeline.checkpointStyle.animationDuration=300number類型，用于設(shè)置timeline組件中『當(dāng)前項(xiàng)』（checkpoint）的動(dòng)畫時(shí)長?！魌imeline.checkpointStyle.animationEasing='quinticInOut'string類型，用于設(shè)置timeline組件中『當(dāng)前項(xiàng)』（checkpoint）的動(dòng)畫的緩動(dòng)效果?！魌imeline.controlStyleObject類型，用于設(shè)置『控制按鈕』的樣式。『控制按鈕』包括：『播放按鈕』、『前進(jìn)按鈕』、『后退按鈕』?！魌imeline.controlStyle.show=trueboolean類型，用于設(shè)置是否顯示『控制按鈕』。設(shè)置為false則全不顯示。◆timeline.controlStyle.showPlayBtn=trueboolean類型，用于設(shè)置是否顯示『播放按鈕』。◆timeline.controlStyle.showPrevBtn=trueboolean類型，用于設(shè)置是否顯示『后退按鈕』?！魌imeline.controlStyle.showNextBtn=trueboolean類型，用于設(shè)置是否顯示『前進(jìn)按鈕』?！魌imeline.controlStyle.itemSize=24number類型，用于設(shè)置『控制按鈕』的尺寸，單位為像素（px）?！魌imeline.controlStyle.itemGap=12number類型，用于設(shè)置『控制按鈕』的間隔，單位為像素（px）?！魌imeline.controlStyle.position='left'string類型，用于設(shè)置『控制按鈕』的位置。當(dāng)timeline.orient為'horizontal'時(shí)，'left'、'right'有效。當(dāng)timeline.orient為'vertical'時(shí)，'top'、'bottom'有效?！魌imeline.controlStyle.playIconstring類型，用于設(shè)置『播放按鈕』的『可播放狀態(tài)』的圖形?？梢酝ㄟ^'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見SVGPathData?？梢詮腁dobeIllustrator等工具編輯導(dǎo)出。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8zM27.8,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'◆timeline.controlStyle.stopIconstring類型，用于設(shè)置『播放按鈕』的『可停止?fàn)顟B(tài)』的圖形?？梢酝ㄟ^'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見SVGPathData。可以從AdobeIllustrator等工具編輯導(dǎo)出。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8zM27.8,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'◆timeline.controlStyle.prevIconstring類型，用于設(shè)置『后退按鈕』的圖形可以通過'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見SVGPathData?？梢詮腁dobeIllustrator等工具編輯導(dǎo)出。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8zM27.8,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'◆timeline.controlStyle.nextIconstring類型，用于設(shè)置『前進(jìn)按鈕』的圖形。可以通過'image://url'設(shè)置為圖片，其中URL為圖片的鏈接，或者dataURI。URL為圖片鏈接例如：'image://http://example.website/a/b.png'URL為dataURI例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'可以通過'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見SVGPathData。可以從AdobeIllustrator等工具編輯導(dǎo)出。例如：'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2zM30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5zM36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0