## Chart 图表

### 使用指南
``` javascript
import { Chart } from 'vortex-mobile';

Vue.use(Chart);
```

### 代码演示

#### 饼图

```html
<vm-chart :series-data="seriesData"></vm-chart>
```

#### 环状图
通过设置series-radius属性来控制环的粗细，数组的第一项是内半径，第二项是外半径。
```html
<vm-chart
  :series-data="seriesData"
  :series-radius="['30%','60%']"
>
</vm-chart>
```

#### 仪表图
series-data为数组，每一项的value及name代表值与名称。
```html
<vm-chart
  series-type="gauge"
  :series-data="[{value:19.26,name:'营销推荐转化率'}]"
>
</vm-chart>
```

#### 柱状图
series-type为bar，x-axis-data为横坐标刻度数组。
```html
<vm-chart
  :series-data="seriesData"
  :x-axis-data="xAxisData"
  series-type="bar"
>
</vm-chart>
```

#### 折线图
series-type为line，x-axis-data为横坐标刻度数组。
```html
<vm-chart
  :series-data="seriesData"
  :x-axis-data="xAxisData"
  series-type="line"
>
</vm-chart>
```

#### 漏斗图
series-type为funnel。
```html
<vm-chart
  :series-data="seriesData"
  series-type="funnel"
>
</vm-chart>
```

### API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| width | 绘制图表div的宽度 | `String` | `100%` | - |
| height | 绘制图表div的高度 | `String` | `300px` | - |
| title | 图表标题，支持使用 \n 换行 | `String` | - | - |
| legend-show | 是否显示图例说明 | `Boolean` | `false` | - |
| legend-left | 图例组件离容器左侧的距离，可选值为`auto` `left` `center` `right` | `String` | `auto` | - |
| legend-orient | 图例列表的布局朝向，可选值为`horizontal` `vertical` | `String` | `horizontal` | - |
| series-name | 系列名称，用于tooltip的显示，legend 的图例筛选 | `String` | - | - |
| series-type | 系列类型，可选值为`pie` `gauge` `bar` `line` `funnel` | `String` | `pie` | - |
| series-data | 系列中的数据内容数组。数组项可以为单个数值，也可以是对象 | `Array` | - | - |
| series-radius | 饼图的半径,可以将内半径设大显示成圆环图 | `Array.<number|string>` `String` `Number` | `['20%','60%']` | - |
| series-label-formatter | 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。{a}：系列名；{b}：数据名；{c}：数据值；{d}：百分比 | `String` | - | - |
| series | 自定义系列，详细说明请见https://echarts.apache.org/zh/option.html#series | `Array` | - | - |
| x-axis-data | 横轴坐标数组，数组项为单个数值 | `Array` | - | - |