POLYLINE

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

Draws polylines that can be done on a line graph with multiple segments.

Create UI widget

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

const polyline = createWidget(widget.GRADKIENT_POLYLINE, Param)

Type

Param: object

Properties	Description	Required	Type
x	The x-coordinate of widget.	YES	number
y	The y-coordinate of widget.	YES	number
w	The width of widget.	YES	number
h	Widget height, the maximum height on a circular screen with a screen height of 480 and a square device with a screen height of 390 is 150, and the maximum height of other models is scaled proportionally according to the screen height.	YES	number
line_color	Line color, default 0xe60039	NO	number
line_width	Line width, default 2 px	NO	number

polyline instance

polyline.clear()

() => void

Clear drawn lines

polyline.addLine()

(option: Option) => void

Option: object

Properties	Description	Type	Version
data	Coordinate arrays	Array<AxisItem>	-
count	Coordinate array length	number	-
color_from	Initial fill gradient color	number	2.1
color_to	End fill gradient color	number	2.1
curve_style	Whether to use interpolation, smoothing curve effect	boolean	2.1

AxisItem: object

Properties	Description	Type
x	Horizontal coordinates, relative coordinates, distance from the left side of the widget	number
y	Vertical coordinates, relative coordinates, distance from the bottom of the widget	number

Supported Property Access List

Property	setProperty	getProperty	setter	getter
x	N	Y	N	Y
y	N	Y	N	Y
w	N	Y	N	Y
h	N	Y	N	Y
line_color	N	N	N	N
line_width	N	N	N	N
bg_color	N	N	N	N

Code example

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