# 区域组件
区域组件是构成图表的基本结构。区域组件包括表头（WxTitle），图例（WxLegend），轴（WxScale）等，其“领土”配置统一由布局组件（WxLayout）控制。
在wx-chart中，每个区域组件都继承于`WxBaseComponent`，拥有自己的声明周期，并在Canvas中占有一定的“领土”，用于渲染自己。这也意味着，区域组件是可以独立渲染的，并只需要为其赋予一个空图表（WxChart）实例。
以下为简单表头组件的例子
```js
import { WxChart } from 'wx-chart';
import { WxTitle } from 'wx-chart/core/title';
const wxChart = new WxChart('myCanvas', {
width: 600,
height: 350
});
const title = new WxTitle(wxChart, {
fontSize: 23,
fontColor: '#840004',
});
// 直接渲染
title.update('Title', wxChart.innerBox);
```
可以看到，我们直接引用了 `core/title` 路径下的 `WxTitle`获得了表头组件的实例；而后将在实例化时，分别传入WxChart实例与配置信息，最后调用 `update` 方法，组件就直接渲染了。
你可能会注意到 `wxChart.innerBox` 对象，这是一个包含布局信息的 盒布局对象（BoxInstance）我们会在 [组件布局](component.md#layout) 章节中讲到他。
## <span id="title">表头</span>
表头组件（WxTitle）是最简单的组件。你可以按照如下方法引用获得实例：
```js
import { WxTitle } from 'wx-chart/core/title';
```
常用的配置如下：
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| position | string |紧挨位置，顶部（top）或底部（bottom） | top |
| fullWidth | Boolean |标志是否占满整个宽度，当为true时，width设置无效| true |
| fontSize | number |字体大小 | 16 |
| fontColor | string |[CSS颜色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | #666666 |
| padding | number |间距 | 10（px） |
## <span id="legend">图例</span>
图例组件（WxLegend）相对比较复杂，其作为一个基本组件与图表配合，显示图表各个系列表示的意思。
引用方式如下：
```js
import { WxLegend } from 'wx-chart/core/legend';
```
图例组件需要在update时传入一个数组，并且可以根据宽高设置位置，支持双重设置，如'top bottom'。
```js
let wxChart = ...;
let legend = new WxLegend(wxChart, {
position: 'right bottom'
});
let datasets = [{
text: 'Jun',
fillStyle: '#00eabf',
trokeStyle: '#00b574'
},{
text: 'July',
fillStyle: '#eae742',
strokeStyle: '#eac900'
},{
text: 'Aug',
fillStyle: '#5353ea',
strokeStyle: '#404aea'
},{...}];
legend.update(datasets, wxChart.innerBox);
```
常用的配置如下：
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| position | string | top,left,bottom或right，或者设置边角位置，如'left top' | top |
| fullWidth | Boolean |标志是否占满整个宽度，当为true时，width设置无效| true |
| labels | Object |设置字体字号等 | {boxWidth: 30,fontSize: 11,padding: 10} |
| labels.boxWidth | number |图例方块的宽度 | 30 |
| labels.fontSize | number |字体 | 11（px） |
| labels.padding | number |框间距 | 10（px） |
## <span id="scale">轴</span>
轴（WxScale）组件作为基础组件，可以在相应的区域内绘画水平或垂直轴。
`WxScale` 是轴组件基础类，除此之外还有多个继承组件，如 `WxLinerScale` 组件，实现了线性值适应性的轴组件。
基础的轴组件，你可以按照如下方法引用获得实例：
```js
import { WxScale } from 'wx-chart/core/scale';
```
基础的轴，传入每个轴的值点既可以生成一个轴。并且可以在声明时，设置`position` 参数，便可以控制轴的绘画方式，如下所示：
```js
let wxChart = ...;
let scale = new WxScale(wxChart, {
'position': 'right'
});
let datasets = [{
'text': '100',
'lineWidth': 2
},{
'text': '80'
},{
'text': '60'
},{
'text': '40'
},{
'text': '20'
},{
'text': '0'
}];
let box = wxChart.innerBox.clone();
scale.update(datasets, box);
```
基础轴的配置如下：
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| position | string | top,left,bottom或right | top |
| color | [CSS颜色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 轴的颜色 | '#000000' |
| lineWidth | number | 轴的线宽度值 | 1 |
| title | string | 轴的标题 | |
| titleFontSize | number | 轴的标题文字字号 | 12 |
| titleFontColor | [CSS颜色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 轴的标题文字颜色 | '#4c4d4d' |
| ticks | Object| 轴上点的设置 | { display: true, autoSkip: true,lineWidth: 1,fontColor: '#000000',fontSize: 11,minRotation: 0,maxRotation: 90} |
轴上每一个点可以单独配置，在传入数据时设置即可（上面的例子中，第一个点就是单独设置了lineWidth）。如果没有全局配置，则遵循图形的`ticks`设置项，全局配置。
轴上点（Tick）的全局配置如下：
| 参数 | 类型 | 说明 | 默认值 |
| ------------- |:-------------:|:----------------|:-------:|
| autoSkip | Boolean | 如果点比较多，允许图形放弃某些集中区域的点 | true |
| lineWidth | number | 图形点的宽度配置 | 1 |
| fontColor | [CSS颜色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 标识点的文字颜色 | '#000000' |
| fontSize | number | 标识点的文字字号 | 11 |
| minRotation | number | 当空间不够时，系统会以中心点旋转文字排列，设定旋转角度的最小值 | 0 |
| maxRotation | number | 当空间不够时，系统会以中心点旋转文字排列，设定旋转角度的最小值 | 90 |
### <span id="categoryScale">分类轴</span>
分类轴（WxCategoryScale）组件作为基础轴的衍生组件，主要增加了一些辅助方法用于计算范围边界。
### <span id="linerScale">线性轴</span>
线性轴（WxLinerScale）组件作为基础轴的衍生组件，主要适用于一定数值范围的轴的绘制，并且提供方法，在给定的数值范围内自动生成轴上点。
简单的使用方法如下图所展示：
```js
import { WxLinerScale } from 'wx-chart/scale/scale.liner';
let wxChart = ...;
let scale = new WxLinerScale(wxChart, {
'position': 'bottom'
});
let box = wxChart.innerBox.clone();
// 自动计算最优间隔点
let tickLimits = scale.calculateTickLimit(box, wxChart.ctx);
// 计算间隔点值，范围 -10 ~ 178
let datasets = scale.buildDatasets(178, -10, tickLimits);
// [{text: '-20', value: -20}, {text: '0', value: 0}, {text: '20', value: 20}, {text: '40', value: 40}, {text: '60', value: 60}, {text: '80', value: 80}, {text: '100', value: 100}, {text: '120', value: 120}, {text: '140', value: 140}, {text: '160', value: 160}, {text: '180', value: 180}]
scale.update(datasets, box);
```
### <span id="crossScale">交叉轴</span>
交叉轴组件是整合两个轴组件的帮助工具，可以快速的绘制一个二维的X-Y轴。
如下所示，只需要讲XY轴定义完成，传入交叉轴实例即可。
```js
import WxCategoryScale from '../src/scale/scale.category'
import WxLinerScale from '../src/scale/scale.liner'
import WxCrossScale from '../src/scale/scale.crosshelp'
let wxChart = ...;
// x-axis
let xScale = new WxCategoryScale(wxChart, {
'position': 'bottom'
});
let xScaleDatasets = [{
text: '一月'
}, {
text: '二月'
}, {
text: '三月'
}, {
text: '四月'
}, {
text: '五月'
}];
// y-axis
let yScale = new WxLinerScale(wxChart, {
'position': 'left'
});
let yMin = -10,
yMax = 178;
let box = wxChart.innerBox.clone();
let tickLimits = yScale.calculateTickLimit(box, wxChart.ctx);
let yScaleDatasets = yScale.buildDatasets(yMax, yMin, tickLimits);
let wxCrossScale = new WxCrossScale(xScale, yScale);
let {xBox, yBox} = wxCrossScale.draw(box, xScaleDatasets, yScaleDatasets);
```
