基础图形

插件内置了丰富的基础图形，如下是相关实例，你还可以尝试拖拽他们。

圆形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 圆心x轴坐标 | | ry | Number | 0 | 圆心y轴坐标 | | r | Number | 0 | 圆半径 |

<<< @/docs/guide/graphData/circle.js

椭圆形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 圆心x轴坐标 | | ry | Number | 0 | 圆心y轴坐标 | | hr | Number | 0 | 横轴半径 | | vr | Number | 0 | 竖轴半径 |

<<< @/docs/guide/graphData/ellipse.js

矩形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | x | Number | 0 | 矩形左上角x轴坐标 | | y | Number | 0 | 矩形左上角y轴坐标 | | w | Number | 0 | 矩形宽度 | | h | Number | 0 | 矩形高度 |

<<< @/docs/guide/graphData/rect.js

环形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 中心点x轴坐标 | | ry | Number | 0 | 中心点y轴坐标 | | r | Number | 0 | 环半径 |

<<< @/docs/guide/graphData/ring.js

弧形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 中心点x轴坐标 | | ry | Number | 0 | 中心点y轴坐标 | | r | Number | 0 | 弧半径 | | startAngle | Number | 0 | 弧起始弧度值 | | endAngle | Number | 0 | 弧结束弧度值 | | clockWise | Boolean | true | 是否顺时针 |

<<< @/docs/guide/graphData/arc.js

扇形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 中心点x轴坐标 | | ry | Number | 0 | 中心点y轴坐标 | | r | Number | 0 | 扇形半径 | | startAngle | Number | 0 | 扇形起始弧度值 | | endAngle | Number | 0 | 扇形结束弧度值 | | clockWise | Boolean | true | 是否顺时针 |

<<< @/docs/guide/graphData/sector.js

正多边形

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | rx | Number | 0 | 中心点x轴坐标 | | ry | Number | 0 | 中心点y轴坐标 | | r | Number | 0 | 外接圆半径 | | side | Number | 0 | 边数 |

<<< @/docs/guide/graphData/regPolygon.js

折线

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | points | Array | [] | 构成折线的点 | | close | Boolean | false | 是否闭合折线 |

<<< @/docs/guide/graphData/polyline.js

折线（闭合）

<<< @/docs/guide/graphData/polylineClosed.js

光滑曲线

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | points | Array | [] | 构成光滑曲线的点 | | close | Boolean | false | 是否闭合光滑曲线 |

<<< @/docs/guide/graphData/smoothline.js

光滑曲线（闭合）

<<< @/docs/guide/graphData/smoothlineClosed.js

贝塞尔曲线

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | points | Array | [] | 构成贝塞尔曲线的点 | | close | Boolean | false | 是否闭合贝塞尔曲线 |

<<< @/docs/guide/graphData/bezierCurve.js

贝塞尔曲线（闭合）

<<< @/docs/guide/graphData/bezierCurveClosed.js

文本

shape属性表

| 属性名 | 类型 | 默认值 | 注解 | | :—-: | :—-: | :—-: | :—-: | | content | String | '' | 文本内容 | | position | Array | [0, 0] | 文本起始位置 | | maxWidth | Number | Undefined | 文本最大宽度 | | rowGap | Number | 0 | 行间距 |

<<< @/docs/guide/graphData/text.js

::: tip TIP 图形text的鼠标事件依赖hoverRect属性，如需鼠标事件生效请对其配置。文本中插入\n可以进行换行。 :::