日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺(tái)
文檔
輸入文檔關(guān)鍵字查找
首頁 DataV數(shù)據(jù)可視化 DataV-Board 6.0 （數(shù)據(jù)看板） 操作指南 組件指南 其他組件 水波圖

水波圖

更新時(shí)間：
產(chǎn)品詳情
我的收藏

本文介紹水波圖組件的圖表樣式和各配置項(xiàng)的含義。

圖表樣式

水波圖以動(dòng)態(tài)水波的填充方式展示一組數(shù)據(jù)的百分比值或項(xiàng)目的進(jìn)度情況。image

配置面板

  • 搜索配置：?jiǎn)螕?b data-tag="uicontrol" id="uicontrol-siu-g4m-0i6" class="uicontrol">配置面板右上角的搜索配置，可在搜索配置面板中輸入您需要搜索的配置項(xiàng)名稱，快速定位到該配置項(xiàng)，系統(tǒng)支持模糊匹配。詳情請(qǐng)參見搜索資產(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)為組件左上角距離頁面左邊界的像素距離，縱坐標(biāo)為組件左上角距離頁面上邊界的像素距離。
    • 旋轉(zhuǎn)角度：以組件的中心為中心點(diǎn)，進(jìn)行旋轉(zhuǎn)，單位為度（°）。
      • 手動(dòng)輸入角度值，控制組件的旋轉(zhuǎn)角度。
      • 拖動(dòng)圓圈旋轉(zhuǎn)控制圖標(biāo)圖標(biāo)內(nèi)的黑點(diǎn)，控制組件的旋轉(zhuǎn)角度。
      • 單擊左右翻轉(zhuǎn)圖標(biāo)圖標(biāo)，控制組件左右翻轉(zhuǎn)樣式。
      • 單擊上下翻轉(zhuǎn)圖標(biāo)圖標(biāo)，控制組件上下翻轉(zhuǎn)樣式。
    • 不透明度：取值范圍為0~1。為0時(shí)，圖表隱藏；為1時(shí)，圖表全部顯示。默認(rèn)為1。

  • 圖形

    參數(shù)

    說明

    圖表邊距

    單擊開關(guān)圖標(biāo)圖標(biāo)，控制圖表邊距的顯隱。打開開關(guān)后，可配置水波圖區(qū)域與組件上下左右四個(gè)邊界之間的距離，單位默認(rèn)px。

    背景顏色

    設(shè)置水波圖組件的背景顏色，請(qǐng)參見顏色選擇器說明進(jìn)行修改。

    外環(huán)半徑

    設(shè)置水波圖組件相對(duì)于組件邊框的外環(huán)半徑，范圍值可選0~100，單位%。

    投影樣式

    設(shè)置水波圖組件外環(huán)的平面投影樣式，包括外環(huán)的顏色、模糊半徑以及外環(huán)圓心相對(duì)于組件本身圓心X軸和Y軸上的偏移量。

    水波樣式

    設(shè)置水波圖的顏色、波形個(gè)數(shù)和波浪長(zhǎng)度。

    說明

    當(dāng)貼圖配置打開時(shí)，水波顏色不支持漸變色。

    外框

    設(shè)置水波圖的外框樣式。

    • 外框形狀：設(shè)置外框的形狀樣式，包括圓形、菱形、三角形、大頭針和矩形。image

    • 外框描邊：設(shè)置外框的描邊樣式，包括描邊的粗細(xì)、描邊間距和描邊顏色。

    • 虛線描邊：設(shè)置外框的虛線描邊樣式，包括描邊分段長(zhǎng)度和分段間隔。image

    標(biāo)注

    設(shè)置水波圖的標(biāo)題樣式和數(shù)據(jù)內(nèi)容樣式。

    • 標(biāo)題

      • 內(nèi)容：設(shè)置水波圖標(biāo)注的標(biāo)題的文本內(nèi)容。

      • 文本樣式：設(shè)置水波圖標(biāo)注的標(biāo)題內(nèi)容的文本樣式。

      • 位置：設(shè)置水波圖標(biāo)注的標(biāo)題內(nèi)容相對(duì)于水波圖組件的X偏移、Y偏移和旋轉(zhuǎn)角度。

    • 數(shù)據(jù)內(nèi)容

      • 內(nèi)容：設(shè)置水波圖標(biāo)注的數(shù)據(jù)內(nèi)容的文本內(nèi)容。

      • 文本樣式：設(shè)置水波圖標(biāo)注的數(shù)據(jù)內(nèi)容的文本樣式。

      • 位置：設(shè)置水波圖標(biāo)注的數(shù)據(jù)內(nèi)容相對(duì)于水波圖組件的X偏移、Y偏移和旋轉(zhuǎn)角度。

    貼圖

    設(shè)置水波圖的貼圖樣式。image

    • 類型：設(shè)置水波圖貼圖的類型，包括點(diǎn)形、線性和正方形。

    • 填充樣式：設(shè)置水波圖貼圖的填充樣式，包括填充色和寬度。

    • 額外樣式：設(shè)置水波圖貼圖的線間距和旋轉(zhuǎn)角度樣式。

  • 動(dòng)畫

    參數(shù)

    說明

    動(dòng)畫開關(guān)

    打開開關(guān)，可配置水波圖的動(dòng)畫效果。

    動(dòng)畫效果

    動(dòng)畫的效果類型，僅在打開動(dòng)畫開關(guān)后可配置。

    動(dòng)畫時(shí)長(zhǎng)

    組件動(dòng)畫效果的持續(xù)時(shí)間，單位為ms，僅在打開動(dòng)畫開關(guān)后可配置。

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

