圖表樣式

3D柱狀圖是柱狀圖的一種，能夠以三維視角清晰智能地展示各類別之間和各類別內部的數據差異，支持不同的投影方式、不同的交互和特效展示。

配置面板

• 搜索配置：單擊配置面板右上角的搜索配置，可在搜索配置面板中輸入您需要搜索的配置項名稱，快速定位到該配置項，系統支持模糊匹配。詳情請參見搜索資產配置。

• 圖表尺寸：包括組件的寬度和高度，單位為px?？蓡螕?img src="https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/0429559951/p53660.png" alt="鎖定長寬比按鍵" width="20" height="16" data-tag="image" id="image-27i-ri3-kpa" placement="inline" class="image inline" rotation="0">圖標鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖后寬高比不受限制。

• 圖表位置：包括組件的橫坐標和縱坐標，單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離，縱坐標為組件左上角距離頁面上邊界的像素距離。

• 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。

  • 手動輸入角度值，控制組件的旋轉角度。

  • 拖動圖標內的黑點，控制組件的旋轉角度。

  • 單擊圖標，控制組件左右翻轉樣式。

  • 單擊圖標，控制組件上下翻轉樣式。

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

• 圖形

  參數	說明
  投影方式	柱狀圖投影方式，包括透視投影和正交投影。
  圖表尺寸	柱狀圖在三維場景中的寬度、高度和深度尺寸，配合距離配置可以得到最合適的展示尺寸。
  視角旋轉	柱狀圖的旋轉視角中心點，柱狀圖會圍繞這個中心點旋轉。
  中心點	柱狀圖在水平方向和垂直方向的旋轉角度。
  倒角	柱狀圖的倒角，包括尺寸和平滑度，單位為px。
  柱圖顏色	柱狀圖的顏色樣式，具體請參見顏色映射器使用說明。
  柱子標注	柱子的標注樣式，單擊圖標，控制柱子標注配置項的顯隱。 標注字段：標注的內容需要和數據面板中字段的內容對應，默認獲取z字段內容。 數值格式：設置標注的數值格式，可選默認、11（整數）、11.1（浮點數）、11.11（浮點數）、11%（百分比）、11.1%（百分比）、1,111（千分位）和1,111.1（千分位）。更多數據顯示格式請參見數據顯示格式說明，僅在標注字段選擇z時顯示。 前后綴：設置柱子標注的前后綴內容。 偏移：柱子標簽對于圖形的距離，單位為px。 文本樣式：柱子標注的文本樣式，包括文本的字體樣式、文字粗細、字號和顏色。

