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线条颜色,默认 0xe60039number
line_width线条宽度,默认 2 pxnumber

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
})
}
})