percent：展示水波所占圖表的百分比，值為小數(shù)，1表示100%。

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

交互面板

此組件沒有交互事件。

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

  1. 在畫布編輯器頁面，右鍵單擊組件，選擇導(dǎo)出到藍(lán)圖編輯器。

  2. 單擊頁面左上角的藍(lán)圖圖標(biāo)圖標(biāo)。

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

    • 事件

      事件

      說明

      當(dāng)數(shù)據(jù)接口請(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)數(shù)據(jù)接口請(qǐng)求失敗時(shí)

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

    • 動(dòng)作

      動(dòng)作

      說明

      導(dǎo)入數(shù)據(jù)接口

      按組件繪制格式處理數(shù)據(jù)后，導(dǎo)入組件，重新繪制。不需要重新請(qǐng)求服務(wù)端數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見畫布編輯器中組件右側(cè)配置面板數(shù)據(jù)源頁簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。

      請(qǐng)求數(shù)據(jù)接口

      重新請(qǐng)求服務(wù)端數(shù)據(jù)，上游數(shù)據(jù)處理節(jié)點(diǎn)或圖層節(jié)點(diǎn)拋出的數(shù)據(jù)將作為參數(shù)。例如水波圖配置了API數(shù)據(jù)源為https://api.test，傳到請(qǐng)求數(shù)據(jù)接口動(dòng)作的數(shù)據(jù)為{ id: '1'}，則最終請(qǐng)求接口為https://api.test?id=1。

      更新組件配置

      動(dòng)態(tài)更新組件的樣式配置。需要先在組件的樣式面板中，單擊復(fù)制配置到剪貼板，獲取組件配置數(shù)據(jù)。再根據(jù)需要在藍(lán)圖編輯器配置頁面的數(shù)據(jù)處理節(jié)點(diǎn)中更改對(duì)應(yīng)樣式的字段值。

      顯示

      顯示組件，參考數(shù)據(jù)示例如下。

      return {
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": ""
}

      隱藏

      隱藏組件，參考數(shù)據(jù)示例如下。

      return {
  "animationType": "",
  "animationDuration": 1000,
  "animationEasing": ""
}

      切換顯隱狀態(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)畫方式。
      "animation": {
        "enable": false,
        // 動(dòng)畫延時(shí)。
        "animationDuration": 1000,
        // 動(dòng)畫曲線?？蛇x值為：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

案例演示

本案例通過多個(gè)水波圖組件展示各國(guó)人對(duì)世乒賽的關(guān)注程度。

  1. 登錄DataV控制臺(tái)。

  2. 選擇任一可視化應(yīng)用，單擊編輯，進(jìn)入畫布編輯器頁面。

  3. 在上方工具欄單擊搜索，輸入水波圖，單擊添加到畫布中。image

  4. 重復(fù)上述操作，再添加6個(gè)水波圖組件、1個(gè)多維度餅圖組件。

  5. 單擊多維度餅圖組件，選擇數(shù)據(jù)頁簽，修改靜態(tài)數(shù)據(jù)。

    [
  {
    "x": "中國(guó)",
    "y": "89%"
  },
  {
    "x": "巴西",
    "y": "53%"
  },
  {
    "x": "西班牙",
    "y": "18%"
  },
  {
    "x": "法國(guó)",
    "y": "10%"
  },
  {
    "x": "意大利",
    "y": "20%"
  },
  {
    "x": "日本",
    "y": "34%"
  },
  {
    "x": "美國(guó)",
    "y": "4%"
  }
]

  6. 選擇配置頁簽，增加一個(gè)數(shù)據(jù)系列。image

  7. 分別修改7個(gè)水波圖組件的水波樣式的顏色值和名稱，保證顏色和名稱兩兩不相同。image

  8. 分別修改7個(gè)水波圖樣式 > 標(biāo)注 > 標(biāo)題下的標(biāo)題內(nèi)容與多維度餅圖數(shù)據(jù)源中的x參數(shù)字段一致。例如：水波圖1：中國(guó)。image

  9. 單擊image圖標(biāo)，切換至藍(lán)圖中。

  10. 在導(dǎo)入節(jié)點(diǎn)頁簽下，拖拽所有組件到藍(lán)圖畫布中。

  11. 單擊邏輯節(jié)點(diǎn)頁簽，添加序列執(zhí)行節(jié)點(diǎn)到主畫布中，并連接組件。image

  12. 配置序列執(zhí)行節(jié)點(diǎn)處理方法。

    //水波圖-1
return [{
  "percent": (data[0].y) / 100
}]
//水波圖-2
return [{
  "percent": (data[1].y) / 100
}]
//水波圖-3
return [{
  "percent": (data[2].y) / 100
}]
//水波圖-4
return [{
  "percent": (data[3].y) / 100
}]
//水波圖-5
return [{
  "percent": (data[4].y) / 100
}]
//水波圖-6
return [{
  "percent": (data[5].y) / 100
}]
//水波圖-7
return [{
  "percent": (data[6].y) / 100
}]

  13. 單擊頁面右上角的預(yù)覽。查看展示結(jié)果。image..png

  14. （可選）添加時(shí)間器、通用標(biāo)題等其他組件使得數(shù)字大屏更加飽滿。image..png