• 坐標軸：組件坐標軸包括x軸、y軸和z軸。

  • X軸

    • X軸顯示：打開開關，組件內X軸樣式顯示可見；關閉開關，組件內X軸樣式不可見。

    • 數據類型：X軸數據的類型，可選類目型和時間型。

    • 軸線：柱圖的X軸軸線樣式，包括線的類型、線的粗細和線的顏色，可單擊圖標控制X軸軸線樣式的顯隱。

    • 軸標題：柱圖的X軸軸標題樣式，可單擊圖標控制X軸軸標題的顯隱。

      參數	說明
      標題顯示	X軸軸標題顯示的文字內容。
      偏移	X軸軸標題的偏移值。
      文本樣式	X軸軸標題文本的字體樣式、文字粗細、字號和顏色。

    • 刻度線：柱圖的X軸刻度線樣式，包括刻度線的長度值、粗細值和顏色，可單擊圖標控制X軸刻度線樣式的顯隱。

    • 軸標簽：柱圖的X軸軸標簽樣式，可單擊圖標控制X軸軸標簽的顯隱。

      參數	說明
      標簽展示	標簽的展示樣式，包括：X軸軸標簽的數量、標簽的前后綴內容、標簽的偏移量。
      文本樣式	X軸軸標簽文本的字體樣式、文字粗細、字號和顏色。

    • 指示線：柱圖的X軸指示線樣式，可單擊圖標控制X軸指示線的顯隱。

      參數	說明
      線型樣式	X軸指示線的線型粗細和顏色。
      文本樣式	X軸指示線文本的字體樣式、文字粗細、字號和顏色。
      間距	X軸指示標簽距離中心點間距。

    • 網格線：柱圖的X軸網格線的樣式，包括網格線的線型樣式、粗細和顏色，可單擊圖標控制X軸網格線的顯隱。

  • Y軸：樣式與X軸一致，具體請參見X軸樣式配置。

  • Z軸

    • Z軸顯示：打開開關，組件內Z軸樣式顯示可見；關閉開關，組件內Z軸樣式不可見。

    • 顯示范圍：Z軸的數據最小值和最大值的顯示范圍。

      參數	說明
      最小值	Z軸的最小值，支持自定義輸入，也支持系統選擇數據最小值，取數據中的最小值。
      最大值	Z軸的最大值，支持自定義輸入，也支持系統選擇數據最大值，取數據中的最大值。

    • 軸線：柱圖的Z軸軸線樣式，包括線的類型、線的粗細和線的顏色，可單擊圖標控制Z軸軸線樣式的顯隱。

    • 軸標題：柱圖的Z軸軸標題樣式，可單擊圖標控制Z軸軸標題的顯隱。

      參數	說明
      標題顯示	Z軸軸標題顯示的文字內容。
      偏移	Z軸軸標題的偏移值。
      文本樣式	Z軸軸標題文本的字體樣式、文字粗細、字號和顏色。

    • 刻度線：柱圖的Z軸刻度線樣式，包括刻度線的長度值、粗細值和顏色，可單擊圖標控制Z軸刻度線樣式的顯隱。

    • 軸標簽：柱圖的Z軸軸標簽樣式，可單擊圖標控制Z軸軸標簽的顯隱。

      參數	說明
      顯示格式	Z軸標簽數值顯示格式的樣式，可選默認、11（整數）、11.1（浮點數）、11.11（浮點數）、11%（百分比）、11.1%（百分比）、1,111（千分位）和1,111.1（千分位）。更多數據顯示格式請參見數據顯示格式說明。
      標簽展示	標簽的展示樣式，包括：Z軸軸標簽的數量、標簽的前后綴內容、標簽的偏移量。
      文本樣式	Z軸軸標簽文本的字體樣式、文字粗細、字號和顏色。

    • 指示線：柱圖的Z軸指示線樣式，可單擊圖標控制Z軸指示線的顯隱。

      參數	說明
      線型樣式	Z軸指示線的線型粗細和顏色。
      文本樣式	Z軸指示線文本的字體樣式、文字粗細、字號和顏色。
      間距	Z軸指示標簽距離中心點間距。

    • 網格線：柱圖的Z軸網格線的樣式，包括網格線的線型樣式、粗細和顏色，可單擊圖標控制Z軸網格線的顯隱。

• 動畫：柱圖的自旋轉方向。

  • 自轉方向：柱圖的自轉方向，包括逆時針和順時針。

  • 自傳速度：柱圖的自轉速度，單位為ms。

• 交互

  • 鼠標：柱圖與鼠標交互操作。

    • 橫向旋轉：鼠標點擊時，柱圖橫向旋轉的靈敏度。

    • 縱向旋轉：鼠標點擊時，柱圖縱向旋轉的靈敏度。

    • 縮放：鼠標點擊時，柱圖縮放的靈敏度。

    • 運動慣性：鼠標進行旋轉，縮放等操作時的遲滯因子；在大于0的時候鼠標在停止操作后，視角仍會因為一定的慣性繼續運動（旋轉和縮放）。

  • 提示框：在預覽或發布頁面，鼠標懸浮或單擊柱圖時出現的提示框的樣式，單擊圖標可開啟或關閉提示框。

    參數	說明
    觸發方式	提示框被觸發的方式，可選，包括懸浮和點擊。
    標題間距	提示框中標題之間的間距，單位px。
    標題文本	提示框中標題文本的樣式，包括文字字體樣式、文字粗細、字號和顏色。
    內容顯示	當模式選擇為通用時展示。單擊右側的或圖標，添加或刪除一個提示框內容顯示系列。 單擊或圖標配置多個提示框內容顯示系列的排列樣式。單擊圖標，即可復制當前選中提示框內容顯示系列配置內容并新增一個同樣配置的提示框內容顯示系列。 字段名：提示框內容的字段名稱，需要和數據面板中的字段相匹配。 顯示名：提示框內容的顯示名稱。
    內容間距	提示框內容文本之間的間距，單位px。
    內容文本	提示框中內容文本的樣式，包括文字字體樣式、文字粗細、字號和顏色。
    彈窗背景	提示框的彈窗背景樣式。 背景邊距：提示框彈窗背景在水平和垂直方向的邊距值。 背景顏色：提示框的背景顏色。 邊框樣式：提示框邊框的樣式，包括邊框線的類型、圓角大小、線寬大小和邊框線的顏色。

  • 選中態：當柱子被選中狀態下的顏色，單擊圖標可開啟或關閉選中態樣式。

