全部產品
Search

搜尋本產品

    DataV：Echarts 雷達圖

    文件中心

    DataV：Echarts 雷達圖

    更新時間：Nov 19, 2024

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

    圖表樣式image.png

    樣式面板image.png

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

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

      • 定位：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。

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

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

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

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

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

    • 渲染引擎：設定雷達圖的渲染引擎。包括canvas和svg。

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

      • 水平位置：單擊下拉式清單，選擇圖例標記和文本的對齊。

        • 自動：預設自動，根據組件的位置和朝向決定。

        • 靠左對齊：當圖形在文字左邊時，為靠左對齊。

        • 置中對齊：當圖例的圖形與文字重疊時，為置中對齊。

        • 靠右對齊：當圖形在文字右邊時，為靠右對齊。

      • 垂直位置：單擊下拉式清單，選擇圖例標記和文本的對齊。

        • 自動：預設自動，根據組件的位置和朝向決定。

        • 頂部對齊：當圖形在視窗上方時，為頂部對齊。

        • 置中對齊：當圖形在視窗中間時，為置中對齊。

        • 底部對齊：當圖形在視窗下方時，為底部對齊。

      • 朝向：單擊下拉式清單，選擇圖例的布局朝向。

        • 水平：圖例水平分布。

        • 垂直：圖例垂直分布。

      • 內邊距：單擊+或-號，或手動輸入數值，調整圖例內邊距，單位px，預設各方向內邊距為5。

      • 元素間距：單擊+或-號，或手動輸入數值，調整圖例每項之間的距離。橫向布局時為水平間隔，縱向布局時為縱向間隔。

      • 文本樣式

        • 顏色：參考顏色選取器，修改圖例文本的顏色。

        • 字型樣式：圖例文本的字型風格。

        • 字型粗細：圖例文本的字型粗細。

        • 字型：圖例文本的字型系列。

        • 字型大小：單擊+或-號，或手動輸入數值，改變圖例字型的大小。

    • 雷達圖

      • 半徑：雷達圖與組件邊界的距離。支援以下幾種輸入：

        • 具體像素值，例如 20。

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

      • 起始角度：雷達圖逆時針旋轉的起始角度，單位為弧度。

      • 名稱

        • 顏色：參考顏色選取器，修改名稱的顏色。

        • 字型樣式：名稱的字型風格。

        • 字型粗細：名稱的字型粗細。

        • 字型：名稱的字型系列。

        • 字型大小：單擊+或-號，或手動輸入數值，改變名稱字型的大小。

      • 名稱間隔：單擊+或-號，或手動輸入數值，修改雷達圖名稱與軸線之間的距離。

      • 分割段數：單擊+或-號，或手動輸入數值，設定座標軸的分割段數。

      • 形狀：設定雷達圖的形狀，包括多邊形和圓形。

      • 自動調整：勾選後，雷達圖可顯示自動調整；去勾選，雷達圖關閉自動調整。

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

      • 軸線：單擊右側的眼睛表徵圖顯示雷達圖軸線。

        • 線樣式

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

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

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

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

      • 刻度標記：單擊右側的眼睛表徵圖顯示座標軸刻度。

        • 內部：勾選後，座標軸刻度朝內；去勾選，座標軸刻度朝外。

        • 長度：單擊+或-號，或手動輸入數值，修改座標軸刻度的長度。

        • 線樣式

          • 顏色：參考顏色選取器，修改刻度標記的顏色。

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

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

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

      • 分割線：單擊右側的眼睛表徵圖顯示分割線。

        • 線樣式

          • 顏色：參考顏色選取器，修改分割線的顏色。

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

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

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

      • 分割地區：單擊右側的眼睛表徵圖顯示分割地區。

        • 地區樣式

          • 顏色：單擊右側的image或image表徵圖，添加或刪除一個顏色樣式。 單擊image或image表徵圖配置多個顏色樣式的排列樣式。單擊image表徵圖，即可複製當前選中的顏色樣式配置並新增一個同樣配置的顏色樣式。參考顏色選取器，修改分割線的顏色。

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

      • 維度：單擊右側的image或image表徵圖，添加或刪除一個維度樣式。 單擊image或image表徵圖配置多個維度色樣式的排列樣式。單擊image表徵圖，即可複製當前選中的維度樣式配置並新增一個同樣配置的維度色樣式。

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

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

      • 文本樣式

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

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

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

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

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

    • 系列：單擊右側的image或image表徵圖，添加或刪除一個條件樣式。 單擊image或image表徵圖配置多個條件樣式的排列樣式。單擊image表徵圖，即可複製當前選中的條件樣式配置並新增一個同樣配置的條件樣式。

      • 名稱：自訂系列名稱，需要與資料中的s欄位值配合使用。

      • 標記圖形：自訂標籤圖形，預設值為圓形。標記類型包括 無，圓形，矩形，圓角矩形，三角形，菱形， 圖釘和箭頭 ，詳細請參考ECharts官網。

      • 標記尺寸：單擊+或-號，或手動輸入數值，修改標記圖形的尺寸。

      • 標籤

        • 位置：設定標籤相當對於雷達圖的位置，包括但不限於top、left和inside。

        • 定位距離：單擊+或-號，或手動輸入數值，修改標籤相當對於雷達圖的距離。

        • 旋轉：單擊+號或者-號，或者手動輸入數字，調整雷達圖的旋轉角度。

        • 顏色：參考顏色選取器，修改標籤的顏色。

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

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

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

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

      • 元素樣式

        • 顏色：參考顏色選取器，修改元素的顏色。

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

      • 線樣式

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

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

        • 類型：線的描邊類型，可選，包括實線和虛線。

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

      • 地區樣式

        • 顏色：參考顏色選取器，修改地區樣式的顏色。

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

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

    • 動畫時間長度：單擊+或-號，或手動輸入數值，修改初始動畫的時間長度，單位為毫秒。

    • 緩動效果：單擊下拉框，選擇資料更新動畫的緩動效果，預設為cubicOut。

    資料來源面板image.png

    欄位

    說明

    dim

    用於配置雷達圖中每個維度類目，即維度名稱。

    value

    用於配置雷達圖中每個維度值。

    s

    （可選） 系列值，與樣式面板中的系列配置項配合使用。

    資料項目配置

    說明

    資料來源

    組件的資料來源中通過代碼編輯或可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型，靈活配置組件資料。

    資料對應

    當您需要自訂圖表欄位配置時，可以在資料對應模組設定不同的欄位對應內容，將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位，就可以實現資料的即時匹配。也可以單擊image表徵圖對欄位分別樣式配置。

    過濾器

    開啟過濾器，選擇已建立的資料過濾器或建立資料過濾器，並配置資料過濾器指令碼，實現資料的篩選功能。詳情請參見管理資料過濾器。

    資料響應結果

    即時展示了組件所使用的資料。當組件資料來源發生變化時，資料響應結果會對應展示最新的資料。如果系統反應延遲，您可以單擊右側的image表徵圖，查看資料響應結果，也可以單擊右側的image表徵圖，擷取組件的最新資料。您也可以單擊查看樣本，查看當前組件的響應結果樣本。

    禁止載入態

    勾選複選框，在組件更新和預覽資料看板時，將看不到組件初始化時的載入內容，去勾選則相反。預設為去勾選狀態。

    受控模式

    勾選複選框，組件初始化狀態下不請求資料，僅通過全域變數或藍圖編輯器配置的方法發起請求資料；去勾選複選框，可以使用自動更新請求資料。預設為去勾選狀態。

    自動更新請求

    勾選複選框，可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新，需要手動重新整理頁面，或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

    進階面板image.png

    互動

    說明

    當點擊資料項目時

    開啟開關，開啟組件互動功能。當單擊選中某個資料項目時拋出回調值，預設拋出資料中的value、dim和s欄位。具體配置請參見組件互動配置。

    當點擊座標軸標籤時

    開啟開關，開啟組件互動功能。當單擊某個座標軸標籤時拋出回調值，預設拋出資料中的value、dim和s欄位。具體配置請參見組件互動配置。

    當圖例點擊時

    開啟開關，開啟組件互動功能。當單擊某個圖例時拋出回調值，預設拋出資料中的selected欄位。具體配置請參見組件互動配置。

    藍圖互動

    1. 單擊頁面左上方的image表徵圖，進入藍圖頁面。

    2. 在圖層節點頁簽下，添加當前組件至主畫布中。

    3. 查看藍圖配置參數。image.png

      • 事件

        事件

        說明

        當資料介面請求完成時

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

        當點擊資料項目時

        當單擊雷達圖的資料時拋出的事件，同時拋出對應的資料項目。

        當點擊座標軸標籤時

        當單擊雷達圖的座標軸標籤時拋出的事件，同時拋出該標籤對應的資料項目。

        當圖例點擊時

        當單擊雷達圖的圖例時拋出的事件，同時拋出對應的資料項目。

      • 動作

        動作

        說明

        請求資料介面

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

        匯入資料介面

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

        高亮顯示

        動作傳入資料為object類型，參數包括seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名），通過seriesName或者seriesIndex指定系列，如果要再指定某個資料可以再指定dataIndex或者name。參考資料樣本

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

        取消高亮

        動作傳入資料為object類型，參數包括seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名），通過seriesName或者seriesIndex指定系列，如果要再指定某個資料可以再指定dataIndex或者name。參考資料樣本

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

        顯示提示框

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

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

        隱藏提示框

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

        圖例控制

        動作傳入資料為object類型，參數包括type（圖例動作類型）和name（圖例名稱）。參考資料樣本

        {
  "type": "",//圖例動作類型包括: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

        移動

        將組件移動到指定位置，參考資料樣本。

         {      
      // 移動方式。絕對位置：to，相對定位：by。預設值：to。
        "positionType": "to",
      // 指定位置。x座標，y座標。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 動畫方式。
      "animation": {
        "enable": false,
        // 動畫延時。
        "animationDuration": 1000,
        // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

        切換顯隱

        切換組件顯示或者隱藏，不需要參數。

        顯示

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

        {
  "animationType": "",//動畫方式，可選值：fade，不填無動畫。
  "animationDuration": 1000,//動畫延遲，單位ms。
  "animationEasing": ""//動畫曲線
}

        隱藏

        隱藏組件，參考資料樣本。

        {
  "animationType": "",//動畫方式，可選值：fade，不填無動畫。
  "animationDuration": 1000,//動畫延遲，單位ms。
  "animationEasing": ""//動畫曲線
}

        更新群組件配置

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