Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）標題組件的屬性及設置Web數(shù)據(jù)可視化教程（基于ECharts）（1）title.idstring類型，用于設置組件ID，默認不指定。指定則可用于在option或者API中引用組件。（2）title.show=trueboolean類型，用于設置是否顯示標題組件。（3）title.text=''string類型，用于設置主標題文本，支持使用\n換行。（4）title.link=''string類型，用于設置主標題文本超鏈接。（5）title.target='blank'string類型，用于指定窗口打開主標題超鏈接。取值可選項：①'self'當前窗口打開。②'blank'新窗口打開。（6）title.textStyleObject類型?！魌itle.textStyle.color='#333'Color類型，用于設置主標題文字的顏色?！魌itle.textStyle.fontStyle='normal'string類型，用于設置主標題文字字體的風格。取值可選項：'normal'、'italic'、'oblique'?！魌itle.textStyle.fontWeight='bolder'string或number類型，用于設置主標題文字字體的粗細。取值可選項：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆title.textStyle.fontFamily='sans-serif'string類型，用于設置主標題文字的字體系列，還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆title.textStyle.fontSize=18number類型，用于設置主標題文字的字體大小?！魌itle.textStyle.lineHeightnumber類型，用于設置行高。rich中如果沒有設置lineHeight，則會取父層級的lineHeight。示例代碼：{lineHeight:56,rich:{a:{//沒有設置`lineHeight`，則`lineHeight`為56}}}◆title.textStyle.widthnumber類型，用于設置文本顯示寬度?！魌itle.textStyle.heightnumber類型，用于設置文本顯示高度。◆title.textStyle.textBorderColorColor類型，用于設置文字本身的描邊顏色?！魌itle.textStyle.textBorderWidthnumber類型，用于設置文字本身的描邊寬度?！魌itle.textStyle.textBorderType='solid'string或number或Array類型，用于設置文字本身的描邊類型。取值可選項：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number類型或者number數(shù)組，用以指定線條的dasharray，配合textBorderDashOffset可實現(xiàn)更靈活的虛線效果。示例代碼：{textBorderType:[5,10],textBorderDashOffset:5}◆title.textStyle.textBorderDashOffsetnumber類型，從v5.0.0開始支持，用于設置虛線的偏移量，可搭配textBorderType指定dasharray實現(xiàn)靈活的虛線效果?！魌itle.textStyle.textShadowColor='transparent'Color類型，用于設置文字本身的陰影顏色?！魌itle.textStyle.textShadowBlurnumber類型，用于設置文字本身的陰影長度?！魌itle.textStyle.textShadowOffsetXnumber類型，用于設置文字本身的陰影X偏移。◆title.textStyle.textShadowOffsetYnumber類型，用于設置文字本身的陰影Y偏移?！魌itle.textStyle.overflow='none'string類型，用于設置文字超出寬度是否截斷或者換行，配置width時有效其取值可選項：①'truncate'截斷，并在末尾顯示ellipsis配置的文本，默認為…②'break'換行。③'breakAll'換行，跟'break'不同的是，在英語等拉丁文中，'breakAll'還會強制單詞內(nèi)換行?！魌itle.textStyle.ellipsis='…'string類型，在overflow配置為'truncate'的時候，可以通過該屬性配置末尾顯示的文本?！魌itle.textStyle.richObject在rich里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果。（7）title.subtext=''string類型，用于設置副標題文本，支持使用\n換行。（8）title.sublink=''string類型，用于設置副標題文本超鏈接。（9）title.subtarget='blank'string類型，用于設置指定窗口打開副標題的超鏈接，其取值可選項：①'self'當前窗口打開②'blank'新窗口打開（10）title.subtextStyleObject類型◆title.subtextStyle.color='#aaa'Color類型，用于設置副標題文字的顏色?！魌itle.subtextStyle.fontStyle='normal'string類型，用于設置副標題文字字體的風格。其取值可選項：'normal'、'italic'、'oblique'?！魌itle.subtextStyle.fontWeight='normal'string或number，用于設置副標題文字字體的粗細。其取值可選項：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆title.subtextStyle.fontFamily='sans-serif'string類型，用于設置副標題文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'?！魌itle.subtextStyle.fontSize=12number類型，用于設置副標題文字的字體大小。◆title.subtextStyle.alignstring類型，用于設置文字水平對齊方式，默認為自動。其取值可選項：'left'、'center'、'right'，rich中如果沒有設置align，則會取父層級的align。示例代碼：{align:right,rich:{a:{//沒有設置`align`，則`align`為right}}}◆title.subtextStyle.verticalAlignstring類型，用于設置文字垂直對齊方式，默認為自動。其取值可選項：'top'、'middle'、'bottom'，rich中如果沒有設置verticalAlign，則會取父層級的verticalAlign。示例代碼：{verticalAlign:bottom,rich:{a:{//沒有設置`verticalAlign`，則`verticalAlign`為bottom}}}◆title.subtextStyle.lineHeightnumber類型，用于設置行高。rich中如果沒有設置lineHeight，則會取父層級的lineHeight。示例代碼：{lineHeight:56,rich:{a:{//沒有設置`lineHeight`，則`lineHeight`為56}}}◆title.subtextStyle.widthnumber類型，用于設置文本顯示寬度?！魌itle.subtextStyle.heightnumber類型，用于設置文本顯示高度?！魌itle.subtextStyle.textBorderColorColor類型，用于設置文字本身的描邊顏色?！魌itle.subtextStyle.textBorderWidthnumber類型，用于設置文字本身的描邊寬度?！魌itle.subtextStyle.textBorderType='solid'string或number或Array，用于設置文字本身的描邊類型。其取值可選項：'solid'、'dashed'、'dotted'。自v5.0.0開始，也可以是number類型或者number數(shù)組，用以指定線條的dasharray，配合textBorderDashOffset可實現(xiàn)更靈活的虛線效果。例如：{textBorderType:[5,10],textBorderDashOffset:5}◆title.subtextStyle.textBorderDashOffsetnumber類型，從v5.0.0開始支持，用于設置虛線的偏移量，可搭配textBorderType指定dasharray實現(xiàn)靈活的虛線效果?！魌itle.subtextStyle.textShadowColor='transparent'Color類型，用于設置文字本身的陰影顏色?！魌itle.subtextStyle.textShadowBlurnumber類型，用于設置文字本身的陰影長度?！魌itle.subtextStyle.textShadowOffsetXnumber類型，用于設置文字本身的陰影X偏移。◆title.subtextStyle.textShadowOffsetYnumber類型，用于設置文字本身的陰影Y偏移?！魌itle.subtextStyle.overflow='none'string類型，用于設置文字超出寬度是否截斷或者換行，配置width時有效。取值可選項：①'truncate'截斷，并在末尾顯示ellipsis配置的文本，默認為…②'break'換行。③'breakAll'換行，跟'break'不同的是，在英語等拉丁文中，'breakAll'還會強制單詞內(nèi)換行?！魌itle.subtextStyle.ellipsis='…'string類型，在overflow配置為'truncate'的時候，可以通過該屬性配置末尾顯示的文本?！魌itle.subtextStyle.richObject類型，在rich里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果。（11）title.textAlign='auto'string類型，用于設置整體（包括text和subtext）的水平對齊，其取值可選項：'auto'、'left'、'right'、'center'。（12）title.textVerticalAlign='auto'string類型，用于設置整體（包括text和subtext）的垂直對齊，其取值可選項：'auto'、'top'、'bottom'、'middle'。（13）title.triggerEventboolean類型，用于設置是否觸發(fā)事件。（14）title.padding=5number或Array類型，用于設置標題內(nèi)邊距，單位為px，默認各方向內(nèi)邊距為5px，接受數(shù)組分別設定上、右、下、左邊距。示例代碼：//設置內(nèi)邊距為5padding:5//設置上下的內(nèi)邊距為5，左右的內(nèi)邊距為10padding:[5,10]//分別設置四個方向的內(nèi)邊距padding:[5,//上10,//右5,//下10,//左]（15）title.itemGap=10number類型，用于設置主副標題之間的間距。（16）title.zlevelnumber類型，用于設置所有圖形的zlevel值。zlevel用于Canvas分層，不同zlevel值的圖形會放置在不同的Canvas中，Canvas分層是一種常見的優(yōu)化手段?？梢园岩恍﹫D形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的Canvas會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。zlevel大的Canvas會放在zlevel小的Canvas的上面。（17）title.z=2number類型，用于設置組件的所有圖形的z值?？刂茍D形的前后順序，z值小的圖形會被z值大的圖形覆蓋。z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的Canvas。（18）title.left='auto'string或number類型，用于設置title組件離容器左側(cè)的距離。left的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，也可以是'left','center','right'。如果left的值為'left','center','right'，組件會根據(jù)相應的位置自動對齊。（19）title.top='auto'string或number類型，用于設置title組件離容器上側(cè)的距離。top的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，也可以是'top','middle','bottom'。如果top的值為'top','middle','bottom'，組件會根據(jù)相應的位置自動對齊。（20）title.right='auto'string或number類型，用于設置title組件離容器右側(cè)的距離。right的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，默認為自適應。（21）title.bottom='auto'string或number類型，用于設置title組件離容器下側(cè)的距離。bottom的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，默認為自適應。（22）title.backgroundColor='transparent'Color類型，用于設置標題背景色，默認為透明。顏色可以使用RGB表示，例如'rgb(128,128,128)'，如果想要加上alpha通道，可以使用RGBA，比如'rgba(128,128,128,0.5)'，也可以使用十六進制格式，例如'#ccc'。（23）title.borderC