Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）散點圖和氣泡圖的主要屬性及其設(shè)置Web數(shù)據(jù)可視化教程（基于ECharts）（1）series-scatter.type='scatter'string類型（2）series-scatter.Idstring類型，用于設(shè)置組件ID，默認不指定。指定則可用于在option或者API中引用組件。（3）series-scatter.namestring類型，用于設(shè)置系列名稱，用于tooltip的顯示，legend的圖例篩選，在setOption更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列。（4）series-scatter.colorBy='series'string類型，從v5.2.0開始支持，用于從調(diào)色盤option.color中取色的策略，可取值為：①'series'：按照系列分配調(diào)色盤中的顏色，同一系列中的所有數(shù)據(jù)都是用相同的顏色；②'data'：按照數(shù)據(jù)項分配調(diào)色盤中的顏色，每個數(shù)據(jù)項都使用不同的顏色。（5）series-scatter.coordinateSystem='cartesian2d'string類型，用于設(shè)置該系列使用的坐標系，其取值可選項為：①'cartesian2d'：使用二維的直角坐標系（也稱笛卡爾坐標系），通過xAxisIndex,yAxisIndex指定相應(yīng)的坐標軸組件。②'polar'：使用極坐標系，通過polarIndex指定相應(yīng)的極坐標組件③'geo'：使用地理坐標系，通過geoIndex指定相應(yīng)的地理坐標系組件。④'calendar'：使用日歷坐標系，通過calendarIndex指定相應(yīng)的日歷坐標系組件。（6）series-scatter.xAxisIndexnumber類型，用于設(shè)置使用的x軸的index，在單個圖表實例中存在多個x軸的時候有用。（7）series-scatter.yAxisIndexnumber類型，用于設(shè)置使用的y軸的index，在單個圖表實例中存在多個y軸的時候有用。（8）series-scatter.polarIndexnumber類型，用于設(shè)置使用的極坐標系的index，在單個圖表實例中存在多個極坐標系的時候有用。（9）series-scatter.geoIndexnumber類型，用于設(shè)置使用的地理坐標系的index，在單個圖表實例中存在多個地理坐標系的時候有用。（10）series-scatter.calendarIndexnumber類型，用于設(shè)置使用的日歷坐標系的index，在單個圖表實例中存在多個日歷坐標系的時候有用。（11）series-scatter.legendHoverLink=trueboolean類型，用于設(shè)置是否啟用圖例hover時的聯(lián)動高亮。（12）series-scatter.symbol='circle'string或Function類型，用于設(shè)置標記的圖形。ECharts提供的標記類型包括'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://'將圖標設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因為縮放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會自適應(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'如果需要每個數(shù)據(jù)的圖形不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：(value:Array|number,params:Object)=>string其中第1個參數(shù)value為data中的數(shù)據(jù)值。第2個參數(shù)params是其它的數(shù)據(jù)項參數(shù)。（13）series-scatter.symbolSize=10number或Array或Function類型，用于設(shè)置標記的大小，可以設(shè)置成諸如10這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如[20,10]表示標記寬為20，高為10。如果需要每個數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：(value:Array|number,params:Object)=>number|Array其中第1個參數(shù)value為data中的數(shù)據(jù)值。第2個參數(shù)params是其它的數(shù)據(jù)項參數(shù)。（14）series-scatter.symbolRotatenumber或Function類型，用于設(shè)置標記的旋轉(zhuǎn)角度（而非弧度）。正值表示逆時針旋轉(zhuǎn)。注意在markLine中當(dāng)symbol為'arrow'時會忽略symbolRotate強制設(shè)置為切線的角度。如果需要每個數(shù)據(jù)的旋轉(zhuǎn)角度不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：(value:Array|number,params:Object)=>number其中第1個參數(shù)value為data中的數(shù)據(jù)值。第2個參數(shù)params是其它的數(shù)據(jù)項參數(shù)。從4.8.0開始支持回調(diào)函數(shù)。（15）series-scatter.symbolKeepAspectboolean類型，如果symbol是path://的形式，用于設(shè)置是否在縮放時保持該圖形的長寬比。（16）series-scatter.symbolOffset=[0,0]Array類型，用于設(shè)置標記相對于原本位置的偏移。默認情況下，標記會居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果symbol是自定義的矢量路徑或者圖片，就有可能不希望symbol居中。這時候可以使用該配置項配置symbol相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。例如[0,'-50%']就是把自己向上移動了一半的位置，在symbol圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據(jù)點。（17））series-scatter.largeboolean類型，用于設(shè)置是否開啟大數(shù)據(jù)量優(yōu)化，在數(shù)據(jù)圖形特別多而出現(xiàn)卡頓時候可以開啟。開啟后配合largeThreshold在數(shù)據(jù)量大于指定閾值的時候?qū)L制進行優(yōu)化。缺點：優(yōu)化后不能自定義設(shè)置單個數(shù)據(jù)項的樣式。（18）series-scatter.largeThreshold=2000number類型，用于設(shè)置開啟繪制優(yōu)化的閾值。（19）series-scatter.cursor='pointer'string類型，用于設(shè)置鼠標懸浮時在圖形元素上時鼠標的樣式，同CSS的cursor。（20）series-scatter.labelObject類型，用于設(shè)置圖形上的文本標簽，可用于說明圖形的一些數(shù)據(jù)信息、例如值、名稱等?！魋eries-scatter.label.showboolean類型，用于設(shè)置是否顯示標簽?！魋eries-scatter.label.position='inside'string或Array類型，用于設(shè)置標簽的位置。

可以通過內(nèi)置的語義聲明位置。示例：position:'top'支持：top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight。

也可以用一個數(shù)組表示相對的百分比或者絕對像素值表示標簽相對于圖形包圍盒左上角的位置。示例：//絕對的像素值position:[10,10],//相對的百分比position:['50%','50%']◆series-scatter.label.distance=5number類型，用于設(shè)置距離圖形元素的距離。當(dāng)position為字符描述值（如'top'、'insideRight'）時候有效?！魋eries-scatter.label.rotatenumber類型，用于設(shè)置標簽旋轉(zhuǎn)。從-90度到90度。正值是逆時針。◆series-scatter.label.offsetArray類型，用于設(shè)置是否對文字進行偏移。默認不偏移。例如：[30,40]表示文字在橫向上偏移30，縱向上偏移40?！魋eries-scatter.label.minMarginnumber類型，從v5.0.0開始支持，用于控制標簽之間的最小距離，當(dāng)啟用labelLayout時可能會用到?！魋eries-scatter.label.formatterstring或Function類型，用于設(shè)置標簽內(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開始計數(shù)。示例代碼：formatter:':{@score}'

回調(diào)函數(shù)回調(diào)函數(shù)格式：(params:Object|Array)=>string參數(shù)params是formatter需要的單個數(shù)據(jù)集。格式如下：{componentType:'series',//系列類型seriesType:string,//系列在傳入的option.series中的indexseriesIndex:number,//系列名稱seriesName:string,//數(shù)據(jù)名，類目名name:string,//數(shù)據(jù)在傳入的data數(shù)組中的indexdataIndex:number,//傳入的原始數(shù)據(jù)項data:Object,//傳入的數(shù)據(jù)值。在多數(shù)系列下它和data相同。//在一些系列下是data中的分量（如map、radar中）value:number|Array|Object,//坐標軸encode映射信息，//key為坐標軸（如'x''y''radius''angle'等）//value必然為數(shù)組，不會為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…//僅在雷達圖中使用。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)軸對應(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)軸對應(yīng)的value：params.value[params.dimensionNames[params.encode.y[0]]]◆series-scatter.label.color='#fff'Color類型，用于設(shè)置文字的顏色。如果設(shè)置為'inherit'，則為視覺映射得到的顏色，如系列色?！魋eries-scatter.label.fontStyle='normal'string類型，用于設(shè)置文字字體的風(fēng)格。其取值可選項為：'normal'、'italic'、'oblique'◆series-scatter.label.fontWeight='normal'string或number類型，用于設(shè)置文字字體的粗細。其取值可選項為：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆series-scatter.label.fontFamily='sans-serif'string類型，用于設(shè)置文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆series-scatter.label.fontSize=12number類型，用于設(shè)置文字的字體大小?！魋eries-scatter.label.alignstring類型，用于設(shè)置文字水平對齊方式，默認自動。其取值可選項為：'left'、'center'、'right'。rich中如果沒有設(shè)置align，則會取父層級的align。例如：{align:right,rich:{a:{//沒有設(shè)置`align`，則`align`為right}}}◆series-scatter.label.verticalAlignstring類型，用于設(shè)置文字垂直對齊方式，默認自動。其取值可選項為：'top'、'middle'、'bottom'。rich中如果沒有設(shè)置verticalAlign，則會取父層級的verticalAlign。例如：{verticalAlign:bottom,rich:{a:{//沒有設(shè)置`verticalAlign`，則`verticalAlign`為bottom}}}◆series-scatter.label.lineHeightnumber類型，用于設(shè)置行高。rich中如果沒有設(shè)置lineHeight，則會取父層級的lineHeight。例如：{lineHeight:56,rich:{a:{//沒有設(shè)置`lineHeight`，則`lineHeight`為56}}}◆series-scatter.label.backgroundColor='transparent'string或Object類型，用于設(shè)置文字塊背景色。可以使用顏色值，例如：'#123234','red','rgba(0,23,11,0.3)'。也可以直接使用圖片，例如：backgroundColor：{image:'xxx/xxx.png'//這里可以是圖片的URL，//或者圖片的dataURI，//或者HTMLImageElement對象，//或者HTMLCanvasElement對象。}當(dāng)使用圖片的時候，可以使用width或height指定高寬，也可以不指定自適應(yīng)。如果設(shè)置為'inherit'，則為視覺映射得到的顏色，如系列色。◆series-scatter.label.borderColorColor類型，用于設(shè)置文字塊邊框顏色。如果設(shè)置為'inherit'，則為視覺映射得到的顏色，如系列色?！魋eries-scatter.label.borderWidthnumber類型，用于設(shè)置文字塊邊框?qū)挾?。◆series-scatter.label.borderType='solid'string或number或Array類型，用于設(shè)置文字塊邊框描邊類型。其取值可選項為：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number或者number數(shù)組，用以指定線條的dasharray，配合borderDashOffset可實現(xiàn)更靈活的虛線效果。例如：{borderType:[5,10],borderDashOffset:5}◆series-scatter.label.borderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配borderType指定dasharray實現(xiàn)靈活的虛線效果。◆series-scatter.label.borderRadiusnumber或Array類型，用于設(shè)置文字塊的圓角。◆series-scatter.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-scatter.label.shadowColor='transparent'Color類型，用于設(shè)置文字塊的背景陰影顏色?！魋eries-scatter.label.shadowBlurnumber類型，用于設(shè)置文字塊的背景陰影長度?！魋eries-scatter.label.shadowOffsetXnumber類型，用于設(shè)置文字塊的背景陰影X偏移。◆series-scatter.label.shadowOffsetYnumber類型，用于設(shè)置文字塊的背景陰影Y偏移?！魋eries-scatter.label.widthnumber類型，用于設(shè)置文本顯示寬度?！魋eries-scatter.label.heightnumber類型，用于設(shè)置文本顯示高度?！魋eries-scatter.label.textBorderColorColor類型，用于設(shè)置文字本身的描邊顏色。如果設(shè)置為'inherit'，則為視覺映射得到的顏色，如系列色?！魋eries-scatter.label.textBorderWidthnumber類型，用于設(shè)置文字本身的描邊寬度?！魋eries-scatter.label.textBorderType='solid'string或number或Array類型，用于設(shè)置文字本身的描邊類型。其取值可選項為：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number或者number數(shù)組，用以指定線條的dasharray，配合textBorderDashOffset可實現(xiàn)更靈活的虛線效果。例如：{textBorderType:[5,10],textBorderDashOffset:5}◆series-scatter.label.textBorderDashOffsetnumber類型，從v5.0.0開始支持，用于設(shè)置虛線的偏移量，可搭配textBorderType指定dasharray實現(xiàn)靈活的虛線效果。◆series-scatter.label.textShadowColor='transparent'Color類型，用于設(shè)置文字本身的陰影顏色?！魋eries-scatter.label.textShadowBlurnumber類型，用于設(shè)置文字本身的陰影長度?！魋eries-scatter.label.textShadowOffsetXnumber類型，用于設(shè)置文字本身的陰影X偏移?！魋eries-scatter.label.textShadowOffsetYnumber類型，用于設(shè)置文字本身的陰影Y偏移?！魋eries-scatter.label.overflow='none'string類型，用于設(shè)置文字超出寬度是否截斷或者換行，配置width時有效。①'truncate'截斷，并在末尾顯示ellipsis配置的文本，默認為…②'break'換行。③'breakAll'換行，跟'break'不同的是，在英語等拉丁文中，'breakAll'還會強制單詞內(nèi)換行。◆series-scatter.label.ellipsis='…'string類型，用于設(shè)置在overflow配置為'truncate'的時候，可以通過該屬性配置末尾顯示的文本。◆series-scatter.label.richObject類型。在rich里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果?！魋eries-scatter.labelLineObject類型，從v5.0.0開始支持，用于設(shè)置標簽的視覺引導(dǎo)線配置?！魋eries-scatter.labelLine.showboolean類型，用于設(shè)置是否顯示視覺引導(dǎo)線?！魋eries-scatter.labelLine.showAboveboolean類型，從v5.0.0開始支持，用于設(shè)置是否顯示在圖形上方?！魋eries-scatter.labelLine.length2number類型，用于設(shè)置視覺引導(dǎo)項第二段的長度?！魋eries-scatter.labelLine.smoothbooleannumber類型，用于設(shè)置是否平滑視覺引導(dǎo)線，默認不平滑，可以設(shè)置成true平滑顯示，也可以設(shè)置為0到1的值，表示平滑程度?！魋eries-scatter.labelLine.minTurnAnglenumber類型，從v5.0.0開始支持，通過調(diào)整第二段線的長度，限制引導(dǎo)線兩端之間最小的夾角，以防止過小的夾角導(dǎo)致顯示不美觀?？梢栽O(shè)置為0-180度?！魋eries-scatter.labelLine.lineStyleObject類型。主要屬性及其設(shè)置如下：（21）series-scatter.labelLayoutObject或Function類型，從v5.0.0開始支持，用于設(shè)置標簽的統(tǒng)一布局配置。該配置項是在每個系列默認的標簽布局基礎(chǔ)上，統(tǒng)一調(diào)整標簽的(x,y)位置，標簽對齊等屬性以實現(xiàn)想要的標簽布局效果。該配置項也可以是一個有如下參數(shù)的回調(diào)函數(shù)//標簽對應(yīng)數(shù)據(jù)的dataIndexdataIndex:number//標簽對應(yīng)的數(shù)據(jù)類型，只在關(guān)系圖中會有node和edge數(shù)據(jù)類型的區(qū)分dataType?:string//標簽對應(yīng)的系列的indexseriesIndex:number//標簽顯示的文本text:string//默認的標簽的包圍盒，由系列默認的標簽布局決定labelRect:{x:number,y:number,width:number,height:number}//默認的標簽水平對齊align:'left'|'center'|'right'//默認的標簽垂直對齊verticalAlign:'top'|'middle'|'bottom'//標簽所對應(yīng)的數(shù)據(jù)圖形的包圍盒，可用于定位標簽位置rect:{x:number,y:number,width:number,height:number}//默認引導(dǎo)線的位置，目前只有餅圖(pie)和漏斗圖(funnel)有默認標簽位置//如果沒有該值則為nulllabelLinePoints?:number[][]示例：將標簽顯示在圖形右側(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-scatter.labelLayout.hideOverlapboolean類型，用于設(shè)置是否隱藏重疊的標簽?！魋eries-scatter.labelLayout.moveOverlapstring類型，用于設(shè)置在標簽重疊的時候是否挪動標簽位置以防止重疊。目前支持配置為：

'shiftX'水平方向依次位移，在水平方向?qū)R時使用。

'shiftY'垂直方向依次位移，在垂直方向?qū)R時使用?！魋eries-scatter.labelLayout.xnumber或string類型，用于設(shè)置標簽的x位置。支持絕對的像素值或者'20%'這樣的相對值?！魋eries-scatter.labelLayout.ynumber或string類型，用于設(shè)置標簽的y位置。支持絕對的像素值或者'20%'這樣的相對值?！魋eries-scatter.labelLayout.dxnumber類型，用于設(shè)置標簽在x方向上的像素偏移?？梢院蛒一起使用?！魋eries-scatter.labelLayout.dynumber類型，用于設(shè)置標簽在y方向上的像素偏移?？梢院蛓一起使用◆series-scatter.labelLayout.rotatenumber類型，用于設(shè)置標簽旋轉(zhuǎn)角度。◆series-scatter.labelLayout.widthnumber類型，用于設(shè)置標簽顯示的寬度?？梢耘浜蟧verflow使用控制標簽顯示在固定寬度內(nèi)◆series-scatter.labelLayout.heightnumber類型，用于設(shè)置標簽顯示的高度。◆series-scatter.labelLayout.alignstring類型，用于設(shè)置標簽水平對齊方式。可以設(shè)置'left'、'center'、'right'?！魋eries-scatter.labelLayout.verticalAlignstring類型，用于設(shè)置標簽垂直對齊方式?？梢栽O(shè)置'top'、'middle'、'bottom'?！魋eries-scatter.labelLayout.fontSizenumber類型，用于設(shè)置Thetextsizeofthelabel.series-scatter.labelLayout.draggableboolean類型，用于設(shè)置標簽是否可以允許用戶通過拖拽二次調(diào)整位置。series-scatter.labelLayout.labelLinePointsArray類型，用于設(shè)置標簽引導(dǎo)線三個點的位置。格式為：[[x,y],[x,y],[x,y]]在餅圖中常用來微調(diào)已經(jīng)計算好的引導(dǎo)線，其它情況一般不建議設(shè)置。（22）series-scatter.itemStyleObject類型，用于設(shè)置圖形樣式?！魋eries-scatter.itemStyle.color=自適應(yīng)Color或Function類型，圖形的顏色。默認從全局調(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ù)項seriesIndex,dataIndex,data,value等各個參數(shù)。◆series-scatter.itemStyle.borderColor='#000'Color類型，用于設(shè)置圖形的描邊顏色，支持的顏色格式同color，不支持回調(diào)函數(shù)?！魋eries-scatter.itemStyle.borderWidthnumber類型，用于設(shè)置描邊線寬。為0時無描邊。◆series-scatter.itemStyle.borderType='solid'string或number或Array類型，用于設(shè)置描邊類型。其取值可選項為：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number或者number數(shù)組，用以指定線條的dasharray，配合borderDashOffset可實現(xiàn)更靈活的虛線效果。例如：{borderType:[5,10],borderDashOffset:5}◆series-scatter.itemStyle.borderDashOffsetnumber類型，從v5.0.0開始支持用于設(shè)置虛線的偏移量，可搭配borderType指定dasharray實現(xiàn)靈活的虛線效果?！魋eries-scatter.itemStyle.borderCap='butt'string類型，從v5.0.0開始支持，用于指定線段末端的繪制方式，其取值可選項為：①'butt'：線段末端以方形結(jié)束。②'round'：線段末端以圓形結(jié)束。③'square'：線段末端以方形結(jié)束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。默認值為'butt'?！魋eries-scatter.itemStyle.borderJoin='bevel'string類型，從v5.0.0開始支持，用于設(shè)置2個長度不為0的相連部分（線段，圓弧，曲線）如何連接在一起的屬性（長度為0的變形部分，其指定的末端和控制點在同一位置，會被忽略）。其取值可選項為：①'bevel'：在相連部分的末端填充一個額外的以三角形為底的區(qū)域，每個部分都有各自獨立的矩形拐角。②'round'：通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。③'miter'：通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區(qū)域。這個設(shè)置可以通過borderMiterLimit屬性看到效果。默認值為'bevel'。◆series-scatter.itemStyle.borderMiterLimit=10number類型，從v5.0.0開始支持，用于設(shè)置斜接面限制比例。只有當(dāng)borderJoin為miter時，borderMiterLimit才有效。默認值為10。負數(shù)、0、Infinity和NaN均會被忽略?！魋eries-scatter.itemStyle.shadowBlurnumber類型，用于設(shè)置圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。示例代碼如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆series-scatter.itemStyle.shadowColorColor類型，用于設(shè)置陰影顏色。支持的格式同color。◆series-scatter.itemStyle.shadowOffsetXnumber類型，用于設(shè)置陰影水平方向上的偏移距離?！魋eries-scatter.itemStyle.shadowOffsetYnumber類型，用于設(shè)置陰影垂直方向上的偏移距離?！魋eries-scatter.itemStyle.opacity=0.8number類型，用于設(shè)置圖形透明度。支持從0到1的數(shù)字，為0時不繪制該圖形。（23）series-scatter.emphasisObject類型，用于設(shè)置高亮的圖形和標簽樣式。◆series-scatter.emphasis.disabledboolean類型，從v5.3.0開始支持，用于設(shè)置是否關(guān)閉高亮狀態(tài)。關(guān)閉高亮狀態(tài)可以在鼠標移到圖形上，tooltip觸發(fā)，或者圖例聯(lián)動的時候不再觸發(fā)高亮效果。在圖形非常多的時候可以關(guān)閉以提升交互流暢性?！魋eries-scatter.emphasis.scale=truebooleannumber類型，從v5.0.0開始支持，用于設(shè)置是否開啟高亮后的放大效果。從5.3.2版本開始支持number，用以設(shè)置高亮放大倍數(shù)，默認放大1.1倍?！魋eries-scatter.emphasis.focus='none'string類型，從v5.0.0開始支持，在高亮圖形時，是否淡出其它數(shù)據(jù)的圖形已達到聚焦的效果。支持如下配置：①'none'不淡出其它圖形，默認使用該配置。②'self'只聚焦（不淡出）當(dāng)前高亮的數(shù)據(jù)的圖形。③'series'聚焦當(dāng)前高亮的數(shù)據(jù)所在的系列的所有圖形。示例代碼：下面代碼配置了柱狀圖在高亮一個圖形的時候，淡出當(dāng)前直角坐標系所有其它的系列。emphasis:{focus:'series',blurScope:'coordinateSystem'}◆series-scatter.emphasis.blurScope='coordinateSystem'string類型，從v5.0.0開始支持，在開啟focus的時候，可以通過blurScope配置淡出的范圍。支持如下配置①'coordinateSystem'淡出范圍為坐標系，默認使用該配置。②'series'淡出范圍為系列。③'global'淡出范圍為全局?！魋eries-scatter.emphasis.labelObject類型?！魋eries-scatter.emphasis.labelLineObject類型，從v5.0.0開始支持，用于設(shè)置標簽的視覺引導(dǎo)線配置?！魋eries-scatter.emphasis.itemStyleObject類型。（24）series-scatter.blurObject類型，從v5.0.0開始支持，用于設(shè)置淡出狀態(tài)的配置。開啟emphasis.focus后有效。◆series-scatter.blur.labelObject類型?！魋eries-scatter.blur.labelLineObject類型，從v5.0.0開始支持，用于設(shè)置標簽的視覺引導(dǎo)線配置?！魋eries-scatter.blur.itemStyleObject類型。（25）series-scatter.selectObject類型，從v5.0.0開始支持，用于設(shè)置選中狀態(tài)的配置。開啟selectedMode后有效。◆series-scatter.select.disabledboolean類型，從v5.3.0開始支持，用于設(shè)置是否可以被選中。在開啟selectedMode的時候有效，可以用于關(guān)閉部分數(shù)據(jù)。◆series-scatter.select.labelObject類型。◆series-scatter.select.labelLineObject類型，從v5.0.0開始支持，用于設(shè)置標簽的視覺引導(dǎo)線配置?！魋eries-scatter.select.itemStyleObject類型?！魋eries-scatter.selectedModeboolean或string類型，從v5.0.0開始支持，用于設(shè)置選中模式的配置，表示是否支持多個選中，默認關(guān)閉，支持布爾值和字符串，字符串取值可選'single'，'multiple'，'series'分別表示單選，多選以及選擇整個系列。從v5.3.0開始支持'series'。（26）series-scatter.progressive=400number類型，用于設(shè)置漸進式渲染時每一幀繪制圖形數(shù)量，設(shè)為0時不啟用漸進式渲染，支持每個系列單獨配置。在圖中有數(shù)千到幾千萬圖形元素的時候，一下子把圖形繪制出來，或者交互重繪的時候可能會造成界面的卡頓甚至假死。ECharts4開始全流程支持漸進渲染（progressiverendering），渲染的時候會把創(chuàng)建好的圖形分到數(shù)幀中渲染，每一幀渲染只渲染指定數(shù)量的圖形。該配置項就是用于配置該系列每一幀渲染的圖形數(shù)，可以根據(jù)圖表圖形復(fù)雜度的需要適當(dāng)調(diào)整這個數(shù)字使得在不影響交互流暢性的前提下達到繪制速度的最大化。例如在lines圖或者平行坐標中線寬大于1的polyline繪制會很慢，這個數(shù)字就可以設(shè)置小一點，而線寬小于等于1的polyline繪制非常快，該配置項就可以相對調(diào)得比較大。（27）series-scatter.progressiveThreshold=3000number類型，用于設(shè)置啟用漸進式渲染的圖形數(shù)量閾值，在單個系列的圖形數(shù)量超過該閾值時啟用漸進式渲染。（28）series-scatter.dimensionsArray類型，用于設(shè)置使用dimensions定義series.data或者dataset.source的每個維度的信息。注意：如果使用了dataset，那么可以在dataset.dimensions中定義dimension，或者在dataset.source的第一行/列中給出dimension名稱。于是就不用在這里指定dimension。但如果在這里指定了dimensions，那么優(yōu)先使用這里的。例如：option={dataset:{source:[//有了上面dimensions定義后，下面這五個維度的名稱分別為：//'date','open','close','highest','lowest'[12,44,55,66,2],[23,6,16,23,1],…]},series:{type:'xxx',//定義了每個維度的名稱。這個名稱會被顯示到默認的tooltip中。dimensions:['date','open','close','highest','lowest']}}series:{type:'xxx',dimensions:[null,//如果此維度不想給出定義，則使用null即可{type:'ordinal'},//只定義此維度的類型。//'ordinal'表示離散型，一般文本使用這種類型。//如果類型沒有被定義，會自動猜測類型。{name:'good',type:'number'},'bad'//等同于{name:'bad'}]}（29）series-scatter.encodeObject類型，可以定義data的哪個維度被編碼成什么。例如：option={dataset:{source:[//每一列稱為一個『維度』。//這里分別是維度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會在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)如下，其中冒號左邊是坐標系、標簽等特定名稱，如'x','y','tooltip'等，冒號右邊是數(shù)據(jù)中的維度名（string格式）或者維度的序號（number格式，從0開始計數(shù)），可以指定一個或多個維度（使用數(shù)組）。通常情況下，下面各種信息不需要所有的都寫，按需寫即可。下面是encode支持的屬性：//在任何坐標系和系列中，都支持：encode:{//使用“名為product的維度”和“名為score的維度”的值在tooltip中顯示tooltip:['product','score']//使用第1個維度和第3個維度的維度名連起來作為系列名。//（有時候名字比較長，這可以避免在重復(fù)輸入這些名字）seriesName:[1,3],//表示使用第2個維度中的值作為id。//這在使用setOption動態(tài)更新數(shù)據(jù)時有用處，可以使新老數(shù)據(jù)用id對應(yīng)起來，//從而能夠產(chǎn)生合適的數(shù)據(jù)更新動畫。itemId:2,//指定數(shù)據(jù)項的名稱使用第3個維度在餅圖等圖表中有用，//可以使這個名字顯示在圖例（legend）中。itemName:3,//指定數(shù)據(jù)項的組ID(groupId)。當(dāng)全局過渡動畫功能開啟時，//setOption前后擁有相同groupId的數(shù)據(jù)項會進行動畫過渡。itemGroupId:4,//指定數(shù)據(jù)項對應(yīng)的子數(shù)據(jù)組ID(childGroupId)，用于實現(xiàn)多層下鉆和聚合。//從v5.5.0開始支持itemChildGroupId:5}//直角坐標系（grid/cartesian）特有的屬性：encode:{//把“維度1”、“維度5”、“名為score的維度”映射到X軸：x:[1,5,'score'],//把“維度0”映射到Y(jié)軸。y:0}//單軸（singleAxis）特有的屬性：encode:{single:3}//極坐標系（polar）特有的屬性：encode:{radius:3,angle:2}//地理坐標系（geo）特有的屬性：encode:{lng:3,lat:2}//對于一些沒有坐標系的圖表，例如餅圖、漏斗圖等，其取值可選項為：encode:{value:3}（30）series-scatter.seriesLayoutBy='column'string類型，用于設(shè)置當(dāng)使用dataset時，seriesLayoutBy指定了dataset中用行還是列對應(yīng)到系列上，也就是說，系列“排布”到dataset的行還是列上。其取值可選項為：①'column'：默認，dataset的列對應(yīng)于系列，從而dataset中每一列是一個維度（dimension）。②'row'：dataset的行對應(yīng)于系列，從而dataset中每一行是一個維度（dimension）。（31）series-scatter.datasetIndexnumber類型，用于設(shè)置如果series.data沒有指定，并且dataset存在，那么就會使用dataset。datasetIndex指定本系列使用哪個dataset。（32）series-scatter.dataGroupIdstring類型，用于設(shè)置該系列所有數(shù)據(jù)項的組ID，優(yōu)先級低于groupId。詳見series.data.groupId。（33）series-scatter.dataArray類型，用于設(shè)置系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項通常為具體的數(shù)據(jù)項。注意，如果系列沒有指定data，并且option有dataset，那么默認使用第1個dataset。如果指定了data，則不會再使用dataset?？梢允褂胹eries.datasetIndex指定其他的dataset。通常來說，數(shù)據(jù)用一個二維數(shù)組表示。如下，每一列被稱為一個『維度』。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]]}]在直角坐標系(grid)中『維度X』和『維度Y』會默認對應(yīng)于xAxis和yAxis。在極坐標系(polar)中『維度X』和『維度Y』會默認對應(yīng)于radiusAxis和angleAxis。后面的其他維度是可選的，可以在別處被使用，例如：在visualMap中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上。在series.symbolSize中可以使用回調(diào)函數(shù)，基于某個維度得到symbolSize值。使用tooltip.formatter或series.label.formatter可以把其他維度的值展示出來。特別地，當(dāng)只有一個軸為類目軸（axis.type為'category'）的時候，數(shù)據(jù)可以簡化用一個一維數(shù)組表示。例如：xAxis:{data:['a','b','m','n']},series:[{//與xAxis.data一一對應(yīng)。data:[23,44,55,19]//它其實是下面這種形式的簡化：//data:[[0,23],[1,44],[2,55],[3,19]]}]『值』與軸類型的關(guān)系：當(dāng)某維度對應(yīng)于數(shù)值軸（axis.type為'value'或者'log'）的時候：其值可以為number（例如12）。（也可以兼容string形式的number，例如'12'）當(dāng)某維度對應(yīng)于類目軸（axis.type為'category'）的時候：其值須為類目的『序數(shù)』（從0開始）或者類目的『字符串值』。例如：xAxis:{type:'category',data:['星期一','星期二','星期三','星期四']},yAxis:{type:'category',data:['a','b','m','n','p','q']},series:[{data:[//xAxisyAxis[0,0,2],//意思是此點位于xAxis:'星期一',yAxis:'a'。['星期四',2,1],//意思是此點位于xAxis:'星期四',yAxis:'m'。[2,'p',2],//意思是此點位于xAxis:'星期三',yAxis:'p'。[3,3,5]]}]（34）series-scatter.markPointObject類型，用于設(shè)置圖表標注。（35）series-scatter.markLineObject類型，用于設(shè)置圖表標線。（35）series-scatter.markAreaObject類型，用于設(shè)置圖表標域，常用于標記圖表中某個范圍的數(shù)據(jù)，例如標出某段時間投放了廣告。（36）series-scatter.clip=trueboolean類型，從v4.4.0開始支持，用于設(shè)置是否裁剪超出坐標系部分的圖形，具體裁剪效果根據(jù)系列決定：

散點圖/帶有漣漪特效動畫的散點（氣泡）圖：忽略中心點超出坐標系的圖形，但是不裁剪單個圖形。

柱狀圖：裁掉完全超出的柱子，但是不會裁剪只超出部分的柱子。

折線圖：裁掉所有超出坐標系的折線部分，拐點圖形的邏輯按照散點圖處理。

路徑圖：裁掉所有超出坐標系的部分。

K線圖：忽略整體都超出坐標系的圖形，但是不裁剪單個圖形。

象形柱圖：裁掉所有超出坐標系的部分（從v5.5.0開始支持）。

自定義系列：裁掉所有超出坐標系的部分。除了象形柱圖和自定義系列，其它系列的默認值都為true，及開啟裁剪，如果你覺得不想要裁剪的話，可以設(shè)置成false關(guān)閉。（37）series-scatter.zlevelnumber類型，用于設(shè)置散點圖所有圖形的zlevel值。zlevel用于Canvas分層，不同zlevel值的圖形會放置在不同的Canvas中，Canvas分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的Canvas會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。zlevel大的Canvas會放在zlevel小的Canvas的上面。（38）series-scatter.z=2number類型，用于設(shè)置散點圖組件的所有圖形的z值?？刂茍D形的前后順序，z值小的圖形會被z值大的圖形覆蓋。z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的Canvas。（39）series-scatter.silentboolean類型，用于設(shè)置圖形是否不響應(yīng)和觸發(fā)鼠標事件，默認為false，即響應(yīng)和觸發(fā)鼠標事件。（40）series-scatter.animation=trueboolean類型，用于設(shè)置是否開啟動畫。（41）series-scatter.animationThreshold=2000number類型，用于設(shè)置是否開啟動畫的閾值，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。（42）series-scatter.animationDuration=1000number或Function類型，用于設(shè)置初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的時長實現(xiàn)更戲劇的初始動畫效果：animationDuration:function(idx){//越往后的數(shù)據(jù)時長越大returnidx*100;}（43）series-scatter.animationEasing='cubicOut'string類型，用于設(shè)置初始動畫的緩動效果。不同的緩動效果可以參考緩動示例。（44）series-scatter.animationDelaynumber或Function類型，用于設(shè)置初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的初始動畫效果。示例代碼：animationDelay:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}（45）series-scatter.animationDurationUpdate=300number或Function類型，用于設(shè)置數(shù)據(jù)更新動畫的時長。支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的時長實現(xiàn)更戲劇的更新動畫效果：animationDurationUpdate:function(idx){//越往后的數(shù)據(jù)時長越大returnidx*100;}（46）series-scatter.animationEasingUpdate='cubicInOut'string類型，用于設(shè)置數(shù)據(jù)更新動畫的緩動效果。（47）series-scatter.animationDelayUpdatenumber或Function類型，用于設(shè)置數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的更新動畫效果。示例代碼如下：animationDelayUpdate:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}（48）series-scatter.universalTransitionobject類型，從v5.2.0開始支持，用于設(shè)置全局過渡動畫相關(guān)的配置。全局過渡動畫（UniversalTransition）提供了任意系列之間進行變形動畫的功能。開啟該功能后，每次setOption，相同id的系列之間會自動關(guān)聯(lián)進行動畫的過渡，更細粒度的關(guān)聯(lián)配置見universalTransition.seriesKey配置。通過配置數(shù)據(jù)項的groupId和childGroupId，還可以實現(xiàn)諸如下鉆，聚合等一對多或者多對一的動畫。可以直接在系列中配置universalTransition:true開啟該功能。也可以提供一個對象進行更多屬性的配置?！魋eries-scatter.universalTransition.enabledboolean類型，用于設(shè)置是否開啟全局過渡動畫。◆series-scatter.universalTransition.seriesKeystring或Array類型，用于設(shè)置seriesKey決定了如何關(guān)聯(lián)需要動畫的系列，未配置時會默認取系列的id。通常該配置為一個字符串，配置為相同seriesKey的系列之間會進行動畫的過渡。也可以像下面配置為一個數(shù)組：seriesKey:['male','female']配置為數(shù)組意味著在動畫的時候所有數(shù)組項指定的系列會合并為當(dāng)前系列。例如該配置是指id或者seriesKey為'male'和'female'的系列會合并成當(dāng)前系列。◆series-scatter.universalTransition.divideShapestring類型，用于設(shè)置divideShape決定在一對多或者多對一的動畫中，當(dāng)前系列的圖形如何分裂成多個圖形。目前支持①'split'通過一定的算法將分割圖形成為多個。②'clone'從當(dāng)前圖形克隆得到多個。為了較好的效果，不同的系列會默認有不同的配置，例如散點圖這種圖形比較小且復(fù)雜的默認采用了'clone'，而柱狀圖這種更加規(guī)則的則默認是'split'。你可以根據(jù)你自己的場景需求設(shè)置為需要的分裂策略?！魋eries-scatter.universalTransition.delayFunction類型，用于配置一對多或者多對一的動畫中每個圖形的動畫延時，設(shè)置不同的動畫延時可以給動畫帶來一定的趣味性。例如下面代碼每個圖形通過一個隨機的延時造成一種錯落的效果：delay:function(index,count){returnMath.random()*1000;}（49）series-scatter.tooltipObject類型，本系列特定的tooltip設(shè)定。Web數(shù)據(jù)可視化教程（基于ECharts）【訓(xùn)練6-4】的對應(yīng)代碼Web數(shù)據(jù)可視化教程（基于ECharts）consthours=['12a','1a','2a','3a','4a','5a','6a','7a','8a','9a','10a','11a','12p','1p','2p','3p','4p','5p','6p','7p','8p','9p','10p','11p'];constdays=['周一','周二','周三','周四','周五','周六','周日'];constdata=[[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7