Skip to main content
版本：v3

POLYLINE

API_LEVEL 2.0 开始支持，API 兼容性请参考 API_LEVEL。

polyline

绘制多段线，可做于折线图上的多段线条。

创建 UI 控件​

import { createWidget, widget } from '@zos/ui'

const polyline = createWidget(widget.GRADKIENT_POLYLINE, Param)

类型​

Param: object​

属性说明是否必须类型
x控件 x 坐标是number
y控件 y 坐标是number
w控件宽度是number
h控件高度，在屏幕高度为 480 圆形屏幕和屏幕高度为 390 的方形设备上的最大高度为 150，其余机型的最大高度按照屏幕高度等比例缩放是number
line_color线条颜色，默认 0xe60039否number
line_width线条宽度，默认 2 px否number

polyline 实例​

polyline.clear()​

() => void

清除绘制的线条

polyline.addLine()​

(option: Option) => void
Option: object​
属性说明类型版本
data坐标数组Array<AxisItem>-
count坐标数组长度number-
color_from初始填充渐变色number2.1
color_to结束填充渐变色number2.1
curve_style是否采用插值，平滑曲线效果boolean2.1
AxisItem: object​
属性说明类型
x横向坐标，相对坐标，距离控件左侧的距离number
y纵向坐标，相对坐标，距离控件底部的距离number

代码示例​

import { createWidget, widget } from '@zos/ui'
import { px } from '@zos/utils'

Page({
  build() {
    const lineDataList = [
      { x: 0, y: px(120) },
      { x: px(100), y: px(10) },
      { x: px(200), y: px(50) },
      { x: px(300), y: px(50) },
      { x: px(400), y: px(150) }
    ]
    const polyline = createWidget(widget.GRADKIENT_POLYLINE, {
      x: 0,
      y: px(200),
      w: px(480),
      h: px(150),
      line_color: 0x00ffff,
      line_width: 4
    })
    polyline.clear()
    polyline.addLine({
      data: lineDataList,
      count: lineDataList.length
    })
  }
})