# <span id="basic">基础</span>
本章节将循序渐进的介绍基础的图形使用，以及使用中需要注意的相关问题。也会介绍整个图形配合React以及微信小程序环境下的使用。
## <span id="init">初始化</span>
在 [部署](gettingstarted/deployment.md) 本实例后。如果你并非使用React框架，则你需要在HTML中添加canvas节点。
```html
<canvas id="myCanvas" canvas-id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;"></canvas>
```
而后使用 `new` 字符声明一个图形库实例，如下所示：
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
width: 700,
height: 400,
title: '测试线状图',
legends:[{
text: '测试图1'
}]
});
```
所有的实例初始化，均需要传入两个参数。首参数为图形所使用的的Canvas画布的id（或微信小程序中的canvas-id）或者*HTMLElement*节点。第二个参数为图形实例的详细设置项。
每个图形实例均有 __基础设置__
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| width | number |宽度（小程序中必填）| 300 |
| height | number |高度（小程序中必填）| 200 |
| title | string |标题 | |
| display | Boolean |展示 | true |
| color | Object |[颜色设置](#color) | { hue: 'red', luminosity: 'light'} |
在设置项中也包含 __区域组件设置__，这些用来设置每个区域组件的展示个布局，包括：
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| title | string or Object|图表抬头 | |
| legends | Array |图例定义项 | 200 |
| legendOptions | Object |图例设置项 | {position: 'bottom'} |
| xScaleItemOptions| Object |X轴定义项默认值 | |
| xScaleOptions | Object |X轴设置项 | |
| yScaleItemOptions| Object |Y轴定义项默认值 | {position: 'left'} |
| yScaleOptions | Object |Y轴设置项 | |
| crossScaleOptions | Object |交叉设置项 | |
这些设置的具体会在 [区域组件](component.md) 章节中会做详细介绍。
## <span id="update">更新数据</span>
初始化后，图表不会立即渲染。需要使用 `update` 方法更新数据后，才会触发渲染。
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {...});
wxLiner.update([{
value: 1,
label: '一月'
}, {
value: 40,
label: '二月'
}, {
value: 35,
label: '三月'
}, {
value: 56,
label: '四月'
}, {
value: 71,
label: '五月'
}]);
```
`update` 方法需要传入一个数组。其中的每一项表示一个X轴维度的数据集合。
需要特别注意的是，根据[图例](component.md#legend)的数量，数据的取值方式也会略有不同：
* 当图例__仅有一个__时，或者类似于饼图这种只能有一个图例的图形时，程序默认会从 `value` 中去的值。
* 当图例__有多个__时，程序默认会从 `legends`定义中，对应每个定义项目的 `key`设置，并读取每个数据集合中对应名称的值。
例如：
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
...,
legends: [{
text: '日用品',
key: 'dailyNecessities'
}, {
text: '水果',
key: 'fruit'
}, {
text: '家电',
key: 'appliances'
}]
});
wxElement.update([{
dailyNecessities: 1,
fruit: 10,
appliances: 30,
label: '一月'
}, {
dailyNecessities: 20,
fruit: 50,
appliances: 10,
label: '二月'
}, ...});
```
## <span id="color">颜色相关</span>
图形库内嵌 [randomColor](https://github.com/davidmerfield/randomColor)，默认的能够随机生成颜色，默认生成红色系为基础色系的颜色。通过设置图形的 `color` 选项可以设置随机颜色的色系和光度。
例如，设置为亮色蓝色系：
```js
let wxLiner = new WxLiner('myCanvas', {
color: {
luminosity: 'light',
hue: 'blue'
}
...
});
```
详细设置参见 [randomColor文档](https://github.com/davidmerfield/randomColor)
当然，你也可以自己控制每个图形的颜色。通常来讲，在图例配置中可以做相应设置，以线状图为例：
```js
let wxLiner = new WxLiner('myCanvas', {
...,
legends:[{
text: '日用品',
key: 'dailyNecessities',
fillArea: true,
fillStyle: '#3385ff',
strokeStyle: '#3385ff'
}, {
text: '水果',
key: 'fruit',
strokeStyle: '#238456'
}, {
text: '家电',
key: 'appliances'
}]
});
```
上述例子中，`fillStyle` 与 `strokeStyle` 属性，分别配置每个线图图例的填充颜色和线的颜色。
## <span id="lifecycle">生命周期</span>
图形库每个实例维护自身的生命周期，几个关键周期以及相应函数如下：
* 初始化 (new 实例化后）
* 做相应清理
* 初始化画布
* 配置以及相关组件
* 更新数据 `update`
* 图像绘画 `draw`
* 清除图形 `clear`
* 绘画组件（标题，图例，轴）
* 图像销毁 `destroy`
* 清除图形 `clear`
* 重置画布属性
## <span id="react">React结合</span>
React中的使用方法与正常的使用方法基本一致。参数的传入是通过在jsx中传入相关属性完成。
首先你需要按照 [部署-React](gettingstarted/deployment.md#react) 章节中的实例去部署，而后使用 `ReactDOM.render` 方法渲染。
```js
import React from 'react';
import ReactDOM from 'react-dom';
import WxLinerReact from 'wx-chart';
let body = document.body;
let linerProps = {
width: 700,
height: 400,
title: '测试线状图',
legends:[{
text: '测试图1'
}]
};
// 直接使用...符号将props传入组件
const wxElement = ReactDOM.render(<WxLinerReact {...linerProps}></WxLinerReact>, body);
// 更新数据
wxElement.update({...});
// 销毁
// ReactDOM.unmountComponentAtNode(document.body);
```
## <span id="wx">微信小程序结合</span>
微信小程序中的使用方式，除了 [部署-微信小程序](gettingstarted/deployment.md#wx) 略有区别之外，其他基本一致。
