Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）提示框組件的屬性及設(shè)置Web數(shù)據(jù)可視化教程（基于ECharts）（1）tooltip.show=trueboolean類型，用于設(shè)置是否顯示提示框組件，包括提示框浮層和axisPointer。（2）tooltip.trigger='item'string類型，用于設(shè)置觸發(fā)類型。其取值可選項為：①'item'數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。②'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。在ECharts2.x中只支持類目軸上使用axistrigger，在ECharts3中支持在直角坐標(biāo)系和極坐標(biāo)系上的所有類型的軸。并且可以通過axisPointer.axis指定坐標(biāo)軸。③'none'什么都不觸發(fā)。（3）tooltip.axisPointerObject用于設(shè)置坐標(biāo)軸指示器配置項。tooltip.axisPointer是配置坐標(biāo)軸指示器的快捷方式。實際上坐標(biāo)軸指示器的全部功能，都可以通過軸上的axisPointer配置項完成（例如xAxis.axisPointer或angleAxis.axisPointer）。但是使用tooltip.axisPointer在簡單場景下會更方便一些。注意：tooltip.axisPointer中諸配置項的優(yōu)先級低于軸上的axisPointer的配置項。坐標(biāo)軸指示器是指示坐標(biāo)軸當(dāng)前刻度的工具。注意：一般來說，axisPointer的具體配置項會配置在各個軸中（如xAxis.axisPointer）或者tooltip中（如tooltip.axisPointer）。但是以下這幾個選項只能配置在全局的axisPointer中：axisPointer.triggerOn、axisPointer.link。★如何顯示axisPointer？直角坐標(biāo)系grid、極坐標(biāo)系polar、單軸坐標(biāo)系single中的每個軸都自己的axisPointer。他們的axisPointer默認(rèn)不顯示。有兩種方法可以讓他們顯示：①設(shè)置軸上的axisPointer.show（例如xAxis.axisPointer.show）為true，則顯示此軸的axisPointer。②設(shè)置tooltip.trigger設(shè)置為'axis'或者tooltip.axisPointer.type設(shè)置為'cross'，則此時坐標(biāo)系會自動選擇顯示哪個軸的axisPointer，也可以使用tooltip.axisPointer.axis改變這種選擇。注意，軸上如果設(shè)置了axisPointer，會覆蓋此設(shè)置?！锶绾物@示axisPointer的label？axisPointer的label默認(rèn)不顯示（也就是默認(rèn)只顯示指示線），除非出現(xiàn)以下兩種情形：①設(shè)置軸上的axisPointer.label.show（例如xAxis.axisPointer.label.show）為true，則顯示此軸的axisPointer的label。②設(shè)置tooltip.axisPointer.type為'cross'時會自動顯示axisPointer的label?！镪P(guān)于觸屏的axisPointer的設(shè)置設(shè)置軸上的axisPointer.handle.show（例如xAxis.axisPointer.handle.show為true則會顯示出此axisPointer的拖拽按鈕。（polar坐標(biāo)系暫不支持此功能）。注意：如果發(fā)現(xiàn)此時tooltip效果不良好，可設(shè)置tooltip.triggerOn為'none'（于是效果為：手指按住按鈕則顯示tooltip，松開按鈕則隱藏tooltip），或者tooltip.alwaysShowContent為true（效果為tooltip一直顯示）?！镒詣游降綌?shù)據(jù)（snap）對于數(shù)值軸、時間軸，如果開啟了snap，則axisPointer會自動吸附到最近的點上?！魌ooltip.axisPointer.type='line'string類型，用于設(shè)置指示器類型。其取值可選項為：①'line'直線指示器②'shadow'陰影指示器③'none'無指示器④'cross'十字準(zhǔn)星指示器。其實是種簡寫，表示啟用兩個正交的軸的axisPointer?！魌ooltip.axisPointer.axis='auto'string類型，用于設(shè)置指示器的坐標(biāo)軸。默認(rèn)情況，坐標(biāo)系會自動選擇顯示哪個軸的axisPointer（默認(rèn)取類目軸或者時間軸），可以是'x''y''radius''angle'?！魌ooltip.axisPointer.snapboolean類型，用于設(shè)置坐標(biāo)軸指示器是否自動吸附到點上。默認(rèn)自動判斷。這個功能在數(shù)值軸和時間軸上比較有意義，可以自動尋找細(xì)小的數(shù)值點?！魌ooltip.axisPointer.znumber類型，用于設(shè)置坐標(biāo)軸指示器的z值?？刂茍D形的前后順序，z值小的圖形會被z值大的圖形覆蓋。◆tooltip.axisPointer.labelObject類型，用于設(shè)置坐標(biāo)軸指示器的文本標(biāo)簽。◆tooltip.axisPointer.lineStyleObject類型，axisPointer.type為'line'時有效?！魌ooltip.axisPointer.shadowStyleObject類型，axisPointer.type為'shadow'時有效。◆tooltip.axisPointer.crossStyleObject類型，axisPointer.type為'cross'時有效。◆tooltip.axisPointer.animation=trueboolean類型，用于設(shè)置是否開啟動畫?！魌ooltip.axisPointer.animationThreshold=2000number類型，用于設(shè)置是否開啟動畫的閾值，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。◆tooltip.axisPointer.animationDuration=1000number或Function類型，用于設(shè)置初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的時長實現(xiàn)更戲劇的初始動畫效果。示例代碼如下：animationDuration:function(idx){//越往后的數(shù)據(jù)時長越大returnidx*100;}◆tooltip.axisPointer.animationEasing='cubicOut'string類型，用于設(shè)置初始動畫的緩動效果。◆tooltip.axisPointer.animationDelaynumber或Function類型，用于設(shè)置初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的初始動畫效果。示例代碼如下：animationDelay:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}◆tooltip.axisPointer.animationDurationUpdate=200number或Function類型，用于設(shè)置數(shù)據(jù)更新動畫的時長。支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的時長實現(xiàn)更戲劇的更新動畫效果。示例代碼如下：animationDurationUpdate:function(idx){//越往后的數(shù)據(jù)時長越大returnidx*100;}◆tooltip.axisPointer.animationEasingUpdate=exponentialOutstring類型，用于設(shè)置數(shù)據(jù)更新動畫的緩動效果?！魌ooltip.axisPointer.animationDelayUpdatenumber或Function類型，用于設(shè)置數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的更新動畫效果。示例代碼如下：animationDelayUpdate:function(idx){//越往后的數(shù)據(jù)延遲越大returnidx*100;}（4）tooltip.showContent=trueboolean類型，用于設(shè)置是否顯示提示框浮層，默認(rèn)為顯示。只需tooltip觸發(fā)事件或顯示axisPointer而不需要顯示內(nèi)容時可配置該項為false。（5）tooltip.alwaysShowContentboolean類型，用于設(shè)置是否永遠(yuǎn)顯示提示框內(nèi)容，默認(rèn)情況下在移出可觸發(fā)提示框區(qū)域后一定時間后隱藏，設(shè)置為true可以保證一直顯示提示框內(nèi)容。該屬性為ECharts3.0中新加。（6）tooltip.triggerOn='mousemove|click'string類型，用于設(shè)置提示框觸發(fā)的條件，其取值可選項為：①'mousemove'鼠標(biāo)移動時觸發(fā)。②'click'鼠標(biāo)點擊時觸發(fā)。③'mousemove|click'同時鼠標(biāo)移動和點擊時觸發(fā)。④'none'不在'mousemove'或'click'時觸發(fā)，用戶可以通過action.tooltip.showTip和action.tooltip.hideTip來手動觸發(fā)和隱藏。也可以通過axisPointer.handle來觸發(fā)或隱藏。該屬性為ECharts3.0中新加。（7）tooltip.showDelaynumber類型，用于設(shè)置浮層顯示的延遲，單位為ms，默認(rèn)沒有延遲，也不建議設(shè)置。在triggerOn為'mousemove'時有效。（8）tooltip.hideDelay=100number類型，用于設(shè)置浮層隱藏的延遲，單位為ms，在alwaysShowContent為true的時候無效。（9）tooltip.enterableboolean類型，用于設(shè)置鼠標(biāo)是否可進(jìn)入提示框浮層中，默認(rèn)為false，如需詳情內(nèi)交互或如添加鏈接，可設(shè)置為true。（10）tooltip.renderMode='html'string類型，用于設(shè)置浮層的渲染模式，默認(rèn)以'html即額外的DOM節(jié)點展示tooltip；此外還可以設(shè)置為'richText'表示以富文本的形式渲染，渲染的結(jié)果在圖表對應(yīng)的Canvas中，這對于一些沒有DOM的環(huán)境（如微信小程序）有更好的支持。（11）tooltip.confineboolean類型，用于設(shè)置是否將tooltip框限制在圖表的區(qū)域內(nèi)。當(dāng)圖表外層的dom被設(shè)置為'overflow:hidden'，或者移動端窄屏，導(dǎo)致tooltip超出外界被截斷時，此配置比較有用。（12）tooltip.appendToBodyboolean類型，從v4.7.0開始支持，但自v5.5.0已廢棄，使用appendTo代替。是否將tooltip的DOM節(jié)點添加為HTML的<body>的子節(jié)點。只有當(dāng)renderMode為'html'是有意義的。默認(rèn)值是false，false表示tooltip的DOM節(jié)點會被添加為本圖表的DOMcontainer的一個子孫節(jié)點。但是這種方式導(dǎo)致，如果本圖表的DOMcontainer的祖先節(jié)點有設(shè)置overflow:hidden，那么當(dāng)tooltip超出container范圍使可能被截斷。這個問題一定程度上可以用tooltip.confine來解決，但是不一定能解決所有場景。所以這里提供了appendToBody:true來解決這件事。這也是常見的解決此類問題的一種方式。但是true并不定為默認(rèn)值，因為要避免breakchange，尤其是一些對于tooltip深入定制的使用。并且也避免一些未知的badcase。注：CSStransform的場景，這也可以使用。（13）tooltip.appendTostring或HTMLElement或Function類型，從v5.5.0開始支持。將tooltip的DOM節(jié)點添加到哪個節(jié)點下。只有當(dāng)renderMode為'html'是有意義的。默認(rèn)值是null，表示tooltip的DOM節(jié)點會被添加為本圖表的DOMcontainer的一個子孫節(jié)點。但是這種方式導(dǎo)致，如果本圖表的DOMcontainer的祖先節(jié)點有設(shè)置overflow:hidden，那么當(dāng)tooltip超出container范圍使可能被截斷。這個問題一定程度上可以用tooltip.confine來解決，但是不一定能解決所有場景。對于這樣的場景，可以指定appendTo。當(dāng)其為Function形式時，接口形如(chartContainer:HTMLElement)=>HTMLElement|undefined|null即返回tooltip的DOM節(jié)點應(yīng)該添加到哪個節(jié)點下。返回undefined或null表示采用上述的默認(rèn)邏輯。返回HTMLElement表示添加到該節(jié)點下。注：CSStransform的場景，這也可以使用。（14）tooltip.classNamestring類型，從v5.0.0開始支持。用于設(shè)置指定tooltip的DOM節(jié)點的CSS類。（只在html模式下生效）。（15）tooltip.transitionDuration=0.4number類型，用于設(shè)置提示框浮層的移動動畫過渡時間，單位是s，設(shè)置為0的時候會緊跟著鼠標(biāo)移動。（16）tooltip.positionstring或Array或Function，用于設(shè)置提示框浮層的位置，默認(rèn)不設(shè)置時位置會跟隨鼠標(biāo)的位置。其取值可選項為：①Array通過數(shù)組表示提示框浮層的位置，支持?jǐn)?shù)字設(shè)置絕對位置，百分比設(shè)置相對位置。示例代碼：//絕對位置，相對于容器左側(cè)10px,上側(cè)10pxposition:[10,10]//相對位置，放置在容器正中間position:['50%','50%']②Function回調(diào)函數(shù)，格式如下：(point:Array,params:Object|Array.<Object>,dom:HTMLDomElement,rect:Object,size:Object)=>Array參數(shù)及含義如下：◆point：鼠標(biāo)位置，如[20,40]?！魀arams：同formatter的參數(shù)相同?！鬱om：tooltip的dom對象?！魊ect：只有鼠標(biāo)在圖形上時有效，是一個用x,y,width,height四個屬性表達(dá)的圖形包圍盒?！魋ize：包括dom的尺寸和echarts容器的當(dāng)前尺寸，例如：{contentSize:[width,height],viewSize:[width,height]}。返回值如下：◆可以是一個表示tooltip位置的數(shù)組，數(shù)組值可以是絕對的像素值，也可以是相對百分比?！粢部梢允且粋€對象，如：{left:10,top:30}，或者{right:'20%',bottom:40}。示例代碼如下：position:function(point,params,dom,rect,size){//固定在頂部return[point[0],'10%'];}或者：position:function(pos,params,dom,rect,size){//鼠標(biāo)在左側(cè)時tooltip顯示到右側(cè)，鼠標(biāo)在右側(cè)時tooltip顯示到左側(cè)。varobj={top:60};obj[['left','right'][+(pos[0]<size.viewSize[0]/2)]]=5;returnobj;}③'inside'鼠標(biāo)所在圖形的內(nèi)部中心位置，只在trigger為'item'的時候有效。④'top'鼠標(biāo)所在圖形上側(cè)，只在trigger為'item'的時候有效。⑤'left'鼠標(biāo)所在圖形左側(cè)，只在trigger為'item'的時候有效。⑥'right'鼠標(biāo)所在圖形右側(cè)，只在trigger為'item'的時候有效。⑦'bottom'鼠標(biāo)所在圖形底側(cè)，只在trigger為'item'的時候有效。（17）tooltip.formatterstring或Function類型，用于設(shè)置提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。①字符串模板模板變量有{a},，{c}，z3jilz61osys，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。在trigger為'axis'的時候，會有多個系列的數(shù)據(jù)，此時可以通過{a0},{a1},{a2}這種后面加索引的方式表示系列的索引。不同圖表類型下的{a}，，{c}，z3jilz61osys含義不一樣。其中變量{a},,{c},z3jilz61osys在不同圖表類型下代表數(shù)據(jù)含義為：◆折線（區(qū)域）圖、柱狀（條形）圖、K線圖：{a}（系列名稱），（類目值），{c}（數(shù)值），z3jilz61osys（無）◆散點圖（氣泡）圖：{a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組），z3jilz61osys（無）◆地圖：{a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值），z3jilz61osys（無）◆餅圖、儀表盤、漏斗圖：{a}（系列名稱），（數(shù)據(jù)項名稱），{c}（數(shù)值），z3jilz61osys（百分比）更多其它圖表模板變量的含義可以見相應(yīng)的圖表的label.formatter配置項。示例：formatter:'{b0}:{c0}<br/>{b1}:{c1}'②回調(diào)函數(shù)回調(diào)函數(shù)格式如下：(params:Object|Array,ticket:string,callback:(ticket:string,html:string))=>string|HTMLElement|HTMLElement[]支持返回HTML字符串或者創(chuàng)建的DOM實例。第1個參數(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,//坐標(biāo)軸encode映射信息，//key為坐標(biāo)軸（如'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...//僅在雷達(dá)圖中使用。dimensionIndex:number,//數(shù)據(jù)圖形的顏色color:string,//餅圖/漏斗圖的百分比percent:number,//旭日圖中當(dāng)前節(jié)點的祖先節(jié)點（包括自身）treePathInfo:Array,//樹圖/矩形樹圖中當(dāng)前節(jié)點的祖先節(jié)點（包括自身）treeAncestors:Array}注：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]]]在trigger為'axis'的時候，或者tooltip被axisPointer觸發(fā)的時候，params是多個系列的數(shù)據(jù)數(shù)組。其中每項內(nèi)容格式同上，并且，{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,//坐標(biāo)軸encode映射信息，//key為坐標(biāo)軸（如'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...//僅在雷達(dá)圖中使用。dimensionIndex:number,//數(shù)據(jù)圖形的顏色color:string}注：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]]]第2個參數(shù)ticket是異步回調(diào)標(biāo)識，配合第3個參數(shù)callback使用。第3個參數(shù)callback是異步回調(diào)，在提示框浮層內(nèi)容是異步獲取的時候，可以通過callback傳入上述的ticket和html更新提示框浮層內(nèi)容。示例代碼如下：formatter:function(params,ticket,callback){$.get('detail?name='+,function(content){callback(ticket,toHTML(content));});return'Loading';}（18）tooltip.valueFormatterstring類型，從v5.3.0開始支持。用于設(shè)置tooltip中數(shù)值顯示部分的格式化回調(diào)函數(shù)?；卣{(diào)函數(shù)格式如下：(value:number|string,dataIndex:number)=>string自v5.5.0版本起提供dataIndex。示例代碼如下：//添加$前綴valueFormatter:(value)=>'$'+value.toFixed(2)（19）tooltip.backgroundColor='rgba(50,50,50,0.7)'Color類型，用于設(shè)置提示框浮層的背景顏色。（20）tooltip.borderColor='#333'Color類型，用于設(shè)置提示框浮層的邊框顏色。（21）tooltip.borderWidthnumber類型，用于設(shè)置提示框浮層的邊框?qū)?。?2）tooltip.padding=5number類型，用于設(shè)置提示框浮層內(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è)置四個方向的內(nèi)邊距padding:[5,//上10,//右5,//下10,//左]（23）tooltip.textStyleObject類型，用于設(shè)置提示框浮層的文本樣式。◆tooltip.textStyle.color='#fff'Color類型，用于設(shè)置文字的顏色?！魌ooltip.textStyle.fontStyle='normal'string類型，用于設(shè)置文字字體的風(fēng)格。其取值可選項為：'normal'、'italic'、'oblique'?！魌ooltip.textStyle.fontWeight='normal'string或number類型，用于設(shè)置文字字體的粗細(xì)。其取值可選項為：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…?！魌ooltip.textStyle.fontFamily='sans-serif'string類型，用于設(shè)置文字的字體系列。還可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…?！魌ooltip.textStyle.fontSize=14number類型，用于設(shè)置文字的字體大小?！魌ooltip.textStyle.lineHeightnumber類型，用于設(shè)置行高。rich中如果沒有設(shè)置lineHeight，則會取父層級的lineHeight。例如：{lineHeight:56,rich:{a:{//沒有設(shè)置`lineHeight`，則`lineHeight`為56}}}◆tooltip.textStyle.widthnumber