圖表樣式

箭頭標(biāo)繪是媒體組件的一種，支持為可視化應(yīng)用或可視化應(yīng)用的某個(gè)模塊添加自定義樣式的箭頭元素，能夠使可視化應(yīng)用展示更加美觀。

配置面板

• 搜索配置：?jiǎn)螕?b data-tag="uicontrol" id="uicontrol-siu-g4m-0i6" class="uicontrol">配置面板右上角的搜索配置，可在搜索配置面板中輸入您需要搜索的配置項(xiàng)名稱(chēng)，快速定位到該配置項(xiàng)，系統(tǒng)支持模糊匹配。詳情請(qǐng)參見(jiàn)搜索資產(chǎn)配置。
• 圖表尺寸：包括組件的寬度和高度，單位為px?？蓡螕?img data-tag="image" id="image-27i-ri3-kpa" height="18" src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/0429559951/p53660.png" alt="鎖定長(zhǎng)寬比按鍵" placement="inline" class="image inline">圖標(biāo)鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進(jìn)行解鎖，解鎖后寬高比不受限制。
• 圖表位置：包括組件的橫坐標(biāo)和縱坐標(biāo)，單位為px。橫坐標(biāo)為組件左上角距離頁(yè)面左邊界的像素距離，縱坐標(biāo)為組件左上角距離頁(yè)面上邊界的像素距離。
• 旋轉(zhuǎn)角度：以組件的中心為中心點(diǎn)，進(jìn)行旋轉(zhuǎn)，單位為度（°）。
  • 手動(dòng)輸入角度值，控制組件的旋轉(zhuǎn)角度。
  • 拖動(dòng)圖標(biāo)內(nèi)的黑點(diǎn)，控制組件的旋轉(zhuǎn)角度。
  • 單擊圖標(biāo)，控制組件左右翻轉(zhuǎn)樣式。
  • 單擊圖標(biāo)，控制組件上下翻轉(zhuǎn)樣式。
• 不透明度：取值范圍為0~1。為0時(shí)，圖表隱藏；為1時(shí)，圖表全部顯示。默認(rèn)為1。

• 線樣式：箭頭標(biāo)繪中線條的樣式。

  參數(shù)	說(shuō)明
  左側(cè)高度比例	組件左側(cè)線條端占組件邊框高度的比例值，取值范圍在0~1之間，比例越大線條端點(diǎn)越低。
  右側(cè)高度比例	組件右側(cè)線條端占組件邊框高度的比例值，取值范圍在0~1之間，比例越大線條端點(diǎn)越低。
  弧線粗細(xì)	線條弧線的粗細(xì)值，取值范圍在0~20之間，單位為px。數(shù)值越大弧線越粗。
  線型	線條曲線的樣式。
  端點(diǎn)形狀	線條中的端點(diǎn)的形狀選擇，可選，包括round和butt。
  虛線	線條中端點(diǎn)和端點(diǎn)之間的間隔組成的虛線樣式。
  動(dòng)畫(huà)方向	線條的動(dòng)畫(huà)走向，可選，包括向左和向右。
  虛線速度	虛線的運(yùn)動(dòng)速度，取值范圍在0~300之間，取值越大，速度越快。
  填充顏色	線條的填充顏色，請(qǐng)參見(jiàn)顏色選擇器說(shuō)明進(jìn)行修改。

• 箭頭樣式：箭頭標(biāo)繪中箭頭的樣式。

  參數(shù)	說(shuō)明
  顯示左箭頭	打開(kāi)開(kāi)關(guān)，顯示左側(cè)箭頭樣式；關(guān)閉開(kāi)關(guān)，隱藏左側(cè)箭頭樣式。
  顯示右箭頭	打開(kāi)開(kāi)關(guān)，顯示右側(cè)箭頭樣式；關(guān)閉開(kāi)關(guān)，隱藏右側(cè)箭頭樣式。
  寬度	箭頭的寬度值，取值范圍在0~100之間，單位為px。取值越大，箭頭寬度越大。
  高度	箭頭的高度值，取值范圍在0~100之間，單位為px。取值越大，箭頭高度越大。
  填充顏色	箭頭的填充顏色，請(qǐng)參見(jiàn)顏色選擇器說(shuō)明進(jìn)行修改。

• 文本樣式：箭頭標(biāo)繪中文本的樣式。

  參數(shù)	說(shuō)明
  顯示	打開(kāi)開(kāi)關(guān)，顯示文本樣式 ；關(guān)閉開(kāi)關(guān)，隱藏文本樣式。
  文字位置	文本文字的擺放樣式，可選，包括文字在上和文字在下。
  文字與線間隔	文字與線之間的平行距離，取值范圍為0~100，單位為px。數(shù)值越大，間隔距離越大。
  動(dòng)畫(huà)方向	文本動(dòng)畫(huà)播放的方向，可選，包括向左向右。
  動(dòng)畫(huà)時(shí)間間隔	文字播放完一遍動(dòng)畫(huà)的時(shí)間，取值范圍為0~10之間，單位為秒。數(shù)值越大，動(dòng)畫(huà)播放一圈所用的時(shí)間越長(zhǎng)。
  字號(hào)	文本的字號(hào)大小。
  字體顏色	文本的字體顏色，請(qǐng)參見(jiàn)顏色選擇器說(shuō)明進(jìn)行修改。
  字體粗細(xì)	字體的粗細(xì)。
  字體	字體的樣式，默認(rèn)微軟雅黑。

數(shù)據(jù)面板

配置字段說(shuō)明

