# 客户端

#### 介绍
echart的二次封装


#### 安装教程

```bash
npm install echart-table
```
##### 在main.js文件全局引入
```bash
import echartTable from 'echart-table'
import 'echart-table/dist/echart-table.css'
Vue.use(echartTable)
```

#### 使用说明

1、 组件使用
```bash
<echart-table></echart-table>
```
2、 参数

| 参数 | 是否必填 | 默认 | 说明 |
| :---- | ----: | :----: | ----: |
|config | 是 | 详细配置看下方 | 配置项 |
|width | 否 | 100%(可填number参数如：1，实际就是1px) | 宽度 |
|height | 否 | 100%(可填number参数如：1，实际就是1px) | 高度 |
|title | 否 | 无 | 标题 |
|listData | 否 | 详细配置看下方 | 数据项 |
|fromData | 否 | 详细配置看下方 | 数据项 |

3、config,配置

```bash
{
    type: 'pie', // 目前line(折线)，bar(柱状), pie(饼图)
    showLegend: true, // 是否显示标签
    legendPosition: { // 标签位置
        left: 'left'
    },
}
```
4、listData,数据格式，数组，饼图默认取第一条数据
```bash
[{
    lineName: '第一条数据',
    lineData: [
        {key: '周一', value: 10},
        {key: '周二', value: 15},
        {key: '周三', value: 16},
        {key: '周四', value: 23},
        {key: '周五', value: 15},
        {key: '周六', value: 35},
        {key: '周日', value: 42},
    ]
},{
    lineName: '第二条数据',
    lineData: [
        {key: '周一', value: 1},
        {key: '周二', value: 4},
        {key: '周三', value: 8},
        {key: '周四', value: 3},
        {key: '周五', value: 36},
        {key: '周六', value: 21},
        {key: '周日', value: 2},
    ]
}]
```
5、fromData,在config.isApi为true的时候使用接口请求
```bash
[{
    payload: {}, // 接口请求参数
    map: {
        lineName: '', // 多元素名称
        key: '',  x轴的名称取值，用的哪个字段，把字段名放到key
        value: '',  y轴的取值,把字段名放到value
    },
}]
```