• 圖例

  參數	說明
  圖例開關	單擊圖標可開啟或關閉圖例樣式。
  方向	圖例的展示方向，包括橫向和縱向。
  水平對齊	圖例的水平對齊方式，包括左側、居中和右側。
  垂直對齊	圖例的垂直對齊方式，包括頂部、居中和底部。
  反轉	將圖例圖標反轉。
  文本樣式	顯示圖例文字的字體、文字粗細、字號和顏色。
  顯示維度	指定維度的映射，包括X、Y和Z軸。
  圖例類型	圖例的展示類型，包括分類和連續。
  分類圖例	當圖例類型選擇分類時展示。 圖例標記：圖例的標記形狀、寬度和高度。 圖例間距：圖例之間的間隔。包括組間間距和組內間距。 分割數：圖例的分割數量。
  連續圖例	當圖例類型選擇連續時展示。 滑軌尺寸：設置滑軌的寬度和高度。 滑塊最值：設置滑塊的最最小值和最大值。

• 特效

  參數	說明
  明暗效果	設置三維圖形的著色效果。包括只顯示顏色和明暗效果。
  光照效果	當明暗效果選擇明暗效果時展示。 主光源：設置光照強度、光照顏色、光源的水平垂直旋轉、投影和陰影質量。 環境光：設置環境光的光照強度和光源顏色。
  后期效果	高光：設置光暈的強度。 景深：設置景深大小和模糊半徑。 說明 大小：即鏡頭的F值，值越小景深越淺。

數據面板（默認模式）

配置字段說明

數據面板（分析模式）

BI分析數據配置面板中的詳細操作說明，請參見BI分析模式數據面板功能介紹。

配置字段說明

交互面板

打開開關，開啟組件交互功能。當單擊3D柱狀圖的柱子時，會觸發數據請求拋出變量，動態加載不同柱子的數據。默認拋出數據中的x、y和z值，具體配置請參見如何配置數字翻牌器組件的回調ID。

藍圖編輯器交互配置

1. 在畫布編輯器頁面，右鍵單擊組件，選擇導出到藍圖編輯器。
2. 單擊頁面左上角的圖標。

3. 選擇導入節點頁簽下的3D柱狀圖組件拖拽至主畫布中，如下圖所示，為3D柱狀圖的藍圖編輯器配置參數。

   • 事件

     事件	說明
     當3D柱狀圖接口請求完成時	數據接口請求返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
     當3D柱狀圖接口請求失敗時	數據接口請求失敗時（請求失敗的情況可能是：網絡問題或接口報錯等）返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
     當數據項選中時	當選中3D柱狀圖的柱子時拋出的事件，同時拋出該柱子對應的數據項。

   • 動作

     動作	說明
     請求3D柱狀圖接口	重新請求服務端數據，上游數據處理節點或圖層節點拋出的數據將作為參數。例如3D柱狀圖配置了API數據源為https://api.test，傳到請求3D柱狀圖接口動作的數據為{ id: '1'}，則最終請求接口為https://api.test?id=1。
     導入3D柱狀圖接口	按組件繪制格式處理數據后，導入組件，重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
     更新組件配置	動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊復制配置到剪貼板，獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。
     顯示	顯示組件，參考數據示例如下。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     隱藏	隱藏組件，參考數據示例如下。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     切換顯隱	切換組件顯示或者隱藏，參考數據示例如下。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     移動	將組件移動到指定位置。參考數據示例如下。 return{ // 移動方式。絕對定位：to，相對定位：by。默認值：to。 "positionType": "to", // 指定位置。x坐標，y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線?？蛇x值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }