ZRender 文档

zrender

zrender.dispose(zr)

参数

销毁 ZRender 实例。

名称	类型	默认值	描述
zr	`zrender`		ZRender 实例，由 `zrender.init` 创建。不传则销毁全部。

返回值

类型：zrender，zrender 类。

zrender.init(dom, opts)

得到一个 ZRender 的实例，实例属性及方法参见实例 API。

参数

名称	类型	默认值	描述
dom	`HTMLElement`		ZRender 容器，在调用该方法时，应该已有宽度和高度。
opts	`Object`		配置项
opts.renderer	`string`	`'canvas'`	渲染方式，支持：`'canavs'`、`'svg'`、`'vml'`
opts.devicePixelRatio	`number`	`2`	画布大小与容器大小之比，仅当 `renderer` 为 `'canvas'` 时有效。
opts.width	`number\|string`	`'auto'`	画布宽度，设为 `'auto'` 则根据 `devicePixelRatio` 与容器宽度自动计算。
opts.height	`number\|string`	`'auto'`	画布高度，设为 `'auto'` 则根据 `devicePixelRatio` 与容器高度自动计算。
opts.useCoarsePointer	`'auto'\|boolean`	`'auto'`	（5.4.0 版本起支持）是否扩大可点击元素的响应范围。`'auto'` 表示对移动设备开启；`true` 表示总是开启；`false` 表示总是不开启。
opts.pointerSize	`number`	`44`	扩大元素响应范围的像素大小，配合 `opts.useCoarsePointer` 使用。

返回值

类型：zrender，ZRender 实例。

zrender.version

类型：'string'，ZRender 版本号。

zrender.Animatable

支持动画的对象。

构造函数

zrender.Animatable()

zrender.Animatable.animate(path, loop)

创建一个动画对象。动画不会立即开始，如需立即开始，需调用 zrender.Animator.start。

参数

名称	类型	默认值	描述
path	`string`		对该对象的哪个元素执行动画，如 `xxx.animate('a.b', true)` 表示对 `xxx.a.b` （可能是一个 `Object` 类型）执行动画。
loop	`boolean`	`false`	是否循环动画。

返回值

动画对象，类型：Animator。

例子

el.animate('style', false)
    .when(1000, {x: 10})
    .done(function () {
         // Animation done
    })
    .start()

zrender.Animatable.animateTo(target, time, delay, easing, callback, forceAnimate)

为属性设置动画。

部分参数可缺省，支持以下形式的调用：

animateTo(target, time, delay, easing, callback, forceAnimate)
animateTo(target, time, delay, easing, callback)
animateTo(target, time, easing, callback)
animateTo(target, time, delay, callback)
animateTo(target, time, callback)
animateTo(target, callback)
animateTo(target)

参数

名称	类型	默认值	描述
target	`Object`		设置动画的对象，应为 `this` 的属性。
time	`number`	`500`	动画时长，单位毫秒。
delay	`number`	`0`	动画延迟执行的时长，单位毫秒。
easing	`string`	`'linear'`	缓动函数名称，支持的名称参见缓动函数。
callback	`Function`		动画执行完成后的回调函数。
forceAnimate	`boolean`	`false`	对于相同的属性，是否强制执行（也就是不直接结束动画）。

例子

// Animate position
el.animateTo({
    position: [10, 10]
}, function () {
    // done
});

// Animate shape, style and position in 100ms, delayed 100ms,
// with cubicOut easing
el.animateTo({
    shape: {
        width: 500
    },
    style: {
        fill: 'red'
    }
    position: [10, 10]
}, 100, 100, 'cubicOut', function () {
    // done
});

zrender.Animatable.stopAnimation(forwardToLast)

停止动画。

参数

名称	类型	默认值	描述
forwardToLast	`boolean`	`false`	是否将动画跳到最后一帧。

返回值

this。

zrender.Animator

动画对象。

构造函数

zrender.Animator()

zrender.Animator.delay(time)

设置动画延迟开始的时间。

参数

名称	类型	默认值	描述
time	`number`		延迟时长，单位毫秒。

返回值

this。

zrender.Animator.done(callback)

设置动画结束的回调函数。

参数

名称	类型	默认值	描述
callback	`Function`		动画结束的回调函数。

返回值

this。

zrender.Animator.during(callback)

为关键帧添加回调函数，在关键帧运行后执行。

参数

名称	类型	默认值	描述
callback	`Function`		关键帧回调函数。

返回值

this。

zrender.Animator.isPaused()

获得动画是否处于暂停状态。

返回值

是否暂停，类型：boolean。

zrender.Animator.pause()

暂停动画。

zrender.Animator.resume()

恢复动画。

zrender.Animator.start(easing)

开始执行动画。

参数

名称	类型	默认值	描述
easing	`string`	`'linear'`	缓动函数名称，支持的名称参见缓动函数。

返回值

this。

zrender.Animator.stop(forwardToLast)

停止动画。

参数

名称	类型	默认值	描述
forwardToLast	`boolean`	`false`	是否将动画跳到最后一帧。

zrender.Animator.when(time, props)

定义关键帧，即动画对象在某个时刻的属性。

参数

名称	类型	默认值	描述
time	`number`		关键帧时刻，单位毫秒。
props	`Object`		关键帧的属性，应为 `Animatable` 对象的属性。

返回值

this。

zrender.BoundingRect

包围盒。

构造函数

zrender.BoundingRect(x, y, width, height)

名称	类型	描述
x	`number`	左上角横坐标。
y	`number`	左上角纵坐标。
width	`number`	包围盒宽度。
height	`number`	包围盒高度。

zrender.BoundingRect.clone()

得到包围盒的副本。

返回值

新的包围盒，类型：zrender.BoundingRect。

zrender.BoundingRect.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

名称	类型	默认值	描述
x	`number`		横坐标。
y	`number`		纵坐标。

返回值

返回是否在图形上，类型：boolean。

zrender.BoundingRect.copy(other)

从另一个包围盒复制属性。

参数

名称	类型	默认值	描述
other	`zrender.BoundingRect`		另一个包围盒。

zrender.BoundingRect.intersect(other)

判断两个包围盒是否相交。

参数

名称	类型	默认值	描述
other	`zrender.BoundingRect`		另一个包围盒。

返回值

是否相交，类型：boolean。

zrender.BoundingRect.union(other)

与另一个包围盒求并集，将结果更新到原本的包围盒。

参数

名称	类型	默认值	描述
other	`zrender.BoundingRect`		另一个包围盒。

zrender.color

静态类

颜色。

zrender.color.lift(color, level)

提亮颜色。

参数

名称	类型	默认值	描述
color	`string`		原始颜色。
level	`number`		提亮指数，应介于 `0` 与 `1` 之间，如果小于 `0`，颜色也会被提亮。

返回值

提亮后的颜色，类型：string，形如 rgba(...) 或 rgb(...)。

zrender.color.lerp(normalizedValue, colors, fullOutput)

快速得到渐变色 colors 在 normalizedValue 位置的颜色，返回混合后的颜色。

参数

名称	类型	默认值	描述
normalizedValue	`number`		位置，范围 `0` 到 `1`。
colors	`string[]`		渐变色的数组。
fullOutput	`boolean`	`false`	如果为 `true`，则返回包含 `color`、 `leftIndex`、 `rightIndex`、 `value` 的 `Object`，否则返回颜色。

返回值

如果 fullOutput 为 true，则返回包含 color、 leftIndex、 rightIndex、 value 的 Object，否则返回颜色。类型：Object|string。

zrender.color.modifyAlpha(color, alpha)

修改颜色的透明度维度。

参数

名称	类型	默认值	描述
color	`string`		颜色字符串。
alpha	`number`		新的透明度。

返回值

RGBA 形式的颜色字符串。

zrender.color.modifyHSL(color, h, s, l)

修改颜色的 HSL 维度。

参数

名称	类型	默认值	描述
color	`string`		颜色字符串，可以不是 `hsl(...)` 形式的。
h	`null\|number`		如果为 `null`，则不改变。
s	`null\|number`		如果为 `null`，则不改变。
l	`null\|number`		如果为 `null`，则不改变。

返回值

RGBA 形式的颜色字符串。

zrender.color.parse(colorStr, rgbaArr)

将各种形式的颜色字符串，转成 RGBA 形式的数组输出。

参数

名称	类型	默认值	描述
colorStr	`string`		可以是：`'rgb(100, 0, 0)'`、 `'rgba(0, 100, 0, 0.4)'`、`'red'`、 `'#F00'`、 `'#F60000'`、 `'hsla(270, 60%, 70%, 0.2)'`、 `'hsl(270, 60%, 70%)'` 之类的形式。
rgba	`number[]`		长度为 `4` 的数组，分别表示红色、绿色、蓝色、不透明度，前三者的取值范围是 `0` 到 `255`，不透明度的取值范围是 `0` 到 `1`。

返回值

如果 colorStr 不是合法的颜色，则返回 undefined，否则返回 rgbaArr。类型：undefined|number[]。

如果希望知道颜色字符串是否合法，应该使用返回值；如果希望在任何情况下都得到颜色，则应该使用参数 rgbaArr，如果颜色字符串不合法，会返回 [0, 0, 0, 1]，也就是黑色。

zrender.color.toHex(color)

将颜色转为十六进制的长度为 6 的字符串，开头没有 '#'。

参数

名称	类型	默认值	描述
color	`string`		颜色字符串。

返回值

十六进制的颜色，类型：string。

例子

zrender.color.toHex('rgb(200, 0, 0)') 返回 'c80000'。

zrender.color.stringify(arrColor, type)

将数组形式的颜色转为字符串。

参数

名称	类型	默认值	描述
arrColor	`number[]`		可以是长度为 `3` 或 `4` 的数组，如 `[255, 0, 0, 0.2]`。
type	`string`		`arrColor` 的形式，可以为：`'rgb'`、 `'rgba'`、 `'hsv'`、 `'hsva'`、 `'hsl'`、 `'hsla'`。

返回值

颜色字符串，如：'rgba(255, 0, 0, 0.2)'，类型：string。

zrender.Displayable

继承自 zrender.Element

抽象类

可显示的元素。

注意：

zrender.Displayable 是一个抽象类，所以不要在代码中 new zrender.Displayable(opts)，这里的构造函数只是用于表明其子类（如 Rect 等）构造函数参数的共同部分。

元素初始化之后，需要通过 zrender.Element.attr 修改属性。

构造函数

zrender.Displayable(opts)

名称	类型	默认值	描述
opts.culling	`boolean`	`false`	是否进行裁剪。
opts.cursor	`string`	`'pointer'`	鼠标移到元素上时的鼠标样式。
opts.draggable	`boolean`	`false`	图形是否可拖曳。
opts.invisible	`boolean`	`false`	图形是否不可见，为 `true` 时不绘制图形，但是仍能触发鼠标事件。
opts.progressive	`number`	`-1`	是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
opts.incremental	`boolean`	`false`	（5.4.0 版本起支持）是否增量式渲染。增量式渲染的意思是，在每帧渲染的时候，不擦除之前帧的该元素直接再次渲染。增量渲染的元素在单独的层中进行渲染。SVG 模式不支持。具体请参考源码。
opts.ignoreCoarsePointer	`boolean`	`false`	（5.4.0 版本起支持）是否忽略增加响应范围。默认情况下，在移动设备上，为了提高用户体验，可点击元素的响应范围会被扩大处理。如果某些元素不希望扩大响应范围，则应设为 `true`。
opts.rectHover	`boolean`	`false`	是否使用包围盒检验鼠标是否移动到物体。`false` 则检测元素实际的内容。
opts.silent	`boolean`	`false`	是否响应鼠标事件。
opts.style.fill	`string`	`'#000'`	填充样式。
opts.style.stroke	`string`	`null`	描边样式。
opts.style.opacity	`number`	`1`	不透明度。
opts.style.lineDash	`number[]`	`null`	描边虚线样式，参考 SVG stroke-dasharray。
opts.style.lineDashOffset	`number`	`null`	描边虚线偏移，参考 SVG stroke-dashoffset。
opts.style.shadowBlur	`number`	`0`	阴影模糊大小。
opts.style.shadowColor	`string`	`'transparent'`	阴影颜色。
opts.style.shadowOffsetX	`number`	`0`	阴影横向偏移。
opts.style.shadowOffsetY	`number`	`0`	阴影纵向偏移。
opts.style.lineWidth	`number`	`0`	线宽。
opts.style.strokeNoScale	`boolean`	`false`	描边粗细不随缩放而改变，`false` 则会根据缩放同比例缩放描边粗细。
opts.style.text	`string`	`null`	在图形中显示的文字。
opts.style.font	`string`	`null`	文字样式，由 `fontSize`、 `fontFamily`、 `fontStyle`、 `fontWeight` 组成，建议分别设置这几项而非直接设置 `font`。
opts.style.fontStyle	`string`	`null`	同 CSS font-style。
opts.style.fontWeight	`string`	`null`	同 CSS font-weight。
opts.style.fontSize	`string`	`null`	同 CSS font-size。
opts.style.fontFamily	`string`	`null`	同 CSS font-family。
opts.style.textFill	`string`	`null`	文字填充样式。
opts.style.textStroke	`string`	`null`	文字描边样式。
opts.style.textWidth	`number`	`null`	文字宽度。
opts.style.textHeight	`number`	`null`	文字高度，仅用于设置背景色时需要设置。
opts.style.textLineWidth	`number`	`0`	文字描边宽度。
opts.style.textLineHeight	`number`	`0`	文字行高。
opts.style.textPosition	`string\|number[]`	`'inside'`	文字位置，可以为 `'inside'`、 `'left'`、 `'right'`、 `'top'`、 `'bottom'`，或一个二维数组 `[x, y]` 表示相对形状的位置。
opts.style.textRect	`Object`	`null`	文字包围盒，包括 `x`、 `y`、 `width`、 `height` 属性，如果没有设置，将使用形状的包围盒。
opts.style.textOffset	`number[]`	`null`	文字位置偏移，包括 `x`、 `y`。
opts.style.textAlign	`string`	`null`	文字水平对齐方式，可取值：`'left'`、 `'center'`、 `'right'`，默认根据 `textPosition` 计算。
opts.style.textVerticalAlign	`string`	`null`	文字垂直对齐方式，可取值：`'top'`、 `'middle'`、 `'bottom'`，默认根据 `textPosition` 计算。
opts.style.textDistance	`number`	`5`	文字与其对齐的边缘的距离，如 `textPosition` 为 `top` 时，`textDistance` 表示与形状上方的距离。
opts.style.textShadowColor	`string`	`'transparent'`	文字阴影颜色。
opts.style.textShadowBlur	`number`	`0`	文字阴影模糊大小。
opts.style.textShadowOffsetX	`number`	`0`	文字阴影水平偏移。
opts.style.textShadowOffsetY	`number`	`0`	文字阴影垂直偏移。
opts.style.textBoxShadowColor	`string`	`'transparent'`	文字包围盒阴影颜色。
opts.style.textBoxShadowBlur	`number`	`0`	文字包围盒阴影模糊大小。
opts.style.textBoxShadowOffsetX	`number`	`0`	文字包围盒阴影水平偏移。
opts.style.textBoxShadowOffsetY	`number`	`0`	文字包围盒阴影垂直偏移。
opts.style.transformText	`boolean`	`false`	文字是否跟随变换效果，仅对 `Path` 或 `Image` 元素有效
opts.style.textRotation	`number`	`0`	文字旋转角度，仅对 `Path` 或 `Image` 元素有效，并且 `transformText` 应设置为 `false`。
opts.style.textOrigin	`string\|number[]`	`null`	文字变换中心，可以是 `'center'` 或一个二维数组 `[x, y]` 表示相对形状的位置，默认值是 `textPosition`。
opts.style.textBackgroundColor	`string`	`null`	文字包围盒颜色。
opts.style.textBorderColor	`string`	`null`	文字包围盒描边颜色。
opts.style.textBorderWidth	`number`	`0`	文字包围盒描边宽度。
opts.style.textBorderRadius	`number`	`0`	文字圆角大小。
opts.style.textPadding	`number\|number[]`	`null`	文字内边距，可以是 `2` 或 `[2, 4]` 或 `[2, 3, 4, 5]` 的形式，同 CSS Padding，单位是像素。
opts.style.rich	`Object`	`null`	富文本样式，参考 ECharts rich 配置项。
opts.style.truncate	`Object`	`null`	当文字过长显示不下时，显示省略号表示。
opts.style.truncate.outerWidth	`number`	`null`	包含了 `textPadding` 的宽度，超出这个范围就裁剪。
opts.style.truncate.outerHeight	`number`	`null`	包含了 `textPadding` 的高度，超出这个范围就裁剪。
opts.style.truncate.ellipsis	`string`	`'...'`	默认用省略号表示超出部分，也可以对其进行自定义。
opts.style.truncate.placeholder	`string`	`null`	如果空间过小，导致省略号也显示不下，但是又不想空着，可能得有个什么标记表示这里是有字符的，就用个 “点”，就是在这个 placeholder 里设置。
opts.style.blend	`string`	`null`	混合模式，同 Canvas globalCompositeOperation。
opts.zlevel	`number`	`0`	决定绘画在哪层 Canvas 中。Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的 `zlevel`。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。`zlevel` 大的 Canvas 会放在 `zlevel` 小的 Canvas 的上面。
opts.z	`number`	`0`	控制图形的前后顺序。`z` 值小的图形会被 `z` 值大的图形覆盖。`z` 相比 `zlevel` 优先级更低，而且不会创建新的 Canvas。
opts.z2	`number`	`0`	与 `z` 类似，优先级比 `z` 更低。

zrender.Displayable.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

名称	类型	默认值	描述
x	`number`		横坐标。
y	`number`		纵坐标。

返回值

返回是否在图形上，类型：boolean。

zrender.Displayable.dirty()

设为需要更新。

zrender.Displayable.getBoundingRect()

得到元素的包围盒。

返回值

元素的包围盒，类型：zrender.BoundingRect。

zrender.Displayable.rectContain(x, y)

判断坐标 (x, y) 是否在图形包围盒内。

参数

名称	类型	默认值	描述
x	`number`		横坐标。
y	`number`		纵坐标。

返回值

返回是否在图形上，类型：boolean。

zrender.Arc

继承自 zrender.Displayable

圆弧。

构造函数

zrender.Arc(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.r	`number`	`0`	半径。
opts.shape.startAngle	`number`	`0`	起始弧度。
opts.shape.endAngle	`number`	`Math.PI * 2`	终止弧度。
opts.shape.clockwise	`boolean`	`true`	顺时针方向。

zrender.BezierCurve

继承自 zrender.Displayable

贝塞尔曲线。

构造函数

zrender.BezierCurve(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.x1	`number`	`0`	起始点横坐标。
opts.shape.y1	`number`	`0`	起始点纵坐标。
opts.shape.x2	`number`	`0`	终止点横坐标。
opts.shape.y2	`number`	`0`	终止点纵坐标。
opts.shape.cpx1	`number`	`0`	控制点横坐标。
opts.shape.cpy1	`number`	`0`	控制点纵坐标。
opts.shape.percent	`number`	`1`	已显示的百分比，用于绘制动画。

zrender.Circle

继承自 zrender.Displayable

圆。

构造函数

zrender.Circle(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.r	`number`	`0`	半径。

zrender.CompoundPath

继承自 zrender.Path

复合路径。相当于多个路径的并集。

构造函数

zrender.CompoundPath(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape.paths	`Path[]`	`null`	路径数组。

zrender.Droplet

继承自 zrender.Displayable

水滴。

构造函数

zrender.Droplet(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.width	`number`	`0`	宽度。
opts.shape.height	`number`	`0`	高度。

zrender.Ellipse

继承自 zrender.Displayable

椭圆。

构造函数

zrender.Ellipse(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.rx	`number`	`0`	横向半径。
opts.shape.ry	`number`	`0`	纵向半径。

zrender.Heart

继承自 zrender.Displayable

心形。

构造函数

zrender.Heart(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.width	`number`	`0`	宽度。
opts.shape.height	`number`	`0`	高度。

zrender.Image

继承自 zrender.Displayable

图像。

构造函数

zrender.Image(opts)

名称	类型	描述
opts	`Object`	配置项，继承得到的配置项参见 zrender.Displayable。
opts.style	`Object`	样式。
opts.style.image	`string\|HTMLImageElement\|HTMLCanvasElement`	图片的内容，可以是图片的 URL，也可以是 dataURI。
opts.style.x	`number`	图片左上角相对于父节点的横坐标。
opts.style.y	`number`	图片左上角相对于父节点的纵坐标。
opts.style.width	`number`	图片宽度。
opts.style.height	`number`	图片高度。

zrender.Isogon

继承自 zrender.Displayable

正多边形。

构造函数

zrender.Isogon(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.x	`number`	`0`	圆心横坐标。
opts.shape.y	`number`	`0`	圆心纵坐标。
opts.shape.r	`number`	`0`	半径。
opts.shape.n	`number`	`0`	边数。

zrender.Line

继承自 zrender.Displayable

线段。

构造函数

zrender.Line(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.x1	`number`	`0`	起始点横坐标。
opts.shape.y1	`number`	`0`	起始点纵坐标。
opts.shape.x2	`number`	`0`	终止点横坐标。
opts.shape.y2	`number`	`0`	终止点纵坐标。
opts.shape.percent	`number`	`1`	已显示的百分比，用于绘制动画。

zrender.Path

继承自 zrender.Displayable

路径。

构造函数

zrender.Path(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。

zrender.Path.extend(props)

扩展一个 Path 元素，用以生成比如星形，圆等。

参数

名称	类型	描述
opts	`Object`	配置项，继承得到的配置项参见 zrender.Displayable。
opts.type	`string`	类型，自定义的名称。
opts.init	`Function`	初始化时调用的函数。
opts.buildPath	`Function`	如何构建 `Path` 的函数，在绘制时候会调用。

例子

这个例子展示的是如何通过扩展 Path 得到新图形。

zrender.Polygon

继承自 zrender.Displayable

多边形。

构造函数

zrender.Polygon(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.points	`number[][]`	`0`	每个元素是一个横纵坐标的数组。
opts.shape.smooth	`number\|string`	`0`	圆滑程度，取值范围为 `0` 到 `1` 之间的数字，`0` 表示不圆滑；也可以是特殊字符串 `'spline'` 表示用 Catmull-Rom spline 插值算法，否则默认用贝塞尔曲线插值算法。
opts.shape.smoothConstraint	`number[][]`	`0`	将计算出来的控制点约束在一个包围盒内。比如 `[[0, 0], [100, 100]]`，这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。

zrender.Polyline

继承自 zrender.Displayable

多边形折线段。默认是不闭合的，如果需要闭合，请将最后一个点设为和第一个点同样的位置。

构造函数

zrender.Polyline(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.points	`number[][]`	`0`	每个元素是一个横纵坐标的数组。
opts.shape.smooth	`number\|string`	`0`	圆滑程度，取值范围为 `0` 到 `1` 之间的数字，`0` 表示不圆滑；也可以是特殊字符串 `'spline'` 表示用 Catmull-Rom spline 插值算法，否则默认用贝塞尔曲线插值算法。
opts.shape.smoothConstraint	`number[][]`	`0`	将计算出来的控制点约束在一个包围盒内。比如 `[[0, 0], [100, 100]]`，这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。

zrender.Rect

继承自 zrender.Displayable

矩形。

构造函数

zrender.Rect(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.r	`number\|number[]`	`0`	用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。r 缩写为 1 相当于 [1, 1, 1, 1]；r 缩写为 [1] 相当于 [1, 1, 1, 1]；r 缩写为 [1, 2] 相当于 [1, 2, 1, 2]；r 缩写为 [1, 2, 3] 相当于 [1, 2, 3, 2]。
opts.shape.x	`number`	`0`	左上角的横坐标。
opts.shape.y	`number`	`0`	左上角的纵坐标。
opts.shape.width	`number`	`0`	宽度。
opts.shape.height	`number`	`0`	高度。

zrender.Rose

继承自 zrender.Displayable

玫瑰线，参见 wiki。

构造函数

zrender.Rose(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.r	`number[]`	`[]`	半径。
opts.shape.k	`number`	`0`	玫瑰线参数，参见 wiki。
opts.shape.n	`number`	`1`	花瓣数。

zrender.Sector

继承自 zrender.Displayable

扇形。

构造函数

zrender.Sector(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.r	`number`	`0`	半径。
opts.shape.r0	`number`	`0`	内半径。
opts.shape.startAngle	`number`	`0`	起始弧度。
opts.shape.endAngle	`number`	`Math.PI * 2`	终止弧度。
opts.shape.clockwise	`boolean`	`true`	顺时针方向。

zrender.Star

继承自 zrender.Displayable

星形。

构造函数

zrender.Star(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.n	`number`	`3`	瓣数，如 `n` 等于 `5` 时，是我们熟悉的五角星。
opts.shape.r	`number`	`0`	半径。
opts.shape.r0	`number`	`0`	内半径。

zrender.Text

继承自 zrender.Displayable

文字。

构造函数

zrender.Text(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。

zrender.Trochoid

继承自 zrender.Displayable

内外旋轮曲线，参见 wiki。

构造函数

zrender.Trochoid(opts)

名称	类型	默认值	描述
opts	`Object`		配置项，继承得到的配置项参见 zrender.Displayable。
opts.shape	`Object`		形状属性。
opts.shape.cx	`number`	`0`	圆心横坐标。
opts.shape.cy	`number`	`0`	圆心纵坐标。
opts.shape.r	`number`	`0`	半径。
opts.shape.r0	`number`	`0`	内半径。
opts.shape.d	`number`	`0`	内外旋轮曲线参数，参见 wiki。
opts.shape.n	`location`	`'out'`	`out` 或 `in`，表示曲线在内部还是外部。

zrender.Element

继承自 zrender.Animatable、 zrender.Transformable、 zrender.Eventful

抽象类

元素，可以被添加到场景中。

注意：

zrender.Element 是一个抽象类，所以不要在代码中 new zrender.Element(opts)，这里的构造函数只是用于表明其子类构造函数参数的共同部分。

zrender.Element.afterUpdate

类型：Function，元素更新后的回调函数。

zrender.Element.attr(key, value)

设置元素属性。需要注意的是，应该始终调用该方法来修改属性，而不是直接 element.xxx = ... 这样的形式，因为后者不会重绘物体。

参数

名称	类型	默认值	描述
key	`string\|Object`		设置的属性。可以是 `string` 类型的属性名称，或者 `Object` 类型的属性及其值。
value	`*`		属性值。

例子

element.attr('position', [100, 200]);
element.attr({
    style: {
        fill: 'red'
    },
    shape: {
        x: 100
    }
});

zrender.Element.beforeUpdate

类型：Function，元素更新前的回调函数。

zrender.Element.hide()

隐藏元素，可以使用 zrender.Element.show 恢复显示。

zrender.Element.removeClipPath()

取消设置裁剪元素。

zrender.Element.setClipPath(clipPath)

设置裁剪元素，超出 clipPath 区域的部分将被裁剪掉。

一个元素只能被一个元素裁剪，如果要实现多个元素的裁剪，需要使用 zrender.CompoundPath。

参数

名称	类型	默认值	描述
clipPath	`Element`		设置当前元素的裁剪元素。

zrender.Element.show()

显示元素。元素在默认情况下是显示状态，使用 zrender.Element.hide 隐藏后，可以使用此方法显示。

zrender.Element.traverse(cb, context)

深度优先遍历所有子孙节点。

参数

名称	类型	默认值	描述
cb	`Function`		回调函数。接受参数：`context, child`，其中 `child` 是每个元素的子元素。
context	`Object`		执行回调函数的上下文。

zrender.Eventful

支持事件的元素。

构造函数

zrender.Eventful()

zrender.Eventful.isSilent(event)

是否绑定了事件。

参数

名称	类型	默认值	描述
event	`string`		事件名。

返回值

是否绑定了事件，类型：boolean。

zrender.Eventful.off(event, handler)

解绑事件。

参数

名称	类型	默认值	描述
event	`string`		事件名。
handler	`Function`		响应函数。

返回值

this。

zrender.Eventful.on(event, handler, context)

绑定事件。

参数

名称	类型	描述
event	`string`	事件名。
handler	`Function`	响应函数。
context	`Object`	执行上下文。

返回值

this。

zrender.Eventful.one(event, handler, context)

单次触发绑定，触发后销毁。

参数

名称	类型	描述
event	`string`	事件名。
handler	`Function`	响应函数。
context	`Object`	执行上下文。

返回值

this。

zrender.Eventful.trigger(event)

触发事件。

参数

名称	类型	默认值	描述
event	`string`		事件名。

返回值

this。

zrender.Gradient

抽象类

渐变。

注意：

zrender.Gradient 是一个抽象类，所以不要在代码中 new zrender.Gradient(colorStops)，这里的构造函数只是用于表明其子类构造函数参数的共同部分。

构造函数

zrender.Gradient(colorStops)

名称	类型	默认值	描述
colorStops	`Object[]`		组成渐变色的颜色。每个颜色包括 `offset` 与 `color` 属性，前者表示渐变位置（类型：`number`），后者表示具体的颜色（类型：`string`）

zrender.Gradient.addColorStop(offset, color)

增加渐变色。

参数

名称	类型	默认值	描述
`offset`	`number`		渐变位置。
`color`	`string`		颜色。

如果想要清除渐变色，可以使用 this.colorStops = []。

zrender.Group

继承自 zrender.Element

组。Group 是一个容器，可以插入子节点，Group 的变换也会被应用到子节点上。

构造函数

zrender.Group()

例子

var g = new zrender.Group();
g.position[0] = 100;
g.position[1] = 100;
g.add(new zrender.Circle({
    style: {
        x: 100,
        y: 100,
        r: 20,
    }
}));
zr.add(g);

zrender.Group.add(child)

添加子节点到最后。

参数

名称	类型	默认值	描述
child	`Element`		待添加的元素。

返回值

this。

zrender.Group.addBefore(child, nextSibling)

添加子节点到 nextSibling 之前。

参数

名称	类型	默认值	描述
child	`Element`		待添加的元素。
nextSibling	`Element`		已经在 Group 中的元素。

返回值

this。

zrender.Group.childAt(idx)

返回特定序号的子元素，类型：Element。

zrender.Group.childCount()

返回子元素个数，类型：number。

zrender.Group.childOfName(name)

返回特定名字的子元素，类型：Element。

zrender.Group.children()

返回所有子元素，类型：Element[]。

zrender.Group.dirty()

将组设为需要更新。

zrender.Group.eachChild(cb, context)

遍历所有子节点。

参数

名称	类型	默认值	描述
cb	`Function`		回调函数。
context	`Object`		执行回调函数的上下文。

zrender.Group.getBoundingRect(includeChildren)

得到 includeChildren 或组内所有元素的包围盒。

参数

名称	类型	默认值	描述
includeChildren	`zrender.Element[]`		组内元素的子集。如果 `includeChildren` 未设置，则获取所有元素的包围盒，否则获得 `includeChildren` 的包围盒。

返回值

includeChildren 或组内所有元素的包围盒，类型：zrender.BoundingRect。

zrender.Group.remove(child)

移除子节点。

参数

名称	类型	默认值	描述
child	`zrender.Element`		待移除的元素。

zrender.Group.removeAll()

移除所有子节点。

zrender.Group.silent

类型：boolean，默认值：false，所有子孙元素是否响应鼠标事件。

zrender.LinearGradient

继承自 zrender.Gradient

线性渐变。

构造函数

zrender.LinearGradient(x, y, x2, y2, colorStops, globalCoord)

名称	类型	默认值	描述
x	`number`	`0`	渐变起始位置横坐标。
y	`number`	`0`	渐变起始位置纵坐标。
x2	`number`	`1`	渐变终止位置横坐标。
y2	`number`	`1`	渐变终止位置纵坐标。
colorStops	`Object[]`		组成渐变色的颜色。每个颜色包括 `offset` 与 `color` 属性，前者表示渐变位置（类型：`number`），后者表示具体的颜色（类型：`string`）
globalCoord	`boolean`	`false`	如果为 `false`，则 `colorStops` 取值范围是 `0` 到 `1`；如果为 `true`，则 `x`、 `y`、 `x2`、 `y2`、 `colorStops` 的坐标和元素是一致的（也就是说，原先用 `1` 表示物体最右侧，这时需要用元素实际宽度表示最右侧）。

zrender.matrix

静态类

3x2 的矩阵，用以表示二维物体的位移、旋转、缩放。

用长度为 6 的数组表示矩阵。如果浏览器不支持 Float32Array 则类型为 number[]，否则为 Float32Array。

zrender.matrix.copy(out, m)

将矩阵 m 复制给矩阵 out。不会创建新矩阵，而是将 out 的元素进行改变。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		待修改的矩阵，由 `zrender.matrix.create` 创建。
m	`Float32Array\|number[]`		参考矩阵。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.create()

创建一个单位矩阵。

返回值

新创建的单位矩阵，类型：Float32Array|number[]，元素个数为 6。

zrender.matrix.identity(out)

将 out 设为单位矩阵，也就是 [1, 0, 0, 1, 0, 0]。不会创建新矩阵，而是将 out 的元素进行改变。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		待修改的矩阵，由 `zrender.matrix.create` 创建。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.invert(out, m)

求到矩阵 m 的逆矩阵，得到的结果赋值给 out。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		输出矩阵，由 `zrender.matrix.create` 创建。
m	`Float32Array\|number[]`		待求逆的矩阵，不会在改方法中被改变。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.mul(out, m1, m2)

将矩阵 m1 与 m2 相乘，得到的结果赋值给 out。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出矩阵，由 `zrender.matrix.create` 创建。
m1	`Float32Array\|number[]`	待相乘的矩阵。
m2	`Float32Array\|number[]`	待相乘的矩阵。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.rotate(out, m, rad)

将矩阵 m 旋转 rad 弧度，得到的结果赋值给 out。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出矩阵，由 `zrender.matrix.create` 创建。
m	`Float32Array\|number[]`	待修改的矩阵，不会在改方法中被改变。
rad	`number`	旋转弧度。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.scale(out, m, v)

将矩阵 m 沿向量 v 缩放，得到的结果赋值给 out。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出矩阵，由 `zrender.matrix.create` 创建。
m	`Float32Array\|number[]`	待修改的矩阵，不会在改方法中被改变。
v	`Float32Array\|number[]`	长度为 `2` 的缩放向量，表示横向和纵向的缩放量。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.matrix.translate(out, m, v)

将矩阵 m 沿向量 v 平移，得到的结果赋值给 out。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出矩阵，由 `zrender.matrix.create` 创建。
m	`Float32Array\|number[]`	待修改的矩阵，不会在改方法中被改变。
v	`Float32Array\|number[]`	长度为 `2` 的平移向量，表示横向和纵向的偏移量。

返回值

修改后的 out，类型：Float32Array|number[]。

zrender.path

静态类

路径相关的辅助函数。

zrender.path.createFromString(str, opts)

从字符串创建路径，字符串形如 SVG Path。

参数

名称	类型	默认值	描述
str	`string`		构建路径的字符串。
opts	`Object`		配置项，参见 zrender.Displayable 的配置项。

zrender.path.extendFromString(str, opts)

从字符串扩展路径，字符串形如 SVG Path。

参数

名称	类型	默认值	描述
str	`string`		扩展路径的字符串。
opts	`Object`		配置项，参见 zrender.Displayable 的配置项。

zrender.path.mergePath(pathEls, opts)

合并多条路径。

参数

名称	类型	默认值	描述
pathEls	`Path[]`		路径数组。
opts	`Object`		配置项，参见 zrender.Displayable 的配置项。

zrender.Pattern

图案。

构造函数

zrender.Pattern(image, repeat)

名称	类型	默认值	描述
image	`HTMLImageElement`		图片对象。
repeat	`string`	`'repeat'`	重复模式，可取值有：`'repeat'`、 `'repeat-x'`、 `'repeat-y'`、 `'no-repeat'`。

zrender.RadialGradient

继承自 zrender.Gradient

径向渐变。

构造函数

zrender.RadialGradient(x, y, r, colorStops, globalCoord)

名称	类型	默认值	描述
x	`number`	`0.5`	渐变中心位置横坐标。
y	`number`	`0.5`	渐变中心位置纵坐标。
r	`number`	`0.5`	渐变半径。
colorStops	`Object[]`		组成渐变色的颜色。每个颜色包括 `offset` 与 `color` 属性，前者表示渐变位置（类型：`number`），后者表示具体的颜色（类型：`string`）
globalCoord	`boolean`	`false`	如果为 `false`，则 `colorStops` 取值范围是 `0` 到 `1`；如果为 `true`，则 `x`、 `y`、 `r`、 `colorStops` 的坐标和元素是一致的（也就是说，原先用 `1` 表示物体最右侧，这时需要用元素实际宽度表示最右侧）。

zrender.Transformable

可进行变换的对象，变换包括：位移、旋转、缩放。

构造函数

zrender.Transformable(opts)

参数

名称	类型	默认值	描述
opts	`Object`		配置项。
opts.position	`number[]`	`[0, 0]`	位移。
opts.rotation	`number`	`0`	旋转的弧度。
opts.scale	`number[]`	`[1, 1]`	缩放。
opts.origin	`number[]`	`null`	旋转和缩放的原点。

zrender.Transformable.decomposeTransform()

分解 transform 矩阵到 position、 rotation、 scale。通常用于修改 transform 后同步position、 rotation、 scale 属性。

zrender.Transformable.getGlobalScale()

获得全局的缩放。也就是说会祖先元素的缩放也会计算在内。

返回值

缩放，类型： number[]。

zrender.Transformable.origin

旋转和缩放的原点，类型： number[]。

zrender.Transformable.position

位移，类型： number[]。

zrender.Transformable.rotation

旋转的弧度，类型： number。

zrender.Transformable.scale

缩放，类型： number[]。

zrender.Transformable.transform

矩阵形式表示位移、旋转、缩放，类型： zrender.matrix。

zrender.Transformable.transformCoordToGlobal(x, y)

变换局部坐标位置到全局坐标空间。

参数

名称	类型	默认值	描述
x	`number`		横坐标。
y	`number`		纵坐标。

zrender.Transformable.transformCoordToLocal(x, y)

变换坐标位置到元素的局部坐标空间。

参数

名称	类型	默认值	描述
x	`number`		横坐标。
y	`number`		纵坐标。

zrender.util

静态类

常用辅助函数。

zrender.util.bind(func, context)

修改执行上下文。

参数

名称	类型	默认值	描述
func	`Function`		待执行的函数。
context	`*`		执行上下文。

zrender.util.clone(source)

深度拷贝一个对象。

参数

名称	类型	默认值	描述
source	`Object\|Array\|TypedArray\|number\|string\|null\|undefined`		参考对象。如果是 `Object` 类型，则克隆的结果是不包含原型属性的纯对象。

返回值

zrender.util.createCanvas()

获得一个 Canvas，不设置宽高。相当于 document.createElement('canvas')。

返回值

Canvas，类型：HTMLCanvasElement。

zrender.util.curry(func)

函数柯里化。

参数

名称	类型	默认值	描述
func	`Function`		回调函数。

zrender.util.defaults(target, source, overlay)

将一个对象中的元素赋给另一个元素。

参数

名称	类型	默认值	描述
target	`*`		需要修改的对象。
source	`*`		参考对象。
overlay	`boolean`		如果 `overlay` 为 `true`，则将 `source` 中非空的属性赋给 `targe`；如果 `overlay` 为 `false`，则将 `source` 中 `target` 不包含的属性赋给 `targe`。

返回值

拷贝结果，即 target。

zrender.util.each(array, cb, context)

遍历数组。相当于 Array.prototype.forEach。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		遍历回调函数。
context	`*`		执行上下文。

zrender.util.extend(target, source)

将 source 中非继承来的属性赋给 target。

参数

名称	类型	默认值	描述
target	`*`		需要修改的对象。
source	`*`		参考对象。

返回值

拷贝结果，即 target。

zrender.util.filter(array, cb, context)

过滤元素。相当于 Array.prototype.filter。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		回调函数。
context	`*`		执行上下文。

zrender.util.find(array, cb, context)

相当于 Array.prototype.find。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		用以检查元素是否存在的函数，返回元素是否存在的 `boolean` 结果。
context	`*`		执行上下文。

返回值

返回数组 array 中第一个找到的元素，类型：*。

zrender.util.getContext()

获得一个 Canvas 的绘制上下文。相当于 document.createElement('canvas').getContext('2d')。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		用以检查元素是否存在的函数，返回元素是否存在的 `boolean` 结果。
context	`*`		执行上下文。

返回值

Canvas 的绘制上下文，类型：CanvasRenderingContext2D。

zrender.util.indexOf(array, value)

查询数组中元素，返回下标。

参数

名称	类型	默认值	描述
array	`[]`		数组。
value	`*`		寻找的对象。

返回值

下标，类型：number。

zrender.util.inherits(clazz, baseClazz)

继承一个类，baseClazz 会继承 clazz 的方法、属性，clazz 会有 superClass 属性，指向 baseClazz。

参数

名称	类型	默认值	描述
clazz	`Function`		基类。
baseClazz	`Function`		子类。

zrender.util.isArray(data)

是否是数组。

参数

名称	类型	默认值	描述
data	`*`		判断对象。

返回值

是否是数组，类型：boolean。

zrender.util.isFunction(data)

是否是函数。

参数

名称	类型	默认值	描述
data	`*`		判断对象。

返回值

是否是函数，类型：boolean。

zrender.util.isObject(data)

是否是对象。

参数

名称	类型	默认值	描述
data	`*`		判断对象。

返回值

是否是对象，类型：boolean。

zrender.util.isString(data)

是否是字符串。

参数

名称	类型	默认值	描述
data	`*`		判断对象。

返回值

是否是字符串，类型：boolean。

zrender.util.map(array, cb, context)

映射数组。相当于 Array.prototype.map。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		映射函数。
context	`*`		执行上下文。

zrender.util.merge(target, source, overwrite)

拷贝一个对象。

参数

名称	类型	默认值	描述
target	`*`		需要修改的对象。
source	`*`		参考对象。
overwrite	`boolean`	`false`	是否深度拷贝。

返回值

拷贝结果，即 target。

zrender.util.reduce(array, cb, context)

相当于 Array.prototype.reduce。

参数

名称	类型	默认值	描述
array	`[]`		数组。
cb	`Function`		回调函数。
context	`*`		执行上下文。

zrender.util.slice(array, start, end)

相当于 Array.prototype.slice。

参数

名称	类型	默认值	描述
array	`[]`		数组。
start	`number`		起始下标。
end	`number`		终止下标。

返回值

数组 array 在 start（包含）位置到 end（不包含）位置的浅拷贝数组，类型：[]。

zrender.vector

静态类

长度为 2 的向量。

如果浏览器不支持 Float32Array 则类型为 number[]，否则为 Float32Array。

zrender.vector.add(out, v1, v2)

将向量 v1 与 v2 相加，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.applyTransform(out, v, m)

矩阵 m 左乘向量 v，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v	`Float32Array\|number[]`	向量。
m	`Float32Array\|number[]`	矩阵，参见 zrender.matrix。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.copy(out, v)

将向量 v 复制给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		待修改的向量。
v	`Float32Array\|number[]`		参考向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.clone(v)

将向量 v 复制，产生一个新副本。

返回值

新创建的向量，类型：Float32Array|number[]。

zrender.vector.distance(v1, v2)

得到向量 v1 与 v2 间距离。

参数

名称	类型	默认值	描述
v1	`Float32Array\|number[]`		第一个向量。
v2	`Float32Array\|number[]`		第二个向量。

返回值

距离，类型：number。

zrender.vector.distanceSquare(v1, v2)

得到向量 v1 与 v2 间距离的平方。

参数

名称	类型	默认值	描述
v1	`Float32Array\|number[]`		第一个向量。
v2	`Float32Array\|number[]`		第二个向量。

返回值

距离的平方，类型：number。

zrender.vector.div(out, v1, v2)

将向量 v1 与 v2 的每个元素分别相除，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.dot(v1, v2)

将向量 v1 与 v2 点乘，返回点积。

参数

名称	类型	默认值	描述
v1	`Float32Array\|number[]`		第一个向量。
v2	`Float32Array\|number[]`		第二个向量。

返回值

点积，类型：number。

zrender.vector.len(v)

求向量 v 的模长，也就是其两个元素的几何平均数。

参数

名称	类型	默认值	描述
v	`Float32Array\|number[]`		待求模长的向量，不会在该方法中被改变。

返回值

模长，类型：number。

zrender.vector.lenSquare(v)

求向量 v 的模长的平方。

参数

名称	类型	默认值	描述
v	`Float32Array\|number[]`		待求模长平方的向量，不会在该方法中被改变。

返回值

模长平方，类型：number。

zrender.vector.lerp(out, v1, v2, t)

将向量 v1 与 v2 在 t 位置进行插值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。
t	`number`	位置，`0` 到 `1`，`1` 表示 `v2` 处。

返回值

插值后的向量 out，类型：Float32Array|number[]。

zrender.vector.max(out, v1, v2)

求两个向量每个元素的最大值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.min(out, v1, v2)

求两个向量每个元素的最小值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.mul(out, v1, v2)

将向量 v1 与 v2 相乘，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.negate(out, v)

将向量 v 的负向量输出到 out，也就是每个元素都变成相反数。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		输出向量。
v	`Float32Array\|number[]`		输入向量。

返回值

负向量 out，类型：Float32Array|number[]。

zrender.vector.normalize(out, v)

将向量 v 归一化输出到 out，也就是将其模长变为 1。

参数

名称	类型	默认值	描述
out	`Float32Array\|number[]`		输出向量。
v	`Float32Array\|number[]`		输入向量。

返回值

归一化后的 out，类型：Float32Array|number[]。

zrender.vector.scale(out, v, s)

将向量 v 缩放 s 倍，得到的结果赋值给 out。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v	`Float32Array\|number[]`	待修改的向量，不会在改方法中被改变。
s	`number`	缩放量。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.scaleAndAdd(out, v1, v2, scale)

将向量 v2 缩放 scale 倍后，与 v1 相加，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。
scale	`number`	缩放比例，`1` 表示不缩放。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.set(out, a, b)

将值 (a, b) 赋给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	待修改的向量。
a	`number`	向量的第一个维度。
b	`number`	向量的第二个维度。

返回值

输出向量，类型：Float32Array|number[]。

zrender.vector.sub(out, v1, v2)

将向量 v1 与 v2 相减，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

名称	类型	描述
out	`Float32Array\|number[]`	输出向量。
v1	`Float32Array\|number[]`	第一个向量。
v2	`Float32Array\|number[]`	第二个向量。

返回值

输出向量，类型：Float32Array|number[]。

zrender 实例

add(el)

向画布内添加元素。

参数

名称	类型	默认值	描述
el	`Element`		向画布内添加的元素。被添加的元素可以通过 `remove(el)` 移除。

addHover(el, style)

将元素添加到高亮层。添加到高亮层后，可以通过 removeHover 移除。

参数

名称	类型	默认值	描述
el	`Element`		待添加的元素。
style	`Object`		元素样式。

animation

类型：Animatoin，动画。

clear()

清除所有对象和画布。

clearAnimation()

停止所有动画。

clearHover()

清除高亮层中所有的元素。

configLayer(zLevel, config)

改变某个层的配置。

参数

名称	类型	默认值	描述
zlevel	`string`		层级，`zlevel` 更大的层将覆盖更小的层。
config	`Object`		配置项。
config.clearColor	`string`	`'#000'`	用于清除画布的颜色，默认为黑色。
config.motionBlur	`boolean`	`false`	是否对该层采用动态模糊。
config.lastFrameAlpha	`number`	`0.7`	用于动态模糊的混合因子，表示上一帧画面保留的比例。应介于 `0` 与 `1` 之间，`0` 表示完全使用当前帧，`1` 表示完全使用上一帧的画面。

dispose()

移除自身。当不再需要使用该实例时，调用该方法以释放内存。

dom

类型：HTMLDomElement，绘图容器。

flush()

立即触发 refresh 和 refreshHover 所标记的重绘操作。

getHeight()

获取画布高度。

getWidth()

获取画布宽度。

id

类型：string，zrender 实例的唯一标识符。

off(eventName, eventHandler)

取消绑定事件处理。

参数

名称	类型	默认值	描述
`eventName`	`string`		事件名称，支持： `'click'`、 `'mousedown'`、 `'mouseup'`、 `'mousewheel'`、 `'dblclick'`、 `'contextmenu'`。
`eventHandler`	`Function`		事件处理的回调函数。

on(eventName, eventHandler, context)

绑定事件处理。

参数

名称	类型	描述
`eventName`	`string`	事件名称，支持： `'click'`、 `'mousedown'`、 `'mouseup'`、 `'mousewheel'`、 `'dblclick'`、 `'contextmenu'`。
`eventHandler`	`Function`	事件处理的回调函数。
`context`	`Object`	函数上下文。

refresh()

刷新画布，将在下一个渲染帧的时候被刷新。

refreshHover()

刷新高亮层，将在下一个渲染帧的时候被刷新。

refreshHoverImmediately()

强制立即刷新高亮层。

refreshImmediately()

强制立即刷新画布。

remove(el)

从画布内移除元素。

参数

名称	类型	默认值	描述
el	`Element`		通过 `add(el)` 添加到画布的元素。

removeHover(el)

将元素从高亮层移除。

参数

名称	类型	默认值	描述
el	`Element`		待删除的元素。

resize(opts)

更新画布大小。当容器改变大小时，应调用此方法。

参数

名称	类型	默认值	描述
`opts`	`Object`		宽高配置项
`opts.width`	`number\|string`	`'auto'`	宽度，设为 `'auto'` 与设为 `null` 或 `undefined` 的效果相同，相当于自动获取容器宽度以改变画布宽度。
`opts.height`	`number\|string`	`'auto'`	高度，设为 `'auto'` 与设为 `null` 或 `undefined` 的效果相同，相当于自动获取容器高度以改变画布高度。

trigger(eventName, event)

手动触发事件。

参数

名称	类型	默认值	描述
`eventName`	`string`		事件名称，支持： `'click'`、 `'mousedown'`、 `'mouseup'`、 `'mousewheel'`、 `'dblclick'`、 `'contextmenu'`。
`event`	`Object`		事件对象。