# chart
图表组件，用于呈现线性图、柱状图界面。
# 子组件
不支持。
# 属性
支持 通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| type | string | line | 是 | 设置图表类型（不支持动态修改），可选项有： bar：柱状图。 line：线型图。 |
| options | Object | - | 是 | 图表参数设置，柱状图和线性图必须设置参数设置。 可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等，详见表1。（不支持动态修改） |
| datasets | Array | - | 是 | 数据集合，柱状图和线性图必须设置数据集合。 可以设置多条数据集及其背景色，详见表2。 |
表1 options定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| xAxis | Object | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。详见表3。 |
| yAxis | Object | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。详见表4。 |
| series | Object | - | 否 | 数据序列参数设置，仅线型图支持。可以设置： - 线的样式，如线宽、是否平滑； - 设置线最前端位置白点的样式和大小。详见表6和表7。 |
表2 datasets定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| strokeColor | <color> | #ff6384 | 否 | 线条颜色，仅线型图支持。 |
| fillColor | <color> | #ff6384 | 否 | 填充颜色。 |
| data | Array<number> | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充颜色。 |
表3 xAxis定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| min | number | 0 | 否 | x轴的最小值。不支持负数，仅线型图支持。 |
| max | number | 100 | 否 | x轴的最大值。不支持负数，仅线型图支持。 |
| axisTick | number | 10 | 否 | x轴显示的刻度数量。 仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。 在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示x轴。 |
| color | <color> | #c0c0c0 | 否 | x轴颜色。 |
表4 yAxis定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| min | number | 0 | 否 | y轴的最小值，不支持负数。 |
| max | number | 100 | 否 | y轴的最大值。 |
| axisTick | number | 10 | 否 | y轴显示的刻度数量。 仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。 |
| display | boolean | false | 否 | 是否显示y轴。 |
| color | <color> | #c0c0c0 | 否 | y轴颜色。 |
表5 series定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| lineStyle | Object | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | Point | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | Point | - | 否 | 最高点的样式和大小。 |
| bottomPoint | Point | - | 否 | 最低点的样式和大小。 |
| loop | Object | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。详见表8 |
表6 lineStyle定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| width | <length> | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 |
表7 HeadPoint/TopPoint/BottomPoint定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| shape | string | circle | 否 | 线最前端/最高点/最低点位置高亮点的形状。 |
| size | <length> | 5px | 否 | 线最前端/最高点/最低点位置高亮点的大小。 |
| strokeWidth | <length> | 1px | 否 | 边框宽度 |
| strokeColor | <color> | #ff0000 | 否 | 边框颜色。 |
| fillColor | <color> | #ff0000 | 否 | 填充颜色。 |
| display | boolean | true | 否 | 是否高亮显示。 |
表8 loop定义
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。 注意：margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
# 事件
支持 通用事件
# 方法
| 方法 | 参数 | 描述 |
|---|---|---|
| append | {serial: number, // 设置要更新的线型图数据下标data: Array<number>, // 设置新增的数据} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。 注意：不会更新datasets[index].data。仅线型图支持，按横坐标加1递增（与xAxis min/max设置相关）。 |
# 样式
支持 通用样式