表 1. 配置項(xiàng)說(shuō)明

配置項(xiàng)	說(shuō)明
受控模式	打開(kāi)開(kāi)關(guān)，資產(chǎn)初始化狀態(tài)下不請(qǐng)求數(shù)據(jù)，僅通過(guò)回調(diào)ID或藍(lán)圖編輯器配置的方法發(fā)起請(qǐng)求數(shù)據(jù)；關(guān)閉開(kāi)關(guān)，可以使用自動(dòng)更新請(qǐng)求數(shù)據(jù)。開(kāi)關(guān)默認(rèn)為關(guān)閉狀態(tài)。
自動(dòng)更新請(qǐng)求	選中后可以設(shè)置動(dòng)態(tài)輪詢(xún)，還可以手動(dòng)輸入輪詢(xún)的時(shí)間頻次。取消選中后則不會(huì)自動(dòng)更新，需要手動(dòng)刷新頁(yè)面，或通過(guò)藍(lán)圖編輯器和回調(diào)ID事件來(lái)觸發(fā)請(qǐng)求更新數(shù)據(jù)。
數(shù)據(jù)源	單擊配置數(shù)據(jù)源，可在設(shè)置數(shù)據(jù)源面板中修改數(shù)據(jù)源類(lèi)型和數(shù)據(jù)查詢(xún)代碼、預(yù)覽數(shù)據(jù)源返回結(jié)果以及查看數(shù)據(jù)響應(yīng)結(jié)果，詳情請(qǐng)參見(jiàn)配置資產(chǎn)數(shù)據(jù)。
數(shù)據(jù)過(guò)濾器	數(shù)據(jù)過(guò)濾器提供數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換、篩選和一些簡(jiǎn)單的計(jì)算功能。單擊添加過(guò)濾器，可在設(shè)置數(shù)據(jù)源面板配置數(shù)據(jù)過(guò)濾器腳本，詳情請(qǐng)參見(jiàn)過(guò)濾器使用說(shuō)明。
數(shù)據(jù)響應(yīng)結(jié)果	展示數(shù)據(jù)請(qǐng)求的響應(yīng)結(jié)果。當(dāng)數(shù)據(jù)源發(fā)生改變時(shí)，可單擊右側(cè)的圖標(biāo)，實(shí)時(shí)查看數(shù)據(jù)響應(yīng)結(jié)果。

交互面板

此組件沒(méi)有交互事件。

藍(lán)圖編輯器交互配置

1. 在畫(huà)布編輯器頁(yè)面，右鍵單擊組件，選擇導(dǎo)出到藍(lán)圖編輯器。
2. 單擊頁(yè)面左上角的圖標(biāo)。

3. 在藍(lán)圖編輯器配置頁(yè)面，單擊導(dǎo)入節(jié)點(diǎn)欄內(nèi)的箭頭標(biāo)繪組件，在畫(huà)布中可以看到如下圖所示的箭頭標(biāo)繪的藍(lán)圖編輯器配置參數(shù)。

   • 事件

     事件	說(shuō)明
     當(dāng)數(shù)據(jù)請(qǐng)求完成時(shí)	數(shù)據(jù)接口請(qǐng)求返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件，同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
     當(dāng)數(shù)據(jù)請(qǐng)求失敗時(shí)	數(shù)據(jù)接口請(qǐng)求失敗時(shí)（請(qǐng)求失敗的情況可能是：網(wǎng)絡(luò)問(wèn)題或接口報(bào)錯(cuò)等）返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件，同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。

   • 動(dòng)作

     動(dòng)作	說(shuō)明
     請(qǐng)求數(shù)據(jù)	重新請(qǐng)求服務(wù)端數(shù)據(jù)，上游數(shù)據(jù)處理節(jié)點(diǎn)或圖層節(jié)點(diǎn)拋出的數(shù)據(jù)將作為參數(shù)。例如箭頭標(biāo)繪配置了API數(shù)據(jù)源為https://api.test，傳到請(qǐng)求數(shù)據(jù)接口動(dòng)作的數(shù)據(jù)為{ id: '1'}，則最終請(qǐng)求接口為https://api.test?id=1。
     導(dǎo)入數(shù)據(jù)	按組件繪制格式處理數(shù)據(jù)后，導(dǎo)入組件，重新繪制。不需要重新請(qǐng)求服務(wù)端數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
     更新組件配置	動(dòng)態(tài)更新組件的樣式配置。需要先在組件的配置面板中，單擊復(fù)制配置到剪貼板，獲取組件配置數(shù)據(jù)。再根據(jù)需要在藍(lán)圖編輯器配置頁(yè)面的數(shù)據(jù)處理節(jié)點(diǎn)中更改對(duì)應(yīng)樣式的字段值。
     顯示	顯示組件，參考數(shù)據(jù)示例如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     隱藏	隱藏組件，參考數(shù)據(jù)示例如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     切換顯隱狀態(tài)	切換組件顯示或者隱藏，參考數(shù)據(jù)示例如下。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動(dòng)	將組件移動(dòng)到指定位置，參考數(shù)據(jù)示例如下。 return { // 移動(dòng)方式。絕對(duì)定位：to，相對(duì)定位：by。默認(rèn)值：to。 "positionType": "to", // 指定位置。x坐標(biāo)，y坐標(biāo)。 "attr": { "x": 0, "y": 0 }, // 動(dòng)畫(huà)方式。 "animation": { "enable": false, // 動(dòng)畫(huà)延時(shí)。 "animationDuration": 1000, // 動(dòng)畫(huà)曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } };