圖表樣式

3D環(huán)圖是餅圖的一種，能夠清晰智能地展示各類別在環(huán)圈內(nèi)的占比情況。3D環(huán)圖支持圖表內(nèi)外多位置的標(biāo)簽展示，支持指標(biāo)卡樣式展示，支持自定義多系列數(shù)據(jù)配置。

樣式面板

• 搜索配置：單擊樣式面板右上角的搜索配置項(xiàng)圖標(biāo)，可在搜索配置面板中輸入您需要搜索的配置項(xiàng)名稱，快速定位到該配置項(xiàng)，系統(tǒng)支持模糊匹配。詳情請(qǐng)參見搜索配置項(xiàng)。

• • 尺寸：包括組件的寬度和高度，單位為px。

  • 定位：包括組件的橫坐標(biāo)和縱坐標(biāo)，單位為px。橫坐標(biāo)為組件左上角距離頁面左邊界的像素距離，縱坐標(biāo)為組件左上角距離頁面上邊界的像素距離。

  • 旋轉(zhuǎn)：以組件的中心為中心點(diǎn)，進(jìn)行旋轉(zhuǎn)，單位為度（°）。

    • 手動(dòng)輸入角度值，控制組件的旋轉(zhuǎn)角度。

    • 單擊圖標(biāo)，控制組件左右翻轉(zhuǎn)樣式。

    • 單擊圖標(biāo)，控制組件上下翻轉(zhuǎn)樣式。

  • 不透明度：取值范圍為0~1。為0時(shí)，圖表隱藏；為1時(shí)，圖表全部顯示。默認(rèn)為1。

• 圖形

  • 投影方式：環(huán)圖3D的投影方式，可選透視投影和正交投影。

  • 視覺距離：環(huán)圖3D視覺的距離，用于調(diào)節(jié)環(huán)圖的整體大小，單位默認(rèn)px。

  • 旋轉(zhuǎn)角度：環(huán)圖在水平方向左右旋轉(zhuǎn)和垂直方向上下旋轉(zhuǎn)的角度值。單擊圖標(biāo)控制旋轉(zhuǎn)角度的顯隱。

    說明

    旋轉(zhuǎn)角度打開后，對(duì)鼠標(biāo)交互中的旋轉(zhuǎn)有影響。

  • 內(nèi)外徑比例：拖動(dòng)滑塊設(shè)置環(huán)圖內(nèi)外徑比例值。

  • 高度映射：設(shè)置3D環(huán)圖的高度映射，當(dāng)開啟高度映射開關(guān)時(shí)，環(huán)圖各部分高度根據(jù)數(shù)據(jù)中的value值進(jìn)行映射；當(dāng)關(guān)閉高度映射開關(guān)時(shí)，環(huán)圖各部分高度都相等。

  • 高度比例：設(shè)置3D環(huán)圖的高度比例。

  • 環(huán)圖顏色：設(shè)置3D環(huán)圖的顏色，請(qǐng)參見顏色映射器使用說明，配置不同環(huán)形餅塊的映射顏色樣式。

  • 小數(shù)合并：限制展現(xiàn)的切片數(shù)量，并將剩下的切片合并成一個(gè)總的切片，同時(shí)可以設(shè)置合并后的分類名。單擊圖標(biāo)可開啟或關(guān)閉小數(shù)合并 。

  • 環(huán)圖標(biāo)注：環(huán)圖的標(biāo)注樣式，單擊圖標(biāo)，控制環(huán)圖標(biāo)注配置項(xiàng)的顯隱。

    參數(shù)	說明
    類型	標(biāo)注的數(shù)據(jù)類型和展示類型，數(shù)據(jù)類型可選百分比和默認(rèn)值，展示類型可選普通型和蜘蛛。 說明 當(dāng)數(shù)據(jù)量超過3條時(shí)， 建議標(biāo)注的展示類型轉(zhuǎn)化為普通型。
    標(biāo)注字段	環(huán)圖的標(biāo)注字段，可選name+value、name和value。
    分隔符	設(shè)置環(huán)圖標(biāo)柱的分隔符號(hào)，輸入br可以折行。僅在環(huán)圖的標(biāo)柱字段選擇name+value時(shí)可配置。
    小數(shù)位	設(shè)置標(biāo)注字段的小數(shù)位，單位為位。
    行高	設(shè)置標(biāo)注字段的行高值，單位px。僅在環(huán)圖的標(biāo)柱字段選擇name+value時(shí)可配置。
    間距	設(shè)置標(biāo)注字段距離環(huán)圖的間距值，單位px。
    文本樣式	標(biāo)柱字段的文本樣式，包括字體樣式、文字粗細(xì)、字號(hào)和顏色。

• 動(dòng)畫：3D環(huán)圖的動(dòng)畫樣式。

  • 自動(dòng)旋轉(zhuǎn)：打開開關(guān)，環(huán)圖即可自動(dòng)旋轉(zhuǎn)，關(guān)閉開關(guān)，環(huán)圖不旋轉(zhuǎn)。

    說明

    自動(dòng)旋轉(zhuǎn)配置只支持標(biāo)注展示類型為普通型。

  • 旋轉(zhuǎn)方向：設(shè)置3D環(huán)圖動(dòng)畫的旋轉(zhuǎn)方向，可選逆時(shí)針和順時(shí)針，僅在打開自動(dòng)旋轉(zhuǎn)開關(guān)時(shí)可配置。

  • 旋轉(zhuǎn)速度：設(shè)置3D環(huán)圖動(dòng)畫的旋轉(zhuǎn)速度，僅在打開自動(dòng)旋轉(zhuǎn)開關(guān)時(shí)可配置。

• 交互

  • 鼠標(biāo)交互：支持通過鼠標(biāo)操作實(shí)現(xiàn)旋轉(zhuǎn)、縮放和移入放大等多個(gè)交互，其中的旋轉(zhuǎn)和縮放只支持標(biāo)注展示類型為普通型。

  • 提示框：在預(yù)覽或發(fā)布頁面，鼠標(biāo)懸浮或單擊環(huán)圖時(shí)出現(xiàn)的提示框的樣式，單擊圖標(biāo)，控制提示框配置項(xiàng)的顯隱。

    參數(shù)	說明
    觸發(fā)方式	提示框被觸發(fā)的方式，可選，包括懸浮和點(diǎn)擊。
    顯示位置	提示框顯示的位置樣式，可選，包括上、下、左和右。
    標(biāo)題間距	提示框中標(biāo)題之間的間距，單位px。
    標(biāo)題文本	提示框中標(biāo)題文本的樣式，包括文字字體樣式、文字粗細(xì)、字號(hào)和顏色。
    內(nèi)容文本	提示框中內(nèi)容文本的樣式，包括文字字體樣式、文字粗細(xì)、字號(hào)和顏色。
    彈窗背景	提示框的彈窗背景樣式。 背景邊距：提示框彈窗背景在水平和垂直方向的邊距值。 背景顏色：提示框的背景顏色。 邊框樣式：提示框邊框的樣式，包括邊框線的線寬大小和邊框線的顏色。

• 圖例：環(huán)圖的圖例樣式。

  參數(shù)	說明
  圖例開關(guān)	打開開關(guān)，可配置圖例樣式；關(guān)閉開關(guān)，無法配置圖例樣式。
  方向	圖例的方向，可選橫向和縱向。
  水平對(duì)齊	圖例在水平方向的對(duì)齊樣式，可選左側(cè)、居中和右側(cè)。
  垂直對(duì)齊	圖例在垂直方向的對(duì)齊樣式，可選頂部、居中和底部。
  文本樣式	圖例文本的字體樣式、文字粗細(xì)、字號(hào)和顏色。
  分類圖例	分類型圖例的樣式。 圖例標(biāo)記：圖例標(biāo)記的形狀和尺寸之大小。 圖例間距：不同分類圖例之間在橫向和縱向的距離。
  允許翻頁	打開開關(guān)，開啟圖例翻頁功能，可配置圖例數(shù)量過多需要翻頁顯示時(shí)的頁碼樣式和箭頭樣式；關(guān)閉開關(guān)，圖例內(nèi)容全部展示在一頁中，無法翻頁顯示。 頁碼樣式：翻頁頁碼的樣式，包括頁碼的字體、文字的粗細(xì)、字號(hào)的大小和顏色。 箭頭樣式：翻頁樣式內(nèi)箭頭的尺寸大小、箭頭默認(rèn)顏色及禁用顏色。

• 特效：展示三維圖形的著色效果。

  參數(shù)	說明
  明暗效果	可選，包括只顯示顏色和明暗效果。
  光照效果	當(dāng)明暗效果選擇明暗效果時(shí)展示。 主光源：設(shè)置主光源的光照強(qiáng)度、光照顏色、水平旋轉(zhuǎn)和垂直旋轉(zhuǎn)、投影和陰影質(zhì)量。 環(huán)境光：設(shè)置主光源的光照強(qiáng)度和光照顏色。
  后期效果	設(shè)置三維圖形的后期效果。 高光：設(shè)置后期效果中高光的光暈強(qiáng)度。 景深：設(shè)置后期效果中景深的大小和模糊半徑。

• 條件：條件樣式說明。

  條件樣式：單擊右側(cè)的或圖標(biāo)，添加或刪除一個(gè)條件樣式。 單擊或圖標(biāo)配置多個(gè)條件樣式的排列樣式。單擊圖標(biāo)，即可復(fù)制當(dāng)前選中條件樣式配置并新增一個(gè)同樣配置的條件樣式。具體每個(gè)條件樣式配置說明，請(qǐng)參見條件樹使用說明。

  扇形顏色：打開開關(guān)，配置該系列條件樣式中的扇形顏色；關(guān)閉開關(guān)，無法配置該系列條件下的扇形顏色。

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

高級(jí)面板

藍(lán)圖交互

1. 單擊頁面左上角的圖標(biāo)，進(jìn)入藍(lán)圖頁面。

2. 在圖層節(jié)點(diǎn)頁簽下，添加當(dāng)前組件至主畫布中。

3. 查看藍(lán)圖配置參數(shù)。

   • 事件

     事件	說明
     當(dāng)3D環(huán)圖接口請(qǐng)求完成時(shí)	數(shù)據(jù)接口請(qǐng)求返回并經(jīng)過過濾器處理后拋出的事件，同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見畫布編輯器中組件右側(cè)配置面板數(shù)據(jù)源頁簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
     當(dāng)點(diǎn)擊環(huán)圖時(shí)	當(dāng)單擊3D環(huán)圖的環(huán)形塊時(shí)拋出的事件，同時(shí)拋出該扇形對(duì)應(yīng)的數(shù)據(jù)項(xiàng)。
     當(dāng)圖例被點(diǎn)擊時(shí)	當(dāng)單擊3D環(huán)圖的圖例時(shí)拋出的事件，同時(shí)拋出該圖例對(duì)應(yīng)的數(shù)據(jù)項(xiàng)。

   • 動(dòng)作

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