全部產品
Search

搜尋本產品

    DataV：Echarts 玫瑰圖

    文件中心

    DataV：Echarts 玫瑰圖

    更新時間：Mar 28, 2026

    本文介紹Echarts 玫瑰圖的圖表樣式和配置面板的功能。

    圖表樣式

    image

    配置面板image

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

    • 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊鎖定長寬比按鍵表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。
    • 圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
    • 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
      • 手動輸入角度值，控制組件的旋轉角度。
      • 拖動圓圈旋轉控製圖標表徵圖內的黑點，控制組件的旋轉角度。
      • 單擊左右翻轉表徵圖表徵圖，控制組件左右翻轉樣式。
      • 單擊上下翻轉表徵圖表徵圖，控制組件上下翻轉樣式。
    • 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。

    • 網格：單擊右側的眼睛表徵圖顯示網格樣式。網格

      • 左側：網格與組件左側邊界的距離，預設為 3%。支援以下幾種輸入：

        • 具體像素值，例如 20。

        • 相對於容器高寬的百分比，例如 20%。

        • left，center 或 right，組件會根據相應的位置自動對齊。

      • 頂部：網格與組件上側邊界的距離，預設為 60。支援以下幾種輸入：

        • 具體像素值，例如 20。

        • 相對於容器高寬的百分比，例如 20%。

        • left，center 或 right，組件會根據相應的位置自動對齊。

      • 右側：網格與組件右側邊界的距離，預設為 4%。支援以下幾種輸入：

        • 具體像素值，例如 20。

        • 相對於容器高寬的百分比，例如 20%。

        • left，center 或 right，組件會根據相應的位置自動對齊。

      • 底部：網格與組件下側邊界的距離，預設為 3%。支援以下幾種輸入：

        • 具體像素值，例如 20。

        • 相對於容器高寬的百分比，例如 20%。

        • left，center 或 right，組件會根據相應的位置自動對齊。

      • 寬度：網格的寬度，值預設值為 auto，寬度自適應。

      • 高度：網格的高度，值預設值為 auto，高度自適應。

      • 調適型配置：勾選後，柱狀圖進行調適型配置；去勾選，柱狀圖根據您配置的樣式進行布局。

      • 背景色：單擊下拉式清單，選擇網格背景顏色的填充樣式，包括顏色填充和漸層填充。參考顏色選取器說明，修改網格的背景顏色，預設透明。

      • 邊框色：單擊下拉式清單，選擇網格邊框顏色的填充樣式，包括顏色填充和漸層填充。參考顏色選取器說明，修改網格的邊框顏色，預設透明。

      • 邊框粗細：單擊+或-號，或手動輸入數值，調整網格邊框粗細。

    • 視覺映射：視覺映射組件用於進行視覺編碼，即將資料對應到視覺元素。

      • 開啟：勾選後開啟視覺映射。

      • 最小值：自訂視覺映射允許的最小值。

      • 最大值：自訂視覺映射允許的最大值。

    • 提示框：單擊右側的眼睛表徵圖顯示提示框。提示框

      • 提示標題：滑鼠hover時，顯示的提示標題。

      • 座標軸指標

        • 類型：指標類型，可選 直線指標、陰影指標或十字準星指標。

        • 自動吸附：勾選後，座標軸指標自動吸附到點上。這個功能在數值軸和時間軸上比較有意義，可以自動尋找細小的數值點。

        • 標籤：單擊右側的眼睛表徵圖顯示座標軸指標的標籤。

          • 小數精度：文字標籤中數值的小數點精度，預設根據當前軸的值自動判斷，也可以指定一個整數值，如 2，表示保留兩位小數。

          • 外間距：勾選後，座標軸指標標籤與座標軸之間有一定間距。去勾選，座標軸指標標籤與座標軸之間沒有間距。

          • 文本樣式

            • 顏色：參考顏色選取器說明，修改座標軸指標標籤文本的顏色。

            • 字型樣式：座標軸指標標籤文本的字型風格。

            • 字型粗細：座標軸指標標籤文本的字型粗細。

            • 字型：座標軸指標標籤文本的字型系列。

            • 字型大小：座標軸指標標籤文本的字型大小。

          • 背景色：參考顏色選取器說明，修改座標軸指標文字標籤的背景顏色。

          • 邊框色：參考顏色選取器說明，修改座標軸指標文字標籤的邊框顏色。

          • 邊框粗細：座標軸指標文字標籤的邊框粗細。

          • 軸線樣式

            • 顏色：參考顏色選取器說明，修改軸線的顏色。

            • 寬度：單擊+或-號，或手動輸入數值，修改軸線的寬度。

            • 類型：座標軸軸線的類型。可選，包括實線和虛線。

            • 透明度：單擊+或-號，或手動輸入數值，修改軸線的透明度。範圍為 [0,1]。

          • 陰影樣式

            • 顏色：參考顏色選取器說明，修改陰影的顏色。

            • 透明度：單擊+或-號，或手動輸入數值，修改陰影的透明度。範圍為 [0,1]。

          • 十字準星樣式

            • 顏色：參考顏色選取器說明，修改十字準星的顏色。

            • 寬度：單擊+或-號，或手動輸入數值，修改十字準星的寬度。

            • 類型：十字準星的類型。可選，包括實線和虛線。

            • 透明度：單擊+或-號，或手動輸入數值，修改十字準星的透明度。範圍為 [0,1]。

      • 觸發條件：自訂觸發類型，可選，包括滑鼠移動觸發、滑鼠點擊觸發和滑鼠移動點擊同時觸發。

      • 背景色：參考顏色選取器說明，修改提示框的背景顏色。

      • 邊框色：參考顏色選取器說明，修改提示框的邊框顏色。

      • 邊框粗細：單擊+或-號，或手動輸入數值，修改背景框的邊框粗細。

      • 內邊距：單擊+或-號，或手動輸入數值，修改背景框的內邊距，單位px，預設各方向內邊距為5。

      • 文本樣式

        • 顏色：參考顏色選取器說明，修改提示框文本的顏色。

        • 字型樣式：提示框文本的字型風格。

        • 字型粗細：提示框文本的字型粗細。

        • 字型：提示框文本的字型系列。

        • 字型大小：提示框文本的字型大小。

    • 系列系列

      • 圖例聯動高亮：勾選後，啟動圖例hover時的聯動高亮。

      • 懸浮動畫：勾選後，開啟滑鼠hover時的動畫效果。

      • 選擇模式：單擊右側的眼睛表徵圖顯示選擇模式。

      • 選中位移：單擊+或-號，或手動輸入數值，修改選中扇區時元素的位置距離。

      • 順時針：扇區按照資料升序順時針依次排列。

      • 起始角度：單擊+或-號，或手動輸入數值，修改扇區的起始角度。

      • 最小角度：單擊+或-號，或手動輸入數值，修改扇區的最小角度。

      • 南丁格爾：單擊右側的眼睛表徵圖顯示南丁格爾模式。

      • 防標籤重疊：單擊右側的眼睛表徵圖顯示防標籤重疊模式

      • 顯示零扇區：單擊右側的眼睛表徵圖顯示零扇區。

      • 靜態：勾選後，座標軸為靜態無法互動。

      • 標籤

        • 普通項：單擊右側的眼睛表徵圖顯示普通項（沒有響應滑鼠事件的柱子）標籤文本。

          • 文本樣式

            • 顏色：參考顏色選取器說明，修改普通項標籤文本的顏色。

            • 字型樣式：普通項標籤文本的字型風格。

            • 字型粗細：普通項標籤文本的字型粗細。

            • 字型：普通項標籤文本的字型系列。

            • 字型大小：普通項標籤文本的字型大小。

        • 重點項：單擊右側的眼睛表徵圖顯示重點項（響應滑鼠事件的柱子）標籤文本。

          • 文本樣式

            • 顏色：參考顏色選取器說明，修改重點項標籤文本的顏色。

            • 字型樣式：重點項標籤文本的字型風格。

            • 字型粗細：重點項標籤文本的字型粗細。

            • 字型：重點項標籤文本的字型系列。

            • 字型大小：重點項標籤文本的字型大小。

      • 標籤引導線

        • 普通項：單擊右側的眼睛表徵圖顯示普通項（沒有響應滑鼠事件的柱子）標籤文本。

          • 長度：單擊+或-號，或手動輸入數值，修改標籤引導線的長度。

          • 第二段長度：單擊+或-號，或手動輸入數值，修改標籤引導線的第二段長度。

          • 平滑曲線：單擊+或-號，或手動輸入數值，修改平滑曲線的平滑程度。

          • 軸線樣式

            • 顏色：參考顏色選取器說明，修改軸線的顏色。

            • 寬度：單擊+或-號，或手動輸入數值，修改軸線的寬度。

            • 類型：座標軸軸線的類型。可選，包括實線和虛線。

            • 透明度：單擊+或-號，或手動輸入數值，修改軸線的透明度。範圍為 [0,1]。

        • 重點項：單擊右側的眼睛表徵圖顯示重點項（響應滑鼠事件的柱子）標籤文本。

          • 軸線樣式

            • 顏色：參考顏色選取器說明，修改軸線的顏色。

            • 寬度：單擊+或-號，或手動輸入數值，修改軸線的寬度。

            • 類型：座標軸軸線的類型。可選，包括實線和虛線。

            • 透明度：單擊+或-號，或手動輸入數值，修改軸線的透明度。範圍為 [0,1]。

      • 元素樣式

        • 普通項

          • 預設顏色：單擊右側的眼睛表徵圖顯示預設顏色模式。

          • 顏色：參考顏色選取器說明，修改普通項元素的顏色。

          • 邊框色：參考顏色選取器說明，修改普通項元素的邊框色。

          • 邊框粗細：單擊+或-號，或手動輸入數值，修改普通項元素的邊框粗細。

          • 邊框樣式：自訂邊框的描邊類型，可選，包括實線和虛線。

          • 透明度：單擊+或-號，或手動輸入數值，修改普通項元素的透明度，範圍為 [0,1]。

        • 重點項

          • 顏色：參考顏色選取器說明，修改重點項元素的背景顏色。

          • 邊框色：參考顏色選取器說明，修改重點項元素的邊框顏色。

          • 邊框粗細：單擊+或-號，或手動輸入數值，修改重點項元素的邊框粗細。

          • 邊框樣式：自訂邊框的描邊類型，可選，包括實線和虛線。

          • 透明度：單擊+或-號，或手動輸入數值，修改普通項元素的透明度，範圍為 [0,1]。

    • 動畫：勾選後，開啟動畫效果。

    資料面板

    image

    配置欄位說明

    欄位

    說明

    x

    用於配置玫瑰圖中每個軸向的類目，即x軸的值。

    y

    用於配置玫瑰圖中每個軸向的類目，即y軸的值。

    互動面板

    互動

    互動說明

    互動

    說明

    當點擊餅圖時

    選中啟用，開啟組件互動功能。玫瑰圖組件擁有互動配置，當單擊選中某個資料項目時拋出回調值，預設拋出資料中的value和name欄位。具體配置請參見組件回調ID配置。

    當選擇餅圖時

    選中啟用，開啟組件互動功能。玫瑰圖組件擁有互動配置，當單擊某個圖例時拋出回調值，預設拋出資料中的selected和name欄位。具體配置請參見組件回調ID配置。

    藍圖編輯器互動配置

    1. 在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。

    2. 單擊頁面左上方的藍圖表徵圖表徵圖。

    3. 在藍圖編輯器配置頁面，單擊匯入節點欄內的玫瑰圖組件，在畫布中可以看到如下圖所示的玫瑰圖的藍圖編輯器配置參數。藍圖

      • 事件

        事件

        說明

        當資料介面請求完成時

        資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

        當資料介面請求失敗時

        資料介面請求失敗時（請求失敗的情況可能是：網路問題或介面報錯等）返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

        當點擊餅圖時

        當單擊玫瑰圖的扇區時拋出的事件，同時拋出該扇區對應的資料項目。

        當選擇餅圖時

        當選擇餅圖時拋出的事件，同時拋出該扇區對應的資料項目。

      • 動作

        動作

        說明

        請求資料介面

        重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如玫瑰圖配置了API資料來源為https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。

        匯入資料介面

        按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

        高亮顯示

        動作傳入資料為object類型，參數包括seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名）。資料樣本：

        {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

        取消高亮

        動作傳入資料為object類型，參數包括seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名）。資料樣本：

        {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

        顯示提示框

        動作傳入資料為object類型，參數包括dataindex（資料索引）、name（資料名）、x（橫座標位置）和y（縱座標位置）。資料樣本：

        { 
    "dataIndex": 1,  
    "name": "",  
    "x": 1,  
    "y": 1
}

        隱藏提示框

        隱藏提示框，不需要參數。

        餅圖扇形選中狀態控制

        動作傳入資料為object類型，參數包括type（扇形動作類型）和seriesName（系列名）等。資料樣本：

        {  
    "type": "pieToggleSelect",  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

        更新群組件配置

        動態更新組件的樣式配置。需要先在組件的配置面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。

        顯示

        顯示組件，參考資料樣本如下。

        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,
        